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

[ADD] Widget title partial to AA framework

See merge request allianceauth/allianceauth!1629
This commit is contained in:
Ariel Rin 2024-05-27 04:25:56 +00:00
commit 7cd8294104
7 changed files with 154 additions and 133 deletions

View File

@ -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-body">
<div class="d-flex align-items-center">
<h4 class="ms-auto me-auto">
{% translate "Characters" %}
</h4>
</div>
<div class="card h-100">
<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' %}">

View File

@ -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>
<div class="card-body">
{% translate "Membership" as widget_title %}
{% 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">

View File

@ -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>

View File

@ -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>
@ -39,4 +39,3 @@
</div>
</div>
</div>
</div>

View File

@ -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">
<div class="w-100 align-self-stretch">
<h4 class="ms-auto me-auto text-center">
{% translate "Alliance Auth Notifications" %}
</h4>
{% translate "Alliance Auth Notifications" as widget_title %}
{% include "framework/dashboard/widget-title.html" with title=widget_title %}
<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" %}
</h4>
{% translate "Software Version" as widget_title %}
{% include "framework/dashboard/widget-title.html" with title=widget_title %}
<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" %}
</h4>
{% translate "Task Queue" as widget_title %}
{% include "framework/dashboard/widget-title.html" with title=widget_title %}
<div class="card-body">
<div>
<p>
{% blocktranslate with total=tasks_total|intcomma latest=earliest_task|timesince|default:"?" %}
Status of {{ total }} processed tasks • last {{ latest }}

View File

@ -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>
<div class="card-body">
{% translate "Upcoming Timers" as widget_title %}
{% include "framework/dashboard/widget-title.html" with title=widget_title %}
<div>
<table class="table">
<thead>
@ -57,4 +58,3 @@
</div>
</div>
</div>
</div>

View File

@ -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.