archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Profile styling, layout and cleanup.

Browse Source
This commit is contained in:
Pablo Vazquez 2018-09-15 16:42:29 +02:00
parent 6b29c70212
commit 0f7f7d5a66
3 changed files with 32 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/styles/_user.sass
View File

@ -67,131 +67,6 @@
&:hover
background-color: lighten($provider-color-google, 7%)
#settings
#settings-sidebar
+media-xs
width: 100%
+container-box
background-color: $color-background-light
color: $color-text
margin-right: 15px
width: 30%
.settings-content
padding: 0
ul
list-style: none
margin: 0
padding: 0
a
&:hover
text-decoration: none
li
background-color: lighten($color-background, 5%)
li
border-bottom: thin solid $color-background
border-left: thick solid transparent
margin: 0
padding: 25px
transition: all 100ms ease-in-out
i
font-size: 1.1em
padding-right: 15px
.active
li
background-color: lighten($color-background, 5%)
border-left: thick solid $color-info
#settings-container
+media-xs
width: 100%
+container-box
background-color: $color-background-light
width: 70%
.settings-header
background-color: $color-background
border-top-left-radius: 3px
border-top-right-radius: 3px
.settings-title
font:
size: 1.5em
weight: 300
padding: 10px 15px 10px 25px
.settings-content
padding: 25px
.settings-billing-info
font-size: 1.2em
.subscription-active
color: $color-success
padding-bottom: 20px
.subscription-demo
color: $color-info
margin-top: 0
.subscription-missing
color: $color-danger
margin-top: 0
.button-submit
clear: both
display: block
min-width: 200px
margin: 0 auto
+button($color-primary, 3px, true)
#settings-container
#settings-form
width: 100%
.settings-form
align-items: center
display: flex
justify-content: center
.left, .right
padding: 25px 0
.left
width: 60%
float: left
.right
width: 40%
float: right
text-align: center
label
color: $color-text
display: block
.settings-avatar
img
border-radius: 3px
span
display: block
padding: 15px 0
font:
size: .9em
.settings-password
color: $color-text-dark-primary
#user-edit-container
padding: 15px

50
src/templates/users/settings/base.pug
View File

@ -1,36 +1,34 @@
| {% extends 'layout.html' %}
include ../../mixins/components
//- Don't extend this base file directly. Instead, extend page.html so that Pillar extensions
//- can provide overrides.
| {% block body %}
.container
#settings.d-flex.py-4.flex-xs-column
#settings-sidebar
.container.py-4
.row
.col-md-3
| {% block settings_sidebar %}
.settings-header
.settings-title Settings
.settings-content
ul
| {% block settings_sidebar_menu %}
a(class="{% if title == 'profile' %}active{% endif %}",
href="{{ url_for('settings.profile') }}")
li
i.pi-vcard
| Profile
| {% endblock settings_sidebar_menu %}
| {% block settings_sidebar_menu_bottom %}
a(class="{% if title == 'roles' %}active{% endif %}",
href="{{ url_for('settings.roles') }}")
li
i.pi-cog
| Roles & Capabilities
| {% endblock settings_sidebar_menu_bottom %}
+nav-secondary('Settings')(class="nav-secondary-vertical bg-light")
| {% block settings_sidebar_menu %}
+nav-secondary-link(
class="{% if title == 'profile' %}active{% endif %} border-top",
href="{{ url_for('settings.profile') }}")
i.pr-3.pi-vcard
span Profile
| {% endblock settings_sidebar_menu %}
| {% block settings_sidebar_menu_bottom %}
+nav-secondary-link(
class="{% if title == 'roles' %}active{% endif %}",
href="{{ url_for('settings.roles') }}")
i.pr-3.pi-cog
span Roles & Capabilities
| {% endblock settings_sidebar_menu_bottom %}
| {% endblock %}
#settings-container
.settings-header
.settings-title {% block settings_page_title %}{{ _("Title not set") }}{% endblock %}
.col-md-9
h3.py-1 {% block settings_page_title %}{{ _("Title not set") }}{% endblock %}
.settings-content
| {% block settings_page_content %}No content set, update your template.{% endblock %}
| {% block settings_page_content %}No content set, update your template.{% endblock %}
| {% endblock %}

17
src/templates/users/settings/profile.pug
View File

@ -21,7 +21,7 @@ style.
| {% block settings_page_content %}
.settings-form
form#settings-form(method='POST', action="{{url_for('settings.profile')}}")
.left
.pb-3
.form-group
| {{ form.username.label }}
| {{ form.username(size=20, class='form-control') }}
@ -45,14 +45,13 @@ style.
| {{ current_user.badges_html|safe }}
p.hint-text Note that updates to these badges may take a few minutes to be visible here.
| {% endif %}
.right
.settings-avatar
a(href="https://gravatar.com/")
img(src="{{ current_user.gravatar }}")
span {{ _("Change Gravatar") }}
.py-3
a(href="https://gravatar.com/")
img.rounded-circle(src="{{ current_user.gravatar }}")
span.p-3 {{ _("Change Gravatar") }}
.buttons
button.btn.btn-outline-success.button-submit(type='submit')
i.pi-check
.py-3
button.btn.btn-outline-success.px-5.button-submit(type='submit')
i.pi-check.pr-2
| {{ _("Save Changes") }}
| {% endblock %}