Also redesigned the datatables for the groups and reports.

Logic for AJAX is still missing though

flaskbb/templates/management/banned_users.html

@@ -22,7 +22,7 @@
             <div class="panel panel-primary">
                 <div class="panel-heading">
 
-                    <span class="fa fa-users"></span> {% trans %}Banned Users{% endtrans %}
+                    <span class="fa fa-user-times"></span> {% trans %}Banned Users{% endtrans %}
 
                     <div class="pull-right action-buttons">
                         <div class="btn-group pull-right">

flaskbb/templates/management/groups.html

@@ -12,37 +12,80 @@
 </div>
 
 <div class="col-md-9">
-    <legend>{% trans %}Manage Groups{% endtrans %}</legend>
+    <div class="row">
+        <div class="col-md-12">
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <span class="fa fa-users"></span> {% trans %}Groups{% endtrans %}
+                </div>
+                <div class="panel-body management-body"></div>
 
-    <div class="pull-left" style="padding-bottom: 10px">
-        {{ render_pagination(groups, url_for('management.groups')) }}
-    </div>
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></th>
+                                <th>#</th>
+                                <th>{% trans %}Group Name{% endtrans %}</th>
+                                <th>{% trans %}Description{% 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('/groups/delete', '{% 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>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for group in groups.items %}
+                            <tr>
+                                <td><input type="checkbox" name="rowid" class="action-checkbox" value="{{ group.id }}" title="Select Group"/></td>
+                                <td>{{ group.id }}</td>
+                                <td><a href="#">{{ group.name }}</a></td>
+                                <td>{{ group.description }}</td>
+                                <td>
+                                    <a href="{{ url_for('management.edit_group', group_id = group.id) }}">
+                                        <span class="fa fa-pencil text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
+                                    </a>
+                                    <form class="inline-form" 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>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
 
-    <table class="table table-bordered">
-        <thead>
-            <tr>
-                <th>#</th>
-                <th>{% trans %}Group Name{% endtrans %}</th>
-                <th>{% trans %}Description{% endtrans %}</th>
-                <th>{% trans %}Manage{% endtrans %}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for group in groups.items %}
-            <tr>
-                <td>{{ group.id }}</td>
-                <td><a href="#">{{ group.name }}</a></td>
-                <td>{{ group.description }}</td>
-                <td>
-                    <a href="{{ url_for('management.edit_group', group_id = group.id) }}">{% trans %}Edit{% endtrans %}</a> |
-                    <form class="inline-form" 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">{% trans %}Delete{% endtrans %}</button>
-                    </form>
-                </td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+                    <div class="panel-footer">
+                        <div class="row">
+                            <div class="col-md-12">
+                                {{ render_pagination(groups, url_for('management.groups')) }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}
+
+{% block scripts %}
+    <script>
+    var bulk_actions = new BulkActions();
+
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
+{% endblock %}

flaskbb/templates/management/reports.html

@@ -13,39 +13,53 @@
 </div>
 
 <div class="col-md-9">
-    <legend>{% trans %}All Reports{% endtrans %}</legend>
+    <div class="row">
+        <div class="col-md-12">
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <span class="fa fa-flag"></span> {% trans %}All Reports{% endtrans %}
+                </div>
+                <div class="panel-body management-body"></div>
 
-    <div class="pull-left" style="padding-bottom: 10px">
-        {{ render_pagination(reports, url_for('management.reports')) }}
-    </div>
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>{% trans %}Poster{% endtrans %}</th>
+                            <th>{% trans %}Topic{% endtrans %}</th>
+                            <th>{% trans %}Reporter{% endtrans %}</th>
+                            <th>{% trans %}Reason{% endtrans %}</th>
+                            <th>{% trans %}Reported{% endtrans %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for report in reports.items %}
+                        <tr>
+                            <td>{{ report.id }}</td>
+                            <td>{{ report.post.user.username }}</td>
+                            <td><a href="{{ url_for('forum.view_post', post_id=report.post.id) }}" target="_blank">{{ report.post.topic.title }}</a></td>
+                            <td>{{ report.reporter.username }}</td>
+                            <td>{{ report.reason }}</td>
+                            <td>{{ report.reported|time_since }}</td>
+                        </tr>
+                        {% else %}
+                        <tr>
+                            <td colspan="6">{% trans %}No reports.{% endtrans %}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+
+                <div class="panel-footer">
+                    <div class="row">
+                        <div class="col-md-12">
+                            {{ render_pagination(reports, url_for('management.reports')) }}
+                        </div>
+                    </div>
+                </div>
 
-    <table class="table table-bordered">
-        <thead>
-            <tr>
-                <th>#</th>
-                <th>{% trans %}Poster{% endtrans %}</th>
-                <th>{% trans %}Topic{% endtrans %}</th>
-                <th>{% trans %}Reporter{% endtrans %}</th>
-                <th>{% trans %}Reason{% endtrans %}</th>
-                <th>{% trans %}Reported{% endtrans %}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for report in reports.items %}
-            <tr>
-                <td><a href="{{ url_for('forum.view_post', post_id=report.post.id) }}" target="_blank">{{ report.id }}</a></td>
-                <td>{{ report.post.user.username }}</td>
-                <td>{{ report.post.topic.title }}</td>
-                <td>{{ report.reporter.username }}</td>
-                <td>{{ report.reason }}</td>
-                <td>{{ report.reported|time_since }}</td>
-            </tr>
-            {% else %}
-            <tr>
-                <td colspan="6">{% trans %}No reports.{% endtrans %}</td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}

flaskbb/templates/management/unread_reports.html

@@ -13,51 +13,85 @@
 </div>
 
 <div class="col-md-9">
-    <legend>{% trans %}Unread Reports{% endtrans %}</legend>
+    <div class="row">
+        <div class="col-md-12">
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <span class="fa fa-flag"></span> {% trans %}Unread Reports{% endtrans %}
+                </div>
+                <div class="panel-body management-body"></div>
 
-    <div class="pull-left" style="padding-bottom: 10px">
-        {{ render_pagination(reports, url_for('management.unread_reports')) }}
-    </div>
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>{% trans %}Poster{% endtrans %}</th>
+                            <th>{% trans %}Topic{% endtrans %}</th>
+                            <th>{% trans %}Reporter{% endtrans %}</th>
+                            <th>{% trans %}Reason{% endtrans %}</th>
+                            <th>{% trans %}Reported{% 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('/reports/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>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for report in reports.items %}
+                        <tr>
+                            <td>{{ report.id }}</td>
+                            <td>{{ report.post.user.username }}</td>
+                            <td><a href="{{ url_for('forum.view_post', post_id=report.post.id) }}" target="_blank">{{ report.post.topic.title }}</a></td>
+                            <td>{{ report.reporter.username }}</td>
+                            <td>{{ report.reason }}</td>
+                            <td>{{ report.reported|time_since }}</td>
+                            <td>
+                                <form class="inline-form" 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>
+                            </td>
+                        </tr>
+                        {% else %}
+                        <tr>
+                            <td colspan="7">{% trans %}No unread reports.{% endtrans %}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+
+                <div class="panel-footer">
+                    <div class="row">
+                        <div class="col-md-12">
+                            {{ render_pagination(reports, url_for('management.unread_reports')) }}
+                        </div>
+                    </div>
+                </div>
 
-    <table class="table table-bordered">
-        <thead>
-            <tr>
-                <th>#</th>
-                <th>{% trans %}Poster{% endtrans %}</th>
-                <th>{% trans %}Topic{% endtrans %}</th>
-                <th>{% trans %}Reporter{% endtrans %}</th>
-                <th>{% trans %}Reason{% endtrans %}</th>
-                <th>{% trans %}Reported{% endtrans %}</th>
-                <th>
-                    <form class="inline-form" method="post" action="{{ url_for('management.report_markread') }}">
-                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                        <button class="btn btn-link">{% trans %}Mark all as Read{% endtrans %}</button>
-                    </form>
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for report in reports.items %}
-            <tr>
-                <td><a href="{{ url_for('forum.view_post', post_id=report.post.id) }}" target="_blank">{{ report.id }}</a></td>
-                <td>{{ report.post.user.username }}</td>
-                <td>{{ report.post.topic.title }}</td>
-                <td>{{ report.reporter.username }}</td>
-                <td>{{ report.reason }}</td>
-                <td>{{ report.reported|time_since }}</td>
-                <td>
-                    <form class="inline-form" 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">{% trans %}Mark as Read{% endtrans %}</button>
-                    </form>
-                </td>
-            </tr>
-            {% else %}
-            <tr>
-                <td colspan="7">{% trans %}No unread reports.{% endtrans %}</td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}
+
+{% block scripts %}
+    <script>
+    var bulk_actions = new BulkActions();
+
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
+{% endblock %}

flaskbb/templates/management/users.html

@@ -22,7 +22,7 @@
             <div class="panel panel-primary">
                 <div class="panel-heading">
 
-                    <span class="fa fa-users"></span> {% trans %}Users{% endtrans %}
+                    <span class="fa fa-user"></span> {% trans %}Users{% endtrans %}
 
                     <div class="pull-right action-buttons">
                         <div class="btn-group pull-right">