Profile styling, layout and cleanup.

src/templates/users/settings/base.pug

@@ -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 %}

src/templates/users/settings/profile.pug

@@ -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 %}