Almost done redoing the management panel.

flaskbb/themes/aurora/src/flaskbb.scss

@@ -3,6 +3,7 @@ $blue: #337ab7;
 $fresh-blue: #0088cc;
 $light-blue: #5bc0de;
 $green: #5cb85c;
+$dark-green: #3C763D;
 $orange: #f0ad4e;
 $red: #d9534f;
 $gray: #555;
@@ -601,7 +602,10 @@ body {
             border-bottom: 0;
             border-radius: 0;
             margin-bottom: 0;
-            border-left: 1px solid $border-color;
+
+            &.with-left-border {
+                border-left: 1px solid $border-color;
+            }
 
             .settings-head {
                 border-radius: 0;
@@ -609,10 +613,30 @@ body {
                 border-bottom: 1px solid $border-color;
             }
             .settings-body {
-                padding: 0px;
-                padding-top: 10px;
-                .settings-search {
-                    margin-top: -10px;
+                padding: 0;
+                .settings-form {
+                    padding-top: 10px;
+                }
+            }
+
+            .settings-meta {
+                margin: 0;
+                padding: 5px 0 5px 0;
+                border-bottom: 1px solid $border-color;
+                .meta-item {
+                    font-weight: bold;
+                }
+            }
+            .settings-row {
+                padding: 5px 0 5px 0;
+                margin: 0;
+
+                &:last-child {
+                    padding-bottom: 10px;
+                }
+
+                &.hover:hover {
+                    background-color: $panel-hover;
                 }
             }
 
@@ -931,3 +955,127 @@ p.flaskbb-stats {
     width: 20px;
     height: 20px;
 }
+
+.btn.btn-link {
+    margin: 0 5px 0 5px;
+    padding: 0;
+}
+
+
+
+.stats {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    .stats-widget {
+        text-align: center;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        //background-color: $panel-hover;
+        border: 1px solid $border-color;
+
+        .icon {
+            display: block;
+            font-size: 96px;
+            line-height: 96px;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        var {
+            display: block;
+            height: 64px;
+            font-size: 64px;
+            line-height: 64px;
+            font-style: normal;
+        }
+        label {
+            font-size: 17px;
+        }
+        .options {
+            margin-top: 10px;
+        }
+    }
+
+    .stats-heading {
+        font-size: 1.25em;
+        font-weight: bold;
+        margin: 0;
+        border-bottom: 1px solid $border-color;
+    }
+
+    .stats-row {
+        margin: 0 0 15px 0;
+        padding-bottom: 15px;
+        //border-bottom: 1px solid $border-color;
+
+        .stats-item {
+            margin: 0;
+            padding-top: 5px;
+        }
+
+        &:last-child {
+            border: none;
+        }
+    }
+}
+
+.alert-message {
+    margin: 0;
+    padding: 20px;
+    border-radius: 5px;
+    border: 1px solid $dark-green;
+    border-left: 3px solid #eee;
+    h4 {
+        margin-top: 0;
+        margin-bottom: 5px;
+    }
+    p:last-child {
+        margin-bottom: 0;
+    }
+    code {
+        background-color: #fff;
+        border-radius: 3px;
+    }
+
+    &.alert-message-success {
+        background-color: #F4FDF0;
+        border-color: $dark-green;
+    }
+    &.alert-message-success h4 {
+        color: $dark-green;
+    }
+    &.alert-message-danger {
+        background-color: #fdf7f7;
+        border-color: $red;
+    }
+    &.alert-message-danger h4 {
+        color: $red;
+    }
+    &.alert-message-warning {
+        background-color: #fcf8f2;
+        border-color: $orange;
+    }
+    &.alert-message-warning h4 {
+        color: $orange;
+    }
+    &.alert-message-info {
+        background-color: #f4f8fa;
+        border-color: $light-blue;
+    }
+    &.alert-message-info h4 {
+        color: $light-blue;
+    }
+    &.alert-message-default {
+        background-color: #EEE;
+        border-color: $gray;
+    }
+    &.alert-message-default h4 {
+        color: #000;
+    }
+    &.alert-message-notice {
+        background-color: #FCFCDD;
+        border-color: #BDBD89;
+    }
+    &.alert-message-notice h4 {
+        color: #444;
+    }
+}

flaskbb/themes/aurora/static/css/flaskbb.css

@@ -338,17 +338,30 @@ body {
     border-top: 0;
     border-bottom: 0;
     border-radius: 0;
-    margin-bottom: 0;
-    border-left: 1px solid #cad7e1; }
+    margin-bottom: 0; }
+    .management-panel .management-body .panel.settings-panel.with-left-border {
+      border-left: 1px solid #cad7e1; }
     .management-panel .management-body .panel.settings-panel .settings-head {
       border-radius: 0;
       background-color: #f8f8f8;
       border-bottom: 1px solid #cad7e1; }
     .management-panel .management-body .panel.settings-panel .settings-body {
-      padding: 0px;
-      padding-top: 10px; }
-      .management-panel .management-body .panel.settings-panel .settings-body .settings-search {
-        margin-top: -10px; }
+      padding: 0; }
+      .management-panel .management-body .panel.settings-panel .settings-body .settings-form {
+        padding-top: 10px; }
+    .management-panel .management-body .panel.settings-panel .settings-meta {
+      margin: 0;
+      padding: 5px 0 5px 0;
+      border-bottom: 1px solid #cad7e1; }
+      .management-panel .management-body .panel.settings-panel .settings-meta .meta-item {
+        font-weight: bold; }
+    .management-panel .management-body .panel.settings-panel .settings-row {
+      padding: 5px 0 5px 0;
+      margin: 0; }
+      .management-panel .management-body .panel.settings-panel .settings-row:last-child {
+        padding-bottom: 10px; }
+      .management-panel .management-body .panel.settings-panel .settings-row.hover:hover {
+        background-color: #f8f8f8; }
     .management-panel .management-body .panel.settings-panel .settings-footer {
       padding-top: 5px;
       padding-left: 5px;
@@ -566,4 +579,91 @@ p.flaskbb-stats {
   width: 20px;
   height: 20px; }
 
+.btn.btn-link {
+  margin: 0 5px 0 5px;
+  padding: 0; }
+
+.stats {
+  margin-top: 15px;
+  margin-bottom: 15px; }
+  .stats .stats-widget {
+    text-align: center;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    border: 1px solid #cad7e1; }
+    .stats .stats-widget .icon {
+      display: block;
+      font-size: 96px;
+      line-height: 96px;
+      margin-bottom: 10px;
+      text-align: center; }
+    .stats .stats-widget var {
+      display: block;
+      height: 64px;
+      font-size: 64px;
+      line-height: 64px;
+      font-style: normal; }
+    .stats .stats-widget label {
+      font-size: 17px; }
+    .stats .stats-widget .options {
+      margin-top: 10px; }
+  .stats .stats-heading {
+    font-size: 1.25em;
+    font-weight: bold;
+    margin: 0;
+    border-bottom: 1px solid #cad7e1; }
+  .stats .stats-row {
+    margin: 0 0 15px 0;
+    padding-bottom: 15px; }
+    .stats .stats-row .stats-item {
+      margin: 0;
+      padding-top: 5px; }
+    .stats .stats-row:last-child {
+      border: none; }
+
+.alert-message {
+  margin: 0;
+  padding: 20px;
+  border-radius: 5px;
+  border: 1px solid #3C763D;
+  border-left: 3px solid #eee; }
+  .alert-message h4 {
+    margin-top: 0;
+    margin-bottom: 5px; }
+  .alert-message p:last-child {
+    margin-bottom: 0; }
+  .alert-message code {
+    background-color: #fff;
+    border-radius: 3px; }
+  .alert-message.alert-message-success {
+    background-color: #F4FDF0;
+    border-color: #3C763D; }
+  .alert-message.alert-message-success h4 {
+    color: #3C763D; }
+  .alert-message.alert-message-danger {
+    background-color: #fdf7f7;
+    border-color: #d9534f; }
+  .alert-message.alert-message-danger h4 {
+    color: #d9534f; }
+  .alert-message.alert-message-warning {
+    background-color: #fcf8f2;
+    border-color: #f0ad4e; }
+  .alert-message.alert-message-warning h4 {
+    color: #f0ad4e; }
+  .alert-message.alert-message-info {
+    background-color: #f4f8fa;
+    border-color: #5bc0de; }
+  .alert-message.alert-message-info h4 {
+    color: #5bc0de; }
+  .alert-message.alert-message-default {
+    background-color: #EEE;
+    border-color: #555; }
+  .alert-message.alert-message-default h4 {
+    color: #000; }
+  .alert-message.alert-message-notice {
+    background-color: #FCFCDD;
+    border-color: #BDBD89; }
+  .alert-message.alert-message-notice h4 {
+    color: #444; }
+
 /*# sourceMappingURL=flaskbb.css.map */

flaskbb/themes/aurora/templates/management/banned_users.html

@@ -28,7 +28,7 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col">
-    <div class="panel settings-panel">
+    <div class="panel settings-panel with-left-border">
         <div class="panel-heading settings-head">
 
             <span class="fa fa-user-times"></span> {% trans %}Banned Users{% endtrans %}
@@ -36,7 +36,7 @@
             <div class="pull-right action-buttons">
                 <div class="btn-group pull-right">
                     <button type="button" class="btn btn-default btn-xs" onclick="return show_management_search()">
-                        <span class="fa fa-search" style="margin-right: 0px;"></span> {% trans %}Search{% endtrans %}
+                        <span class="fa fa-search"></span> {% trans %}Search{% endtrans %}
                     </button>
                 </div>
             </div>
@@ -57,66 +57,58 @@
             </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">
+                    {% if current_user|can_ban_user %}
+                        <div class="btn-group">
+                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+                                <span class="fa fa-cog"></span> {% trans %}Actions{% endtrans %}
+                            </button>
+                            <ul class="dropdown-menu slidedown">
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">
+                                        <span class="fa fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    {% endif %}
+                    </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('%b %d %Y') }}</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">
+                    {% if current_user|can_ban_user and user.permissions['banned'] %}
+                        <form class="inline-form" id="unban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
-                <table class="table table-hover">
-                    <thead>
-                        <tr>
-                            <th><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></th>
-                            <th>#</th>
-                            <th>{% trans %}Username{% endtrans %}</th>
-                            <th>{% trans %}Posts{% endtrans %}</th>
-                            <th>{% trans %}Date registered{% endtrans %}</th>
-                            <th>{% trans %}Group{% endtrans %}</th>
-                            <th>
-                                <div class="btn-group">
-                                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-                                        <span class="fa fa-cog" style="margin-right: 0px;"></span> {% trans %}Actions{% endtrans %}
-                                    </button>
-                                    <ul class="dropdown-menu slidedown">
-                                        <li>
-                                            <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">
-                                                <span class="fa fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    {% for user in users.items %}
-                        <tr class="action-row">
-                            <td><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></td>
-                            <td>{{ user.id }}</td>
-                            <td><a href="{{ url_for('user.profile', username=user.username) }}">{{ user.username }}</a></td>
-                            <td>{{ user.post_count }}</td>
-                            <td>{{ user.date_joined|format_date('%b %d %Y') }}</td>
-                            <td>{{ user.primary_group.name }}</td>
-                            <td>
-                                {% if current_user|can_ban_user and user.permissions['banned'] %}
-                                    <form class="inline-form" id="unban-{{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-link">
+                                <span class="fa fa-flag text-success" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}"></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>
+            {% endfor %}
 
-                                        <button class="btn btn-link">
-                                            <span class="fa fa-flag text-success" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}"></span>
-                                        </button>
-                                    </form>
-                                {% endif %}
-                            </td>
-                        </tr>
-                    {% else %}
-                        <tr>
-                            <td colspan="6">
-                                {% trans %}No users found matching your search criteria.{% endtrans %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-            <div class="panel-footer settings-footer">
-                {{ render_pagination(users, url_for('management.users')) }}
-            </div>
+            </div> <!-- end settings content -->
+        </div>
+        <div class="panel-footer settings-footer">
+            {{ render_pagination(users, url_for('management.users')) }}
         </div>
     </div>
 </div>

flaskbb/themes/aurora/templates/management/category_form.html

@@ -0,0 +1,49 @@
+{% set page_title = title %}
+{% set active_management_forum_nav=True %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% 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>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme("macros.html") import render_field, render_submit_field, navlink with context %}
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.forums', _("Manage Forums")) }}
+            {{ navlink('management.add_forum', _("Add Forum")) }}
+            {{ navlink('management.add_category', _("Add Category")) }}
+        </ul>
+    </div>
+</div><!--/.col-md-3 -->
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel with-left-border">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-comments-o"></span> {{ 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() }}
+                        {{ render_field(form.title) }}
+                        {{ render_field(form.description, rows=5, div_class="col-md-10") }}
+
+                        {{ render_field(form.position) }}
+                        {{ render_submit_field(form.submit, div_class="form-group col-sm-5") }}
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}

flaskbb/themes/aurora/templates/management/forum_form.html

@@ -0,0 +1,53 @@
+{% set page_title = title %}
+{% set active_management_forum_nav=True %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% 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>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme("macros.html") import render_field, render_submit_field, render_boolean_field, render_select_field, navlink with context %}
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.forums', _("Manage Forums")) }}
+            {{ navlink('management.add_forum', _("Add Forum")) }}
+            {{ navlink('management.add_category', _("Add Category")) }}
+        </ul>
+    </div>
+</div><!--/.col-md-3 -->
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel with-left-border">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-comment-o"></span> {{ 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() }}
+                        {{ render_field(form.title) }}
+                        {{ render_field(form.description, rows=5, div_class="col-md-10") }}
+                        {{ render_field(form.category) }}
+                        {{ 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") }}
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

flaskbb/themes/aurora/templates/management/group_form.html

@@ -0,0 +1,63 @@
+{% set page_title = title %}
+{% set active_management_group_nav=True %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% 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>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme("macros.html") import render_field, render_boolean_field, render_submit_field, navlink with context %}
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.groups', _("Manage Groups")) }}
+            {{ navlink('management.add_group', _("Add Group")) }}
+        </ul>
+    </div>
+</div>
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel with-left-border">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-user-plus"></span> {{ 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() }}
+                        {{ render_field(form.name) }}
+
+                        {{ render_field(form.description, rows="4", div_class="col-md-10") }}
+
+                        {{ render_boolean_field(form.admin) }}
+                        {{ render_boolean_field(form.super_mod) }}
+
+                        {{ render_boolean_field(form.mod) }}
+                        {{ render_boolean_field(form.banned) }}
+                        {{ render_boolean_field(form.guest) }}
+
+                        {{ render_boolean_field(form.mod_edituser) }}
+                        {{ render_boolean_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_submit_field(form.submit, div_class="form-group col-sm-5") }}
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

flaskbb/themes/aurora/templates/management/groups.html

@@ -0,0 +1,91 @@
+{% set page_title = _("Groups") %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% 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>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme('macros.html') import render_pagination, navlink with context %}
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.groups', _("Manage Groups")) }}
+            {{ navlink('management.add_group', _("Add Group")) }}
+        </ul>
+    </div>
+</div>
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel with-left-border">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-users"></span> {% trans %}Groups{% endtrans %}
+        </div>
+        <div class="panel-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>
+                    <div class="col-md-4 col-sm-4 col-xs-5 meta-item">{% trans %}Group Name{% endtrans %}</div>
+                    <div class="col-md-5 col-sm-5 hidden-xs meta-item">{% trans %}Description{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-xs-5">
+                        <div class="btn-group">
+                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+                                <span class="fa fa-cog"></span> {% trans %}Actions{% endtrans %}
+                            </button>
+                            <ul class="dropdown-menu slidedown">
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.delete_group') }}', '{% trans %}Are you sure you want to delete these Groups?{% endtrans %}')">
+                                        <span class="fa fa-trash text-danger"></span> {% trans %}Delete selected Groups{% endtrans %}
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+            {% for group in groups.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="{{ group.id }}" title="Select Group"/></div>
+                    <div class="col-md-4 col-sm-4 col-xs-5">{{ group.name }}</div>
+                    <div class="col-md-5 col-sm-5 hidden-xs">{{ group.description }}</div>
+                    <div class="col-md-2 col-sm-2 col-xs-5">
+                        <a href="{{ url_for('management.edit_group', group_id = group.id) }}" class="btn btn-link">
+                            <span class="fa fa-pencil text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
+                        </a>
+                        <form class="inline-form" id="delete-{{group.id}}" method="post" action="{{ url_for('management.delete_group', group_id=group.id) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                            <button class="btn btn-link">
+                                <span class="fa fa-trash text-danger" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}"></span>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            {% else %}
+                <div class="row settings-row clearfix">
+                    <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No groups found.{% endtrans %}</div>
+                </div>
+            {% endfor %}
+            </div>
+        </div>
+        <div class="panel-footer settings-footer">
+            {{ render_pagination(groups, url_for('management.groups')) }}
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+    <script>
+    var bulk_actions = new BulkActions();
+
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
+{% endblock %}

flaskbb/themes/aurora/templates/management/overview.html

@@ -0,0 +1,133 @@
+{% set page_title = _("Overview") %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% 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>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+<div class="col-md-12 settings-col">
+    <div class="panel settings-panel">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-tasks"></span> {% trans %}Overview{% endtrans %}
+        </div>
+        <div class="panel-body settings-body">
+            <div class="settings-content">
+                <div class="stats">
+                    <div class="row stats-row">
+                        <div class="col-md-12 col-sm-12 col-xs-12">
+                            <div class="alert-message alert-message-success">
+                                <h4>Everything seems alright.</h4>
+                                <p>No new notifications.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row stats-row">
+                        <div class="col-md-4 col-sm-4 col-xs-4">
+                            <div class="stats-widget">
+                                <div class="icon">
+                                     <i class="fa fa-users text-success"></i>
+                                </div>
+                                <div class="text">
+                                    <var>{{ user_count }}</var>
+                                    <label class="text-muted">users</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-md-4 col-sm-4 col-xs-4">
+                            <div class="stats-widget">
+                                <div class="icon">
+                                     <i class="fa fa-comment text-primary"></i>
+                                </div>
+                                <div class="text">
+                                    <var>{{ post_count }}</var>
+                                    <label class="text-muted">posts</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-md-4 col-sm-4 col-xs-4">
+                            <div class="stats-widget">
+                                <div class="icon">
+                                     <i class="fa fa-comments text-info"></i>
+                                </div>
+                                <div class="text">
+                                    <var>{{ topic_count }}</var>
+                                    <label class="text-muted">topics</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row stats-row">
+
+                        <div class="col-md-4 col-sm-4 col-xs-4">
+                            <div class="row stats-heading">Statistics</div>
+
+                            <div class="row stats-item">
+                                <div class="key pull-left">Registered Users</div><div class="value pull-right">{{ user_count }}</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Online Users</div><div class="value pull-right">{{ user_count }}</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Banned Users</div><div class="value pull-right">{{ user_count }}</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Groups</div><div class="value pull-right">{{ user_count }}</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Topics</div><div class="value pull-right">{{ topic_count }}</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Posts</div><div class="value pull-right">{{ post_count }}</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Reports</div><div class="value pull-right">{{ post_count }}</div>
+                            </div>
+                        </div>
+
+                        <div class="col-md-4 col-sm-4 col-xs-4">
+                            <div class="row stats-heading">Components</div>
+
+                            <div class="row stats-item">
+                                <div class="key pull-left">FlaskBB</div><div class="value pull-right">{{ flaskbb_version }}</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">FlaskBB API</div><div class="value pull-right">v1</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Flask</div><div class="value pull-right">{{ 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>
+                        </div>
+
+                        <div class="col-md-4 col-sm-4 col-xs-4">
+                            <div class="row stats-heading">Plugins</div>
+
+                            <div class="row stats-item">
+                                <div class="key pull-left">Portal</div><div class="value pull-right">0.1.2</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Polls</div><div class="value pull-right">1.3.0</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">RSS Feed</div><div class="value pull-right">0.0.1</div>
+                            </div>
+                            <div class="row stats-item">
+                                <div class="key pull-left">Username Colors</div><div class="value pull-right">2.11</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

flaskbb/themes/aurora/templates/management/reports.html

@@ -0,0 +1,64 @@
+{% set page_title = _("Reports") %}
+{% set active_management_report_nav=True %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% 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>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme('macros.html') import render_pagination, navlink with context %}
+
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.unread_reports', _("Show unread reports")) }}
+            {{ navlink('management.reports', _("Show all reports")) }}
+        </ul>
+    </div>
+</div>
+
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel with-left-border">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-flag"></span> {% trans %}All Reports{% endtrans %}
+        </div>
+        <div class="panel-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">#</div>
+                    <div class="col-md-1 col-sm-2 col-xs-2 meta-item">{% trans %}Poster{% endtrans %}</div>
+                    <div class="col-md-3 col-sm-3 col-xs-3 meta-item">{% trans %}Topic{% endtrans %}</div>
+                    <div class="col-md-3 col-sm-4 col-xs-3 meta-item">{% trans %}Reason{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-xs-2 meta-item">{% trans %}Reporter{% endtrans %}</div>
+                    <div class="col-md-2 hidden-sm hidden-xs meta-item">{% trans %}Reported{% endtrans %}</div>
+                </div>
+            {% for report in reports.items %}
+                <div class="row settings-row hover clearfix">
+                    <div class="col-md-1 col-sm-1 col-xs-1">{{ report.id }}</div>
+                    <div class="col-md-1 col-sm-2 col-xs-2"><a href="{{ report.post.user.url }}">{{ report.post.user.username }}</a></div>
+                    <div class="col-md-3 col-sm-3 col-xs-3"><a href="{{ report.post.url }}" target="_blank">{{ report.post.topic.title }}</a></div>
+                    <div class="col-md-3 col-sm-4 col-xs-3">{{ report.reason }}</div>
+                    <div class="col-md-2 col-sm-2 col-xs-2">{{ report.reporter.username }}</div>
+                    <div class="col-md-2 hidden-sm hidden-xs">{{ report.reported|time_since }}</div>
+                </div>
+            {% else %}
+                <div class="row settings-row clearfix">
+                    <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No unread reports.{% endtrans %}</div>
+                </div>
+            {% endfor %}
+            </div>
+            <div class="panel-footer settings-footer">
+                {{ render_pagination(reports, url_for('management.unread_reports')) }}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

flaskbb/themes/aurora/templates/management/settings.html

@@ -0,0 +1,71 @@
+{% set page_title = active_group.name %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% 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_group.name }}</li>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme('macros.html') import render_boolean_field, render_select_field, render_field, navlink with context %}
+
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+        {% for group in all_groups %}
+            {% if group.key == active_group.key %}
+                <li class="active"><a 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>
+            {% endif %}
+        {% endfor %}
+        </ul>
+    </div>
+</div><!--/.col-md-3 -->
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel with-left-border">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-cogs"></span> {{ active_group.name }}
+        </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> <!-- end col-md-12...-->
+                </form>
+
+            </div>
+        </div> <!-- end settings-body -->
+    </div>
+</div>
+{% endblock %}

flaskbb/themes/aurora/templates/management/unread_reports.html

@@ -0,0 +1,96 @@
+{% set page_title = _("Unread Reports") %}
+{% set active_management_report_nav=True %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% 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 %}Unread Reports{% endtrans %}</li>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme('macros.html') import render_pagination, navlink with context %}
+
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.unread_reports', _("Show unread reports")) }}
+            {{ navlink('management.reports', _("Show all reports")) }}
+        </ul>
+    </div>
+</div>
+
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel with-left-border">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-flag"></span> {% trans %}Unread Reports{% endtrans %}
+        </div>
+        <div class="panel-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>
+                    <div class="col-md-1 col-sm-2 col-xs-2 meta-item">{% trans %}Poster{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-3 col-xs-3 meta-item">{% trans %}Topic{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-4 col-xs-3 meta-item">{% trans %}Reason{% endtrans %}</div>
+                    <div class="col-md-2 hidden-sm hidden-xs meta-item">{% trans %}Reporter{% endtrans %}</div>
+                    <div class="col-md-2 hidden-sm hidden-xs meta-item">{% trans %}Reported{% 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-cog"></span> {% trans %}Actions{% endtrans %}
+                            </button>
+                            <ul class="dropdown-menu slidedown">
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.report_markread') }}', '{% trans %}Are you sure you want to mark these Reports as read?{% endtrans %}')">
+                                        <span class="fa fa-flag-o text-primary"></span> {% trans %}Mark as Read{% endtrans %}
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            {% for report in reports.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="{{ report.id }}" title="Select Report"/></div>
+                    <div class="col-md-1 col-sm-2 col-xs-2"><a href="{{ report.post.user.url }}">{{ report.post.user.username }}</a></div>
+                    <div class="col-md-2 col-sm-3 col-xs-3"><a href="{{ report.post.url }}" target="_blank">{{ report.post.topic.title }}</a></div>
+                    <div class="col-md-2 col-sm-4 col-xs-3">{{ report.reason }}</div>
+                    <div class="col-md-2 hidden-sm hidden-xs">{{ report.reporter.username }}</div>
+                    <div class="col-md-2 hidden-sm hidden-xs">{{ report.reported|time_since }}</div>
+                    <div class="col-md-2 col-sm-2 col-xs-2">
+                        <form class="inline-form" id="read-{{report.id}}" method="post" action="{{ url_for('management.report_markread', report_id=report.id) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                            <button class="btn btn-link">
+                                <span class="fa fa-flag-o text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Mark as Read{% endtrans %}"></span>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            {% else %}
+                <div class="row settings-row clearfix">
+                    <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No unread reports.{% endtrans %}</div>
+                </div>
+            {% endfor %}
+            </div>
+            <div class="panel-footer settings-footer">
+                {{ render_pagination(reports, url_for('management.unread_reports')) }}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+    <script>
+    var bulk_actions = new BulkActions();
+
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
+{% endblock %}

flaskbb/themes/aurora/templates/management/user_form.html

@@ -28,13 +28,13 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col">
-    <div class="panel settings-panel">
+    <div class="panel settings-panel with-left-border">
         <div class="panel-heading settings-head">
             <span class="fa fa-user-plus"></span> {{ title }}
         </div>
         <div class="panel-body settings-body">
             <div class="settings-content">
-                <form class="form-horizontal" role="form" method="post">
+                <form class="form-horizontal settings-form" role="form" method="post">
                     {{ form.hidden_tag() }}
                     {{ horizontal_field(form.username) }}
                     {{ horizontal_field(form.email) }}

flaskbb/themes/aurora/templates/management/users.html

@@ -28,7 +28,7 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9 settings-col">
-    <div class="panel settings-panel">
+    <div class="panel settings-panel with-left-border">
         <div class="panel-heading settings-head">
 
             <span class="fa fa-user"></span> {% trans %}Users{% endtrans %}
@@ -36,7 +36,7 @@
             <div class="pull-right action-buttons">
                 <div class="btn-group pull-right">
                     <button type="button" class="btn btn-default btn-xs" onclick="return show_management_search()">
-                        <span class="fa fa-search" style="margin-right: 0px;"></span> {% trans %}Search{% endtrans %}
+                        <span class="fa fa-search"></span> {% trans %}Search{% endtrans %}
                     </button>
                 </div>
             </div>
@@ -57,102 +57,93 @@
             </div>
 
             <div class="settings-content">
-                <table class="table table-hover">
-                    <thead>
-                        <tr>
-                            <th><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></th>
-                            <th>#</th>
-                            <th>{% trans %}Username{% endtrans %}</th>
-                            <th>{% trans %}Posts{% endtrans %}</th>
-                            <th>{% trans %}Date registered{% endtrans %}</th>
-                            <th>{% trans %}Group{% endtrans %}</th>
-                            <th>
-                                <div class="btn-group">
-                                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-                                        <span class="fa fa-cog" style="margin-right: 0px;"></span> {% trans %}Actions{% endtrans %}
-                                    </button>
-                                    <ul class="dropdown-menu slidedown">
-                                        <li>
-                                            <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.ban_user') }}', '{% trans %}Are you sure you want to ban these Users?{% endtrans %}')">
-                                                <span class="fa fa-flag text-warning"></span> {% trans %}Ban selected Users{% endtrans %}
-                                            </a>
-                                        </li>
-
-                                        <li>
-                                            <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">
-                                                <span class="fa fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
-                                            </a>
-                                        </li>
-
-                                        <li>
-                                            <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.delete_user') }}', '{% trans %}Are you sure you want to delete these Users?{% endtrans %}')">
-                                                <span class="fa fa-trash text-danger"></span> {% trans %}Delete selected Users{% endtrans %}
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    {% for user in users.items %}
-                        <tr class="action-row">
-                            <td><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></td>
-                            <td>{{ user.id }}</td>
-                            <td><a href="{{ url_for('user.profile', username=user.username) }}">{{ user.username }}</a></td>
-                            <td>{{ user.post_count }}</td>
-                            <td>{{ user.date_joined|format_date('%b %d %Y') }}</td>
-                            <td>{{ user.primary_group.name }}</td>
-                            <td>
-                                {% 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) }}">
-                                        <span class="fa fa-pencil text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
+                <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-cog"></span> {% trans %}Actions{% endtrans %}
+                            </button>
+                            <ul class="dropdown-menu slidedown">
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.ban_user') }}', '{% trans %}Are you sure you want to ban these Users?{% endtrans %}')">
+                                        <span class="fa fa-flag text-warning"></span> {% trans %}Ban selected Users{% endtrans %}
                                     </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) }}">
-                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-
-                                        <button class="btn btn-link">
-                                            <span class="fa fa-flag text-warning" data-toggle="tooltip" data-placement="top" title="{% trans %}Ban{% endtrans %}"></span>
-                                        </button>
-                                    </form>
-                                {% endif %}
-
-                                {% if current_user|can_ban_user and user.permissions['banned'] %}
-                                    <form class="inline-form" id="unban-{{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-link">
-                                            <span class="fa 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) }}">
-                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-
-                                    <button class="btn btn-link">
-                                        <span class="fa fa-trash text-danger" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}"></span>
-                                    </button>
-                                </form>
-                                {% endif %}
-                            </td>
-                        </tr>
-                    {% else %}
-                        <tr>
-                            <td colspan="6">
-                                {% trans %}No users found matching your search criteria.{% endtrans %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-            </div>
+                                </li>
+
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">
+                                        <span class="fa fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
+                                    </a>
+                                </li>
 
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.delete_user') }}', '{% trans %}Are you sure you want to delete these Users?{% endtrans %}')">
+                                        <span class="fa fa-trash text-danger"></span> {% trans %}Delete selected Users{% endtrans %}
+                                    </a>
+                                </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('%b %d %Y') }}</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">
+                    {% 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-link">
+                            <span class="fa fa-pencil" 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) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                            <button class="btn btn-link">
+                                <span class="fa fa-flag text-warning" data-toggle="tooltip" data-placement="top" title="{% trans %}Ban{% endtrans %}"></span>
+                            </button>
+                        </form>
+                    {% endif %}
+
+                    {% if current_user|can_ban_user and user.permissions['banned'] %}
+                        <form class="inline-form" id="unban-{{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-link">
+                                <span class="fa 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) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                            <button class="btn btn-link">
+                                <span class="fa fa-trash text-danger" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}"></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>
+            {% endfor %}
+
+            </div> <!-- end settings content -->
         </div>
+
         <div class="panel-footer settings-footer">
             {{ render_pagination(users, url_for('management.users')) }}
         </div>