Merge branch 'widget-title-to-framework' into 'master'

[ADD] Widget title partial to AA framework

See merge request allianceauth/allianceauth!1629

allianceauth/authentication/templates/authentication/dashboard_characters.html

@@ -1,13 +1,11 @@
 {% load i18n %}
 <div id="aa-dashboard-panel-characters" class="col-12 col-xl-8 align-self-stretch p-2 ps-0 pe-0 ps-xl-0 pe-xl-2">
-    <div class="card">
+    <div class="card h-100">
-        <div class="card-body">
-            <div class="d-flex align-items-center">
-                <h4 class="ms-auto me-auto">
-                    {% translate "Characters" %}
-                </h4>
-            </div>
         <div class="card-body">
+            {% translate "Characters" as widget_title %}
+            {% include "framework/dashboard/widget-title.html" with title=widget_title %}
+
+            <div>
                 <div style="height: 300px; overflow-y:auto;">
                     <div class="d-flex">
                         <a href="{% url 'authentication:add_character' %}" class="btn btn-primary flex-fill m-1" title="{% translate 'Add Character' %}">

allianceauth/authentication/templates/authentication/dashboard_groups.html

@@ -2,8 +2,10 @@
 <div id="aa-dashboard-panel-membership" class="col-12 col-xl-4 align-self-stretch py-2 ps-xl-2">
     <div class="card h-100">
         <div class="card-body">
-            <h4 class="card-title text-center">{% translate "Membership" %}</h4>
+            {% translate "Membership" as widget_title %}
-            <div class="card-body">
+            {% include "framework/dashboard/widget-title.html" with title=widget_title %}
+
+            <div>
                 <div style="height: 300px; overflow-y:auto;">
                     <h5 class="text-center">{% translate "State:" %} {{ request.user.profile.state }}</h5>
                     <table class="table">

allianceauth/framework/templates/framework/dashboard/widget-title.html

@@ -0,0 +1,8 @@
+{#Usage:#}
+{#    {% include "framework/dashboard/widget-title.html" with title="Foobar" %}#}
+
+<div class="d-flex align-items-center">
+    <h4 class="ms-auto me-auto mb-3">
+        {{ title }}
+    </h4>
+</div>

allianceauth/optimer/templates/optimer/dashboard.ops.html

@@ -4,9 +4,9 @@
 <div class="col-12 align-self-stretch py-2">
     <div class="card h-100">
         <div class="card-body">
-            <h4 class="card-title text-center">{% translate "Upcoming Fleets" %}</h4>
+            {% translate "Upcoming Fleets" as widget_title %}
+            {% include "framework/dashboard/widget-title.html" with title=widget_title %}
 
-            <div class="card-body">
             <div>
                 <table class="table">
                     <thead>
@@ -38,5 +38,4 @@
             </div>
         </div>
     </div>
-    </div>
 </div>

allianceauth/templates/allianceauth/admin-status/overview.html

@@ -5,13 +5,10 @@
     <div id="aa-dashboard-panel-admin-notifications" class="col-12 align-self-stretch pb-2">
         <div class="card">
             <div class="card-body">
-                <div class="d-flex align-items-center">
+                {% translate "Alliance Auth Notifications" as widget_title %}
-                    <div class="w-100 align-self-stretch">
+                {% include "framework/dashboard/widget-title.html" with title=widget_title %}
-                        <h4 class="ms-auto me-auto text-center">
-                            {% translate "Alliance Auth Notifications" %}
-                        </h4>
 
-                        <div class="card-body">
+                <div>
                     <ul class="list-group">
                         {% for notif in notifications %}
                             <li class="list-group-item">
@@ -47,19 +44,16 @@
             </div>
         </div>
     </div>
-        </div>
-    </div>
 {% endif %}
 
 <div class="col-12 align-self-stretch py-2">
     <div class="card">
-        <div class="card-body d-flex flex-row flex-wrap">
+        <div class="card-body row">
             <div id="aa-dashboard-panel-software-version" class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
-                <h4 class="ms-auto me-auto text-center">
+                {% translate "Software Version" as widget_title %}
-                    {% translate "Software Version" %}
+                {% include "framework/dashboard/widget-title.html" with title=widget_title %}
-                </h4>
 
-                <div class="card-body">
+                <div>
                     <ul class="list-group list-group-horizontal w-100" role="group" aria-label="{% translate 'Software Version' %}">
                         <li class="list-group-item w-100">
                             <div class="btn h-100 w-100 cursor-default">
@@ -98,11 +92,10 @@
             </div>
 
             <div id="aa-dashboard-panel-task-queue" class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
-                <h4 class="ms-auto me-auto text-center">
+                {% translate "Task Queue" as widget_title %}
-                    {% translate "Task Queue" %}
+                {% include "framework/dashboard/widget-title.html" with title=widget_title %}
-                </h4>
 
-                <div class="card-body">
+                <div>
                     <p>
                         {% blocktranslate with total=tasks_total|intcomma latest=earliest_task|timesince|default:"?" %}
                             Status of {{ total }} processed tasks • last {{ latest }}

allianceauth/timerboard/templates/timerboard/dashboard.timers.html

@@ -4,8 +4,9 @@
 <div class="col-12 align-self-stretch py-2">
     <div class="card h-100">
         <div class="card-body">
-            <h4 class="card-title text-center">{% translate "Upcoming Timers" %}</h4>
+            {% translate "Upcoming Timers" as widget_title %}
-            <div class="card-body">
+            {% include "framework/dashboard/widget-title.html" with title=widget_title %}
+
             <div>
                 <table class="table">
                     <thead>
@@ -56,5 +57,4 @@
             </div>
         </div>
     </div>
-    </div>
 </div>

docs/development/custom/framework/templates.md

@@ -28,6 +28,27 @@ To ensure a unified style language throughout Alliance Auth and Community Apps,
 we also provide a couple of template partials. This collection is bound to grow over
 time, so best have an eye on this page.
 
+### Dashboard Widget Title
+
+To ensure the dashboard widgets have a unified style, we provide a template partial for the widget title.
+
+To use it, you can use the following code in your dashboard widget template:
+
+```django
+<div id="my-app-dashboard-widget" class="col-12 align-self-stretch py-2">
+    <div class="card">
+        <div class="card-body">
+            {% translate "My Widget Title" as widget_title %}
+            {% include "framework/dashboard/widget-title.html" with title=widget_title %}
+
+            <div>
+                <p>My widget content</p>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
 ### Page Header
 
 On some pages you want to have a page header. To make this easier, we provide a template partial for this.