Fix all template errors and further work

flaskbb/templates/_macros/form.html

@@ -107,7 +107,10 @@
 
 
 {%- macro render_field(field, div_class='mb-3 col-12') -%}
+{% if div_class %}
 <div class="{{ div_class }}">
+{% endif %}
+
     {{ field_label(field) }}
 
     {% if field.type == "BooleanField" %}
@@ -119,7 +122,10 @@
     {% else %}
         {{ render_input_field(field, **kwargs) }}
     {% endif %}
+
+{% if div_class %}
 </div>
+{% endif %}
 {%- endmacro -%}
 
 

flaskbb/templates/management/banned_users.html

@@ -2,18 +2,19 @@
 {% set active = "management.users" %}
 
 {% extends theme("management/management_layout.html") %}
+{%- from theme("_macros/pagination.html") import render_pagination %}
+{%- from theme("_macros/navigation.html") import navlink with context %}
+{%- from theme("_macros/form.html") import render_input_field %}
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{% trans %}Manage Users{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Manage Users{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme('macros.html') import render_pagination, group_field, navlink with context %}
-
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
         <ul class="nav">
@@ -28,8 +29,8 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
 
             <span class="fa fa-user-times"></span> {% trans %}Banned Users{% endtrans %}
 
@@ -42,13 +43,13 @@
             </div>
 
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
 
             <div class="settings-search">
                 <form class="search-form" role="form" method="post">
                     {{ search_form.hidden_tag() }}
                     <div class="input-group">
-                        {{ group_field(search_form.search_query, css_class="form-control") }}
+                        {{ render_input_field(search_form.search_query) }}
                         <span class="input-group-btn">
                             <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
                         </span>
@@ -107,12 +108,11 @@
 
             </div> <!-- end settings content -->
         </div>
-        <div class="panel-footer settings-footer">
+        <div class="card-footer settings-footer">
             {{ render_pagination(users, url_for('management.banned_users')) }}
         </div>
     </div>
 </div>
-{% include theme('confirm_dialog.html') %}
 {% endblock %}
 
 {% block scripts %}

flaskbb/templates/management/category_form.html

@@ -5,14 +5,15 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{{ title }}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{{ title }}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme("macros.html") import render_field, render_submit_field, navlink with context %}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import render_field -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -25,23 +26,22 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-comments-o"></span> {{ title }}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
-                <form class="form-horizontal settings-form" role="form" method="post">
+                <form class="settings-form" role="form" method="post">
                     <div class="col-md-12 col-sm-12 col-xs-12">
                         {{ form.hidden_tag() }}
                         {{ render_field(form.title) }}
                         {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
 
                         {{ render_field(form.position) }}
-                        {{ render_submit_field(form.submit, div_class="form-group col-sm-5") }}
+                        {{ render_field(form.submit) }}
                     </div>
 
-                    {% include theme('editor_help.html') %}
                 </form>
             </div>
         </div>

flaskbb/templates/management/forum_form.html

@@ -5,14 +5,16 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{{ title }}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{{ title }}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme("macros.html") import render_field, render_submit_field, render_boolean_field, render_select_field, navlink with context %}
+{%- from theme('_macros/pagination.html') import render_pagination -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import render_field -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -25,13 +27,13 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-comment-o"></span> {{ title }}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
-                <form class="form-horizontal settings-form" role="form" method="post">
+                <form class="settings-form" role="form" method="post">
                     <div class="col-md-12 col-sm-12 col-xs-12">
                         {{ form.hidden_tag() }}
                         {{ render_field(form.title) }}
@@ -40,13 +42,11 @@
                         {{ render_field(form.position) }}
                         {{ render_field(form.external) }}
                         {{ render_field(form.moderators) }}
-                        {{ render_boolean_field(form.show_moderators) }}
-                        {{ render_boolean_field(form.locked) }}
-                        {{ render_select_field(form.groups) }}
-                        {{ render_submit_field(form.submit, div_class="form-group col-sm-5") }}
+                        {{ render_field(form.show_moderators) }}
+                        {{ render_field(form.locked) }}
+                        {{ render_field(form.groups) }}
+                        {{ render_field(form.submit) }}
                     </div>
-
-                    {% include theme('editor_help.html') %}
                 </form>
             </div>
         </div>

flaskbb/templates/management/forums.html

@@ -4,14 +4,15 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{% trans %}Forums{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Forums{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme('macros.html') import render_pagination, navlink with context %}
+{%- from theme('_macros/pagination.html') import render_pagination -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -24,15 +25,15 @@
 </div>
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-comments"></span> {% trans %}Manage Forums{% endtrans %}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
                 {% for category in categories %}
-                <div class="panel category-panel">
-                    <div class="panel-heading category-head">
+                <div class="card category">
+                    <div class="card-header category-header">
                         <div class="row">
                             <div class="col-md-12">
                                 <div class="pull-left">
@@ -56,7 +57,7 @@
                         </div>
                     </div>
 
-                    <div class="panel-body category-body">
+                    <div class="card-body category-body">
                         <div class="category-meta">
                             <div class="col-md-5 col-sm-5 col-xs-8 forum-name">{% trans %}Forum{% endtrans %}</div>
                             <div class="col-md-2 col-sm-2 hidden-xs forum-stats">{% trans %}Topics / Posts{% endtrans %}</div>
@@ -175,5 +176,5 @@
         </div>
     </div>
 </div>
-{% include theme('confirm_dialog.html') %}
+{% include theme('_partials/confirm_dialog.html') %}
 {% endblock %}

flaskbb/templates/management/group_form.html

@@ -5,14 +5,16 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{% trans %}Manage Groups{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Manage Groups{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme("macros.html") import render_field, render_boolean_field, render_submit_field, navlink with context %}
+{%- from theme('_macros/pagination.html') import render_pagination -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import render_field -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -24,41 +26,39 @@
 </div>
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-user-plus"></span> {{ title }}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
-                <form class="form-horizontal settings-form" role="form" method="post">
-                    <div class="col-md-12 col-sm-12 col-xs-12">
+                <form class="settings-form" role="form" method="post">
+                    <div class="col-12">
                         {{ form.hidden_tag() }}
                         {{ render_field(form.name) }}
 
                         {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
-                        {{ render_boolean_field(form.admin) }}
-                        {{ render_boolean_field(form.super_mod) }}
+                        {{ render_field(form.admin) }}
+                        {{ render_field(form.super_mod) }}
 
-                        {{ render_boolean_field(form.mod) }}
-                        {{ render_boolean_field(form.banned) }}
-                        {{ render_boolean_field(form.guest) }}
+                        {{ render_field(form.mod) }}
+                        {{ render_field(form.banned) }}
+                        {{ render_field(form.guest) }}
 
-                        {{ render_boolean_field(form.mod_edituser) }}
-                        {{ render_boolean_field(form.mod_banuser) }}
+                        {{ render_field(form.mod_edituser) }}
+                        {{ render_field(form.mod_banuser) }}
 
-                        {{ render_boolean_field(form.editpost) }}
-                        {{ render_boolean_field(form.deletepost) }}
-                        {{ render_boolean_field(form.deletetopic) }}
-                        {{ render_boolean_field(form.posttopic) }}
-                        {{ render_boolean_field(form.postreply) }}
-                        {{ render_boolean_field(form.makehidden) }}
-                        {{ render_boolean_field(form.viewhidden) }}
+                        {{ render_field(form.editpost) }}
+                        {{ render_field(form.deletepost) }}
+                        {{ render_field(form.deletetopic) }}
+                        {{ render_field(form.posttopic) }}
+                        {{ render_field(form.postreply) }}
+                        {{ render_field(form.makehidden) }}
+                        {{ render_field(form.viewhidden) }}
 
-
-                        {{ render_submit_field(form.submit, div_class="form-group col-sm-5") }}
+                        {{ render_field(form.submit) }}
                     </div>
 
-                    {% include theme('editor_help.html') %}
                 </form>
             </div>
         </div>

flaskbb/templates/management/groups.html

@@ -4,14 +4,15 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{% trans %}Manage Groups{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Manage Groups{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme('macros.html') import render_pagination, navlink with context %}
+{%- from theme('_macros/pagination.html') import render_pagination -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -23,11 +24,11 @@
 </div>
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-users"></span> {% trans %}Groups{% endtrans %}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
                 <div class="settings-meta row">
                     <div class="col-md-1 col-sm-1 col-xs-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
@@ -76,12 +77,12 @@
             {% endfor %}
             </div>
         </div>
-        <div class="panel-footer settings-footer">
+        <div class="card-footer settings-footer">
             {{ render_pagination(groups, url_for('management.groups')) }}
         </div>
     </div>
 </div>
-{% include theme('confirm_dialog.html') %}
+{% include theme('_partials/confirm_dialog.html') %}
 {% endblock %}
 
 {% block scripts %}

flaskbb/templates/management/management_layout.html

@@ -1,21 +1,23 @@
 {% extends theme("layout.html") %}
 
 {% block content %}
-{%- from theme('macros.html') import navlink with context -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
 
 {% block breadcrumb %}
 {% endblock %}
 
-<div class="panel panel-tabs management-panel">
-    <div class="panel-heading management-head">
+<div class="card card-tabs management">
+    <div class="card-header management-header">
         <ul class="nav nav-tabs nav-justified">
         {% for view, text, icon in run_hook('flaskbb_tpl_admin_settings_menu', user=current_user, is_markup=False) %}
             {{ navlink(view, _(text), icon, active) }}
         {% endfor %}
         </ul>
     </div>
-    <div class="panel-body management-body">
+    <div class="card-body management-body">
+        <div class="row g-0">
         {% block management_content %}{% endblock %}
+        </div>
     </div>
 </div>
 {% endblock %}

flaskbb/templates/management/overview.html

@@ -4,18 +4,18 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li class="active">{% trans %}Management{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Management{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
 <div class="col-md-12 settings-col">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-tasks"></span> {% trans %}Overview{% endtrans %}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
                 <div class="stats">
                     <div class="row stats-row">
@@ -72,55 +72,50 @@
                     </div>
                     <div class="row stats-row">
 
-                        <div class="col-md-4 col-sm-4 col-xs-4">
+                        <div class="col-4">
                             <div class="row stats-heading">{% trans %}Statistics{% endtrans %}</div>
 
-                            <div class="row stats-item">
-                                <div class="key pull-left">{% trans %}Registered users{% endtrans %}</div><div class="value pull-right">{{ all_users }}</div>
+                            <div class="row">
+                                <div class="col key text-start">{% trans %}Registered users{% endtrans %}</div><div class="col text-end">{{ all_users }}</div>
                             </div>
-                            <div class="row stats-item">
-                                <div class="key pull-left">{% trans %}Online users{% endtrans %}</div><div class="value pull-right">{{ online_users }}</div>
+                            <div class="row">
+                                <div class="col">{% trans %}Online users{% endtrans %}</div><div class="col text-end">{{ online_users }}</div>
                             </div>
-                            <div class="row stats-item">
-                                <div class="key pull-left">{% trans %}Banned users{% endtrans %}</div><div class="value pull-right">{{ banned_users }}</div>
+                            <div class="row">
+                                <div class="col">{% trans %}Banned users{% endtrans %}</div><div class="col text-end">{{ banned_users }}</div>
                             </div>
-                            <div class="row stats-item">
-                                <div class="key pull-left">{% trans %}Groups{% endtrans %}</div><div class="value pull-right">{{ all_groups }}</div>
+                            <div class="row">
+                                <div class="col">{% trans %}Groups{% endtrans %}</div><div class="col text-end">{{ all_groups }}</div>
                             </div>
-                            <div class="row stats-item">
-                                <div class="key pull-left">{% trans %}Topics{% endtrans %}</div><div class="value pull-right">{{ topic_count }}</div>
+                            <div class="row">
+                                <div class="col">{% trans %}Topics{% endtrans %}</div><div class="col text-end">{{ topic_count }}</div>
                             </div>
-                            <div class="row stats-item">
-                                <div class="key pull-left">{% trans %}Posts{% endtrans %}</div><div class="value pull-right">{{ post_count }}</div>
+                            <div class="row">
+                                <div class="col">{% trans %}Posts{% endtrans %}</div><div class="col text-end">{{ post_count }}</div>
                             </div>
-                            <div class="row stats-item">
-                                <div class="key pull-left">{% trans %}Reports{% endtrans %}</div><div class="value pull-right">{{ report_count }}</div>
+                            <div class="row">
+                                <div class="col">{% trans %}Reports{% endtrans %}</div><div class="col text-end">{{ report_count }}</div>
                             </div>
                         </div>
 
                         <div class="col-md-4 col-sm-4 col-xs-4">
                             <div class="row stats-heading">{% trans %}Components{% endtrans %}</div>
 
-                            <div class="row stats-item">
-                                <div class="key pull-left">FlaskBB</div><div class="value pull-right">{{ flaskbb_version }}</div>
-                            </div>
-                            <!--  TODO: Implement a API. one day..
-                            <div class="row stats-item">
-                                <div class="key pull-left">FlaskBB API</div><div class="value pull-right">v1</div>
+                            <div class="row">
+                                <div class="col">FlaskBB</div><div class="col text-end">{{ flaskbb_version }}</div>
                             </div>
-                            -->
-                            <div class="row stats-item">
-                                <div class="key pull-left">Celery</div>
-                                <div class="value pull-right">
+                            <div class="row">
+                                <div class="col">Celery</div>
+                                <div class="col text-end">
                                     <span id="celery-status" class="text-warning">{% trans %}checking status{% endtrans %}</span>
                                     {{ celery_version }}
                                 </div>
                             </div>
-                            <div class="row stats-item">
-                                <div class="key pull-left">Flask</div><div class="value pull-right">{{ flask_version }}</div>
+                            <div class="row">
+                                <div class="col">Flask</div><div class="col text-end">{{ flask_version }}</div>
                             </div>
-                            <div class="row stats-item">
-                                <div class="key pull-left">Python</div><div class="value pull-right">{{ python_version }}</div>
+                            <div class="row">
+                                <div class="col">Python</div><div class="col text-end">{{ python_version }}</div>
                             </div>
                         </div>
 
@@ -128,15 +123,15 @@
                             <div class="row stats-heading">{% trans %}Plugins{% endtrans %}</div>
 
                             {% for plugin in plugins %}
-                            <div class="row stats-item">
-                                <div class="key pull-left">
+                            <div class="row">
+                                <div class="col">
                                 {% if plugin.installed %}
                                     <a href="{{ url_for('management.settings', plugin=plugin.name) }}">{{ plugin.name.title() }}</a>
                                 {% else %}
                                     <a href="{{ url_for('management.plugins') }}">{{ plugin.name.title() }}</a>
                                 {% endif %}
                                 </div>
-                                <div class="value pull-right">
+                                <div class="col text-end">
                                     {% if not plugin.enabled %}
                                         <span class="text-danger">{% trans %}not enabled{% endtrans %}</span>
                                     {% elif plugin.enabled %}

flaskbb/templates/management/plugins.html

@@ -4,21 +4,21 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{% trans %}Plugins{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Plugins{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme('macros.html') import render_pagination %}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
 
 <div class="col-md-12 settings-col">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-puzzle-piece"></span> {% trans %}Manage Plugins{% endtrans %}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
                 <div class="settings-meta">
                     <div class="row settings-row">
@@ -82,13 +82,5 @@
         </div>
     </div>
 </div>
-{% include theme('confirm_dialog.html') %}
-{% endblock %}
-
-{% block scripts %}
-    <script>
-    $(function () {
-        $('[data-toggle="tooltip"]').tooltip()
-    })
-    </script>
+{% include theme('_partials/confirm_dialog.html') %}
 {% endblock %}

flaskbb/templates/management/reports.html

@@ -5,32 +5,31 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{% trans %}Reports{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Reports{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme('macros.html') import render_pagination, navlink with context %}
+{%- from theme('_macros/pagination.html') import render_pagination -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
 
 
-<div class="col-md-3 settings-col">
-    <div class="nav-sidebar">
-        <ul class="nav">
-            {{ navlink('management.reports', _("Show all Reports")) }}
-            {{ navlink('management.unread_reports', _("Show unread Reports")) }}
-        </ul>
-    </div>
+<div class="col-3 settings-col">
+    <ul class="nav nav-sidebar">
+        {{ navlink('management.reports', _("Show all Reports")) }}
+        {{ navlink('management.unread_reports', _("Show unread Reports")) }}
+    </ul>
 </div>
 
 
-<div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+<div class="col-9 settings-col with-left-border">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-flag"></span> {% trans %}Reports{% endtrans %}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
                 <div class="settings-meta row">
                     <div class="col-md-1 col-sm-1 col-xs-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
@@ -91,13 +90,13 @@
                 </div>
             {% endfor %}
             </div>
-            <div class="panel-footer settings-footer">
+            <div class="card-footer settings-footer">
                 {{ render_pagination(reports, url_for(request.endpoint)) }}
             </div>
         </div>
     </div>
 </div>
-{% include theme('confirm_dialog.html') %}
+{% include theme('_partials/confirm_dialog.html') %}
 {% endblock %}
 
 {% block scripts %}

flaskbb/templates/management/settings.html

@@ -4,32 +4,38 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{{ active_nav.get('title') }}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{{ active_nav.get('title') }}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme('macros.html') import render_boolean_field, render_select_field, render_field, sidebaritems %}
+{%- from theme('_macros/navigation.html') import sidebaritems -%}
+{%- from theme('_macros/form.html') import render_field -%}
+
 {% set extra_setting_links = run_hook("flaskbb_tpl_admin_settings_sidebar", user=current_user, is_markup=False) %}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
         <ul class="nav">
-        <li class="nav-header">FlaskBB Settings</li>
+            <li class="nav-item nav-header">FlaskBB Settings</li>
         {% for group in all_groups %}
             {% if group.key == active_nav.get('key') %}
-                <li class="active"><a href="{{ url_for('management.settings', slug=group.key) }}">{{ group.name }}</a></li>
+                <li class="nav-item">
+                    <a class="nav-link active" href="{{ url_for('management.settings', slug=group.key) }}">{{ group.name }}</a>
+                </li>
             {% else %}
-                <li><a href="{{ url_for('management.settings', slug=group.key) }}">{{ group.name }}</a></li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('management.settings', slug=group.key) }}">{{ group.name }}</a>
+                </li>
             {% endif %}
         {% endfor %}
         {% if all_plugins or extra_setting_links|length %}
-        <li class="nav-header">Plugin Settings</li>
+            <li class="nav-item nav-header">Plugin Settings</li>
         {% for plugin in all_plugins %}
-            <li {% if plugin.name == active_nav.get('key') %}class="active"{% endif %}>
-                <a href="{{ url_for('management.settings', plugin=plugin.name) }}">{{ plugin.name.title() }}</a>
+            <li class="nav-item">
+                <a class="nav-link {% if plugin.name == active_nav.get('key') %}active{% endif %}" href="{{ url_for('management.settings', plugin=plugin.name) }}">{{ plugin.name.title() }}</a>
             </li>
         {% endfor %}
 
@@ -40,42 +46,28 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-cogs"></span> {{ active_nav.get('title') }}
         </div>
-        <div class="panel-body settings-body">
-            <div class="settings-content">
-                <form class="form-horizontal settings-form" role="form" method="post">
-                    <div class="col-md-12 col-sm-12 col-xs-12">
-
-                        {{ form.hidden_tag() }}
-                        {% for field in form %}
-                            {% if field.type not in ["TextField", "IntegerField"] %}
-                                {% if field.type == "BooleanField" %}
-                                    {{ render_boolean_field(field) }}
-                                {% endif %}
-
-                                {% if field.type in ["SelectField", "SelectMultipleField"] %}
-                                    {{ render_select_field(field) }}
-                                {% endif %}
-                            {% else %}
-                                {{ render_field(field) }}
-                            {% endif %}
-                        {% endfor %}
-
-                        <div class="form-group">
-                            <div class="col-sm-5">
-                                <button type="submit" class="btn btn-success">
-                                    {% trans %}Save{% endtrans %}
-                                </button>
-                            </div>
-                        </div>
+        <div class="card-body settings-body">
+            <form class="row p-2" role="form" method="post">
+                {{ form.hidden_tag() }}
+                {% for field in form %}
+                    {% if field.type != "CSRFTokenField" %}
+                        {{ render_field(field, div_class="col-12 mb-3") }}
+                    {% endif %}
+                {% endfor %}
 
-                    </div> <!-- end col-md-12...-->
-                </form>
+                <div class="form-group">
+                    <div class="col-sm-5">
+                        <button type="submit" class="btn btn-success">
+                            {% trans %}Save{% endtrans %}
+                        </button>
+                    </div>
+                </div>
 
-            </div>
+            </form>
         </div> <!-- end settings-body -->
     </div>
 </div>

flaskbb/templates/management/user_form.html

@@ -5,14 +5,17 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{% trans %}Manage Users{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Manage Users{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme("macros.html") import horizontal_field, horizontal_select_field, navlink with context %}
+{%- from theme('_macros/pagination.html') import render_pagination -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import horizontal_field -%}
+
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -28,18 +31,21 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
+    <div class="card settings">
+        <div class="card-header settings-header">
             <span class="fa fa-user-plus"></span> {{ title }}
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
             <div class="settings-content">
                 <form class="form-horizontal settings-form" role="form" method="post">
                     {{ form.hidden_tag() }}
+
+                    {{ run_hook('flaskbb_tpl_form_user_details_before', form=form) }}
+
                     {{ horizontal_field(form.username) }}
                     {{ horizontal_field(form.email) }}
                     {{ horizontal_field(form.password) }}
-                    {{ horizontal_select_field(form.birthday, 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) }}
@@ -50,9 +56,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") }}
 
-                    {{ horizontal_field(form.submit) }}
+                    {{ run_hook('flaskbb_tpl_form_user_details_after', form=form) }}
 
-                    {% include theme('editor_help.html') %}
+                    {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}
                 </form>
             </div>
         </div>

flaskbb/templates/management/users.html

@@ -4,14 +4,16 @@
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
-    <li class="active">{% trans %}Manage Users{% endtrans %}</li>
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Manage Users{% endtrans %}</li>
 </ol>
 {% endblock %}
 
 {% block management_content %}
-{% from theme('macros.html') import render_pagination, group_field, navlink with context %}
+{%- from theme('_macros/pagination.html') import render_pagination -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import render_input_field -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -27,128 +29,128 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col with-left-border">
-    <div class="panel settings-panel">
-        <div class="panel-heading settings-head">
-
-            <span class="fa fa-user"></span> {% trans %}Users{% endtrans %}
-
-            <div class="pull-right action-buttons">
-                <div class="btn-group pull-right">
-                    <button type="button" class="btn btn-default btn-xs" onclick="return window.app.show_management_search()">
-                        <span class="fa fa-search"></span> {% trans %}Search{% endtrans %}
+    <div class="card settings">
+        <div class="card-header settings-header">
+            <div class="row">
+                <div class="col-auto me-auto">
+                    <span class="far fa-user"></span> {% trans %}Users{% endtrans %}
+                </div>
+                <div class="col-auto">
+                    <button type="button" class="btn btn-white btn-xs" onclick="return window.app.show_management_search()">
+                        <span class="fas fa-search"></span> {% trans %}Search{% endtrans %}
                     </button>
                 </div>
             </div>
-
         </div>
-        <div class="panel-body settings-body">
+        <div class="card-body settings-body">
 
             <div class="settings-search">
                 <form class="search-form" role="form" method="post">
                     {{ search_form.hidden_tag() }}
                     <div class="input-group">
-                        {{ group_field(search_form.search_query, css_class="form-control") }}
-                        <span class="input-group-btn">
-                            <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
-                        </span>
+                        {{ render_input_field(search_form.search_query, class="form-control") }}
+                        <button class="btn btn-white" type="button"><span class="fas fa-search"></span></button>
                     </div>
                 </form>
             </div>
 
             <div class="settings-content">
                 <div class="settings-meta row">
-                    <div class="col-md-1 col-sm-1 col-xs-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
-                    <div class="col-md-2 col-sm-2 col-xs-3 meta-item">{% trans %}Username{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-3 meta-item">{% trans %}Posts{% endtrans %}</div>
-                    <div class="col-md-3 col-sm-3 hidden-xs meta-item">{% trans %}Date registered{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-3 meta-item">{% trans %}Group{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-2">
-                        <div class="btn-group">
-                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-                                <span class="fa fa-fw fa-cog"></span> {% trans %}Actions{% endtrans %}
-                            </button>
-                            <ul class="dropdown-menu slidedown">
-                                <li>
-                                    <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.ban_user') }}')">
-                                        <span class="fa fa-fw fa-flag text-warning"></span> {% trans %}Ban selected Users{% endtrans %}
-                                    </button>
-                                </li>
-
-                                <li>
-                                    <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}')">
-                                        <span class="fa fa-fw fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
-                                    </button>
-                                </li>
-
-                                <li>
-                                    <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.delete_user') }}')">
-                                        <span class="fa fa-fw fa-trash text-danger"></span> {% trans %}Delete selected Users{% endtrans %}
-                                    </button>
-                                </li>
-                            </ul>
-                        </div>
+                    <div class="col-md-1 col-sm-1 col-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
+                    <div class="col-md-2 col-sm-2 col-3 meta-item">{% trans %}Username{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-3 meta-item">{% trans %}Posts{% endtrans %}</div>
+                    <div class="col-md-3 col-sm-3 d-none d-sm-block meta-item">{% trans %}Date registered{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-3 meta-item">{% trans %}Group{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-2">
+
+  <div class="dropdown">
+    <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
+        <span class="fa fa-fw fa-cog"></span> {% trans %}Actions{% endtrans %}
+    </a>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+    <li>
+        <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.ban_user') }}')">
+            <span class="far fa-fw fa-flag text-warning"></span> {% trans %}Ban selected Users{% endtrans %}
+        </button>
+    </li>
+
+    <li>
+        <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}')">
+            <span class="far fa-fw fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
+        </button>
+    </li>
+
+    <li>
+        <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.delete_user') }}')">
+            <span class="far fa-fw fa-trash text-danger"></span> {% trans %}Delete selected Users{% endtrans %}
+        </button>
+    </li>
+    </ul>
+  </div>
+
                     </div>
                 </div>
             {% for user in users.items %}
-                <div class="row settings-row hover clearfix">
-                    <div class="col-md-1 col-sm-1 col-xs-1"><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></div>
-                    <div class="col-md-2 col-sm-2 col-xs-3"><a href="{{ user.url }}">{{ user.username }}</a></div>
-                    <div class="col-md-2 col-sm-2 col-xs-3">{{ user.post_count }}</div>
-                    <div class="col-md-3 col-sm-3 hidden-xs">{{ user.date_joined|format_date }}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-3">{{ user.primary_group.name }}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-2">
+                <div class="row settings-row hover">
+                    <div class="col-md-1 col-sm-1 col-1"><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></div>
+                    <div class="col-md-2 col-sm-2 col-3"><a href="{{ user.url }}">{{ user.username }}</a></div>
+                    <div class="col-md-2 col-sm-2 col-3">{{ user.post_count }}</div>
+                    <div class="col-md-3 col-sm-3 d-none d-sm-block">{{ user.date_joined|format_date }}</div>
+                    <div class="col-md-2 col-sm-2 col-3">{{ user.primary_group.name }}</div>
+                    <div class="col-2">
                     {% if current_user|can_edit_user and not user|is_admin or current_user|is_admin %}
                         <a href="{{ url_for('management.edit_user', user_id = user.id) }}" class="btn btn-icon">
-                            <span class="fa fa-pencil" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
+                            <span class="fa fa-edit text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
                         </a>
                     {% endif %}
 
                     {% if current_user|can_ban_user and not user.permissions['banned'] %}
-                        <form class="inline-form" id="ban-{{user.id}}" method="post" action="{{ url_for('management.ban_user', user_id = user.id) }}">
+                        <form class="d-inline" id="ban-{{user.id}}" method="post" action="{{ url_for('management.ban_user', user_id = user.id) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
                             <button class="btn btn-icon" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Ban{% endtrans %}">
-                                <span class="fa fa-flag text-warning"></span>
+                                <span class="fas fa-flag text-warning"></span>
                             </button>
                         </form>
                     {% endif %}
 
                     {% if current_user|can_ban_user and user.permissions['banned'] %}
-                        <form class="inline-form" id="ban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
+                        <form class="d-inline" id="ban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
                             <button class="btn btn-icon" name="confirmDialog">
-                                <span class="fa fa-flag text-success" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}"></span>
+                                <span class="fas fa-flag text-success" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}"></span>
                             </button>
                         </form>
                     {% endif %}
 
                     {% if current_user|is_admin %}
-                        <form class="inline-form" id="delete-{{user.id}}" method="post" action="{{ url_for('management.delete_user', user_id = user.id) }}">
+                        <form class="d-inline" id="delete-{{user.id}}" method="post" action="{{ url_for('management.delete_user', user_id = user.id) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
                             <button class="btn btn-icon" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}">
-                                <span class="fa fa-trash text-danger"></span>
+                                <span class="far fa-trash-alt text-danger"></span>
                             </button>
                         </form>
                     {% endif %}
                     </div>
                 </div>
             {% else %}
-                <div class="row settings-row clearfix">
-                    <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No users found matching your search criteria.{% endtrans %}</div>
+                <div class="row settings-row">
+                    <div class="col-12">{% trans %}No users found matching your search criteria.{% endtrans %}</div>
                 </div>
             {% endfor %}
 
             </div> <!-- end settings content -->
         </div>
 
-        <div class="panel-footer settings-footer">
+        <div class="card-footer settings-footer p-2">
             {{ render_pagination(users, url_for('management.users')) }}
         </div>
     </div>
 </div>
-{% include theme('confirm_dialog.html') %}
+{% include theme('_partials/confirm_dialog.html') %}
 {% endblock %}
 
 {% block scripts %}

flaskbb/themes/aurora/src/scss/_button.scss

@@ -19,3 +19,17 @@
         $hover-color: #333
     );
 }
+
+.btn-xs {
+    $btn-xs-py: 1px;
+    $btn-xs-px: 5px;
+    $btn-xs-font-size: 11px;
+    //$border-radius: 3px;
+
+    @include button-size(
+        $btn-xs-py,
+        $btn-xs-px,
+        $btn-xs-font-size,
+        $border-radius
+    );
+}

flaskbb/themes/aurora/src/scss/_management.scss

@@ -10,6 +10,7 @@
     .management-header {
         background-color: $blue;
     }
+
     .management-body {
         padding: 0;
     }
@@ -25,9 +26,6 @@
     }
     .settings-body {
         padding: 0;
-        .settings-form {
-            padding-top: 10px;
-        }
     }
 
     .settings-meta {
@@ -39,7 +37,7 @@
             font-weight: bold;
         }
     }
-    .settings-content > .category-panel {
+    .settings-content > .category {
         border-left: none;
         border-right: none;
         border-bottom: none;
@@ -91,6 +89,7 @@
 .stats {
     margin-top: 15px;
     margin-bottom: 15px;
+
     .stats-widget {
         text-align: center;
         padding-top: 20px;

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

@@ -9,7 +9,6 @@
     }
 }
 
-
 /* Sidebar Nav */
 .sidebar {
     padding-top: 1em;
@@ -48,7 +47,7 @@
         background-color: $navigation-hover-color;
     }
 
-    .nav-item > .active ,
+    .nav-item > .active,
     .nav-item > .active:hover,
     .nav-item > .active:focus {
         font-weight: normal;
@@ -61,11 +60,7 @@
     width: 100%;
     padding: 0;
 
-    a {
-        color: $navigation-color;
-    }
-
-    li.nav-header {
+    .nav-header {
         position: relative;
         display: block;
         padding: 10px 7.5px;
@@ -73,21 +68,63 @@
         font-weight: bold;
         text-transform: uppercase;
     }
+    .nav-item {
+        width: 100%;
+    }
 
-    .active a {
-        cursor: default;
-        background-color: $navigation-bg;
+    .nav-link {
         color: $navigation-color;
-    }
 
-    li.active {
-        border-top: 1px solid $border-color;
-        border-bottom: 1px solid $border-color;
-        &:first-child {
-            border-top: none;
+        &:hover {
+            background-color: $navigation-bg;
         }
+
+        &.active {
+            border-top: 1px solid $border-color;
+            border-bottom: 1px solid $border-color;
+
+            cursor: default;
+            background-color: $navigation-bg;
+        }
+    }
+
+    .nav-item:first-child > .nav-link:first-child.active {
+        border-top: none;
     }
-    .active a:hover {
-        background-color: $navigation-bg;
+}
+
+.card-tabs {
+    > .card-header {
+        padding: 0;
+        font-weight: 500;
+    }
+    > .card-header > .nav-tabs {
+        border-bottom: none;
+
+        .nav-link {
+            border-radius: 0;
+            border-color: transparent;
+        }
+
+        .nav-link.active,
+        .nav-item.show .nav-link {
+            background-color: $fresh-blue;
+        }
+
+        // non-active and hover
+        .nav-item {
+            .nav-link {
+                color: $header-subtitle-color;
+                border: 1px solid $blue;
+
+                // different background color when hovering
+                &.active,
+                &:hover,
+                &:focus {
+                    background-color: $fresh-blue;
+                    border: 1px solid $fresh-blue;
+                }
+            }
+        }
     }
 }

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

@@ -1,39 +1,3 @@
-.profile-sidebar {
-    padding: 7px 0;
-
-    ul li {
-        &:last-child {
-            border-bottom: none;
-        }
-
-        a {
-            color: $navigation-color;
-            font-size: 14px;
-            font-weight: 400;
-            border-left: 2px solid transparent;
-
-            &:hover, &:visited {
-                background-color: $author-box-bg;
-                border-right: 2px solid $fresh-blue;
-                border-left: 2px solid $fresh-blue;
-            }
-
-            i {
-                margin-right: 8px;
-                font-size: 14px;
-            }
-        }
-
-        &.active {
-            a {
-                background-color: $author-box-bg;
-                border-right: 2px solid $fresh-blue;
-                border-left: 2px solid $fresh-blue;
-            }
-        }
-    }
-}
-
 .page-body.profile-body {
     background-color: $author-box-bg;
 }