Implement user setting pages

flaskbb/templates/user/change_email.html

@@ -1,18 +1,18 @@
 {% extends theme("user/settings_layout.html") %}
 {% block settings_content %}
-{% from theme("macros.html") import horizontal_field %}
+{%- from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Change E-Mail Address{% endtrans %}
     </div>
-    <div class="panel-body page-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ horizontal_field(form.old_email)}}
             {{ horizontal_field(form.new_email)}}
             {{ horizontal_field(form.confirm_new_email)}}
-            {{ horizontal_field(form.submit) }}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}
         </form>
     </div>
 </div>

flaskbb/templates/user/change_password.html

@@ -1,18 +1,18 @@
 {% extends theme("user/settings_layout.html") %}
 {% block settings_content %}
-{% from theme("macros.html") import horizontal_field %}
+{%- from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Change Password{% endtrans %}
     </div>
-    <div class="panel-body page-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ horizontal_field(form.old_password)}}
             {{ horizontal_field(form.new_password)}}
             {{ horizontal_field(form.confirm_new_password)}}
-            {{ horizontal_field(form.submit) }}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}
         </form>
     </div>
 </div>

flaskbb/templates/user/change_user_details.html

@@ -1,17 +1,17 @@
 {% extends theme("user/settings_layout.html") %}
 
 {% block settings_content %}
-{% from theme("macros.html") import horizontal_field, horizontal_select_field %}
+{%- from theme("_macros/form.html") import horizontal_field, render_select_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}Change User Details{% endtrans %}
     </div>
-    <div class="panel-body page-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ run_hook('flaskbb_tpl_form_user_details_before', form=form) }}
-            {{ horizontal_select_field(form.birthday, select_class="form-control", surrounded_div="col-sm-4") }}
+            {{ horizontal_field(form.birthday, div_class="row col-5", class="form-select", surrounded_div="col-4") }}
             {{ horizontal_field(form.gender) }}
             {{ horizontal_field(form.location) }}
             {{ horizontal_field(form.website) }}
@@ -19,9 +19,9 @@
             {{ horizontal_field(form.signature, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
             {{ horizontal_field(form.notes, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
             {{ run_hook('flaskbb_tpl_form_user_details_after', form=form) }}
-            {{ horizontal_field(form.submit) }}
 
-            {% include theme('editor_help.html') %}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}
+
         </form>
     </div>
 </div>

flaskbb/templates/user/general_settings.html

@@ -1,17 +1,17 @@
 {% extends theme("user/settings_layout.html") %}
 {% block settings_content %}
-{% from theme("macros.html") import horizontal_field %}
+{%- from theme("_macros/form.html") import horizontal_field %}
 
-<div class="panel page-panel">
-    <div class="panel-heading page-head">
+<div class="card page">
+    <div class="card-header page-header">
         {% trans %}General Settings{% endtrans %}
     </div>
-    <div class="panel-body page-body">
-        <form class="form-horizontal" role="form" method="POST">
+    <div class="card-body page-body">
+        <form role="form" method="POST">
             {{ form.hidden_tag() }}
             {{ horizontal_field(form.theme) }}
             {{ horizontal_field(form.language) }}
-            {{ horizontal_field(form.submit) }}
+            {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}
         </form>
     </div>
 </div>

flaskbb/templates/user/settings_layout.html

@@ -2,12 +2,12 @@
 {% set page_title = _("Settings - %(user)s - User", user=current_user.username) %}
 
 {% block content %}
-{%- from theme('macros.html') import navlink with context -%}
+{%- from theme("_macros/navigation.html") import navlink with context -%}
 
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ current_user.url }}">{{ current_user.username }}</a></li>
-    <li class="active">{% trans %}Settings{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ current_user.url }}">{{ current_user.username }}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Settings{% endtrans %}</li>
 </ol>
 
 <div class="row">

flaskbb/themes/aurora/src/scss/_navigation.scss

@@ -9,6 +9,7 @@
     }
 }
 
+
 /* Sidebar Nav */
 .sidebar {
     padding-top: 1em;
@@ -17,14 +18,17 @@
     background-color: $navigation-bg;
     border: 1px solid $border-color;
 
-    .sidenav-header {
+    .sidenav {
         display: block;
+    }
+
+    .sidenav-header {
         padding-left: 1.25em;
         padding-bottom: 1em;
         font-size: 12px;
         font-weight: bold;
         line-height: 20px;
-        color: $navigation-color;
+        color: $black;
         text-transform: uppercase;
     }
 
@@ -34,19 +38,19 @@
         text-align: center;
     }
 
-    .nav > li > a {
+    .nav-item > a {
         display: block;
     }
 
-    .nav > li > a:hover,
-    .nav > li > a:focus {
+    .nav-item > a:hover,
+    .nav-item > a:focus {
         text-decoration: none;
         background-color: $navigation-hover-color;
     }
 
-    .nav > .active > a,
-    .nav > .active:hover > a,
-    .nav > .active:focus > a {
+    .nav-item > .active ,
+    .nav-item > .active:hover,
+    .nav-item > .active:focus {
         font-weight: normal;
         color: $navigation-color;
         background-color: $navigation-hover-color;
@@ -87,50 +91,3 @@
         background-color: $navigation-bg;
     }
 }
-
-
-/* Panel tabs */
-.panel {
-    &.panel-tabs {
-        > .panel-heading {
-            padding: 0;
-            font-weight: 500;
-        }
-        .nav-tabs {
-            border-bottom: none;
-        }
-        .nav-justified {
-            //padding-bottom: 1px;
-            margin-bottom: -1px;
-        }
-    }
-}
-
-.panel-tabs {
-    .nav-tabs {
-        &.nav-justified > li > a {
-        }
-        // non-active and hover
-        > li {
-            a {
-                color: $header-subtitle-color;
-                border: 1px solid $blue;
-
-                // different background color when hovering
-                &:hover, &:focus {
-                    background-color: $fresh-blue;
-                    border: 1px solid $fresh-blue;
-                }
-            }
-        }
-        // active and hover
-        > li.active {
-            a, a:hover, a:focus {
-                color: $header-title-color;
-                background-color: $fresh-blue;
-                border: 1px solid $fresh-blue;
-            }
-        }
-    }
-}
-

flaskbb/themes/aurora/src/scss/_profile.scss

@@ -40,8 +40,7 @@
 
 .profile-content {
     background-color: #fff;
-    border-left: 1px solid $border-color;
-    min-height: 32.25em;
+    min-height: 100%;
 
     .topic-head {
         font-weight: normal;
@@ -71,20 +70,7 @@
     text-shadow: 0 1px 0 #fff;
 }
 
-.profile-groupname,
-.profile-online,
-.profile-location,
-.profile-posts,
-.profile-date,
-.profile-buttons {
-    text-align: center;
-    margin-top: 0.2em;
-}
-
-
 .profile-groupname {
-    text-align: center;
-    margin-top: 0.75em;
     color: $fresh-blue;
     font-size: 1.2em;
     font-weight: 600;