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 %} {% 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 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="card-body">
<div class="d-flex align-items-center"> {% translate "Characters" as widget_title %}
<h4 class="ms-auto me-auto"> {% include "framework/dashboard/widget-title.html" with title=widget_title %}
{% translate "Characters" %}
</h4> <div>
</div>
<div class="card-body">
<div style="height: 300px; overflow-y:auto;"> <div style="height: 300px; overflow-y:auto;">
<div class="d-flex"> <div class="d-flex">
<a href="{% url 'authentication:add_character' %}" class="btn btn-primary flex-fill m-1" title="{% translate 'Add Character' %}"> <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 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 h-100">
<div class="card-body"> <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;"> <div style="height: 300px; overflow-y:auto;">
<h5 class="text-center">{% translate "State:" %} {{ request.user.profile.state }}</h5> <h5 class="text-center">{% translate "State:" %} {{ request.user.profile.state }}</h5>
<table class="table"> <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,38 +4,37 @@
<div class="col-12 align-self-stretch py-2"> <div class="col-12 align-self-stretch py-2">
<div class="card h-100"> <div class="card h-100">
<div class="card-body"> <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>
<div> <table class="table">
<table class="table"> <thead>
<thead> <tr>
<th class="text-center">{% translate "Operation" %}</th>
<th class="text-center">{% translate "Type" %}</th>
<th class="text-center">{% translate "Form Up System" %}</th>
<th class="text-center">{% translate "EVE Time" %}</th>
</tr>
</thead>
<tbody>
{% for ops in timers %}
<tr> <tr>
<th class="text-center">{% translate "Operation" %}</th> <td class="text-center">
<th class="text-center">{% translate "Type" %}</th> {{ ops.operation_name }}
<th class="text-center">{% translate "Form Up System" %}</th> </td>
<th class="text-center">{% translate "EVE Time" %}</th> <td class="text-center">
{{ ops.type }}
</td>
<td class="text-center">
<a href="{{ ops.system|dotlan_solar_system_url }}">{{ ops.system }}</a>
</td>
<td class="text-center" nowrap>{{ ops.start | date:"Y-m-d H:i" }}</td>
</tr> </tr>
</thead> {% endfor %}
</tbody>
<tbody> </table>
{% for ops in timers %}
<tr>
<td class="text-center">
{{ ops.operation_name }}
</td>
<td class="text-center">
{{ ops.type }}
</td>
<td class="text-center">
<a href="{{ ops.system|dotlan_solar_system_url }}">{{ ops.system }}</a>
</td>
<td class="text-center" nowrap>{{ ops.start | date:"Y-m-d H:i" }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -5,45 +5,40 @@
<div id="aa-dashboard-panel-admin-notifications" class="col-12 align-self-stretch pb-2"> <div id="aa-dashboard-panel-admin-notifications" class="col-12 align-self-stretch pb-2">
<div class="card"> <div class="card">
<div class="card-body"> <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"> <ul class="list-group">
{% for notif in notifications %} {% for notif in notifications %}
<li class="list-group-item"> <li class="list-group-item">
{% if notif.state == 'opened' %} {% if notif.state == 'opened' %}
<span class="badge bg-success">{% translate "Open" %}</span> <span class="badge bg-success">{% translate "Open" %}</span>
{% else %} {% else %}
<span class="badge bg-danger">{% translate "Closed" %}</span> <span class="badge bg-danger">{% translate "Closed" %}</span>
{% endif %} {% endif %}
<a href="{{ notif.web_url }}" target="_blank">#{{ notif.iid }} {{ notif.title }}</a> <a href="{{ notif.web_url }}" target="_blank">#{{ notif.iid }} {{ notif.title }}</a>
</li> </li>
{% empty %} {% empty %}
<div class="alert alert-primary" role="alert"> <div class="alert alert-primary" role="alert">
{% translate "No notifications at this time" %} {% translate "No notifications at this time" %}
</div>
{% endfor %}
</ul>
<div class="text-end pt-3">
<a href="https://gitlab.com/allianceauth/allianceauth/issues" target="_blank" class="me-1 text-decoration-none">
<span class="badge" style="background-color: rgb(230 83 40);">
<i class="fab fa-gitlab" aria-hidden="true"></i>
{% translate 'Powered by GitLab' %}
</span>
</a>
<a href="https://discord.com/invite/fjnHAmk" target="_blank" class="text-decoration-none">
<span class="badge" style="background-color: rgb(110 133 211);">
<i class="fab fa-discord" aria-hidden="true"></i>
{% translate 'Support Discord' %}
</span>
</a>
</div> </div>
</div> {% endfor %}
</ul>
<div class="text-end pt-3">
<a href="https://gitlab.com/allianceauth/allianceauth/issues" target="_blank" class="me-1 text-decoration-none">
<span class="badge" style="background-color: rgb(230 83 40);">
<i class="fab fa-gitlab" aria-hidden="true"></i>
{% translate 'Powered by GitLab' %}
</span>
</a>
<a href="https://discord.com/invite/fjnHAmk" target="_blank" class="text-decoration-none">
<span class="badge" style="background-color: rgb(110 133 211);">
<i class="fab fa-discord" aria-hidden="true"></i>
{% translate 'Support Discord' %}
</span>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -53,13 +48,12 @@
<div class="col-12 align-self-stretch py-2"> <div class="col-12 align-self-stretch py-2">
<div class="card"> <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"> <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' %}"> <ul class="list-group list-group-horizontal w-100" role="group" aria-label="{% translate 'Software Version' %}">
<li class="list-group-item w-100"> <li class="list-group-item w-100">
<div class="btn h-100 w-100 cursor-default"> <div class="btn h-100 w-100 cursor-default">
@ -98,11 +92,10 @@
</div> </div>
<div id="aa-dashboard-panel-task-queue" class="col-xl-6 col-lg-12 col-md-12 col-sm-12"> <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> <p>
{% blocktranslate with total=tasks_total|intcomma latest=earliest_task|timesince|default:"?" %} {% blocktranslate with total=tasks_total|intcomma latest=earliest_task|timesince|default:"?" %}
Status of {{ total }} processed tasks • last {{ latest }} Status of {{ total }} processed tasks • last {{ latest }}

View File

@ -4,56 +4,56 @@
<div class="col-12 align-self-stretch py-2"> <div class="col-12 align-self-stretch py-2">
<div class="card h-100"> <div class="card h-100">
<div class="card-body"> <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>
<tr>
<th class="text-center">{% translate "Details" %}</th>
<th class="text-center">{% translate "Timer" %}</th>
<th class="text-center">{% translate "Type" %}</th>
<th class="text-center">{% translate "System" %}</th>
<th class="text-center">{% translate "EVE Time" %}</th>
</tr>
</thead>
<tbody> <div>
{% for timer in timers %} <table class="table">
<tr> <thead>
<td class="text-center"> <tr>
{{ timer.details }} <th class="text-center">{% translate "Details" %}</th>
</td> <th class="text-center">{% translate "Timer" %}</th>
<td class="text-center"> <th class="text-center">{% translate "Type" %}</th>
{{ timer.get_timer_type_display }} <th class="text-center">{% translate "System" %}</th>
</td> <th class="text-center">{% translate "EVE Time" %}</th>
<td class="text-center" nowrap> </tr>
{% if timer.objective == "Hostile" %} </thead>
<div class="badge bg-danger">
{% translate "Hostile" %} <tbody>
</div> {% for timer in timers %}
{% endif %} <tr>
{% if timer.objective == "Friendly" %} <td class="text-center">
<div class="badge bg-primary"> {{ timer.details }}
{% translate "Friendly" %} </td>
</div> <td class="text-center">
{% endif %} {{ timer.get_timer_type_display }}
{% if timer.objective == "Neutral" %} </td>
<div class="badge bg-default"> <td class="text-center" nowrap>
{% translate "Neutral" %} {% if timer.objective == "Hostile" %}
</div> <div class="badge bg-danger">
{% endif %} {% translate "Hostile" %}
</td> </div>
<td class="text-center"><a href="{{ timer.system|dotlan_solar_system_url }}"> {% endif %}
{{ timer.system }} {{ timer.planet_moon }} {% if timer.objective == "Friendly" %}
</a> <div class="badge bg-primary">
</td> {% translate "Friendly" %}
<td class="text-center" nowrap>{{ timer.eve_time | date:"Y-m-d H:i" }}</td> </div>
</tr> {% endif %}
{% endfor %} {% if timer.objective == "Neutral" %}
</tbody> <div class="badge bg-default">
</table> {% translate "Neutral" %}
</div> </div>
{% endif %}
</td>
<td class="text-center"><a href="{{ timer.system|dotlan_solar_system_url }}">
{{ timer.system }} {{ timer.planet_moon }}
</a>
</td>
<td class="text-center" nowrap>{{ timer.eve_time | date:"Y-m-d H:i" }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
</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 we also provide a couple of template partials. This collection is bound to grow over
time, so best have an eye on this page. 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 ### Page Header
On some pages you want to have a page header. To make this easier, we provide a template partial for this. On some pages you want to have a page header. To make this easier, we provide a template partial for this.