[CHANGE] Make DataTables responsive

This commit is contained in:
Peter Pfeufer committed 2026-05-06 09:23:29 +02:00
1 parent 8d4b6e0e46
commit e77ea9dc98
13 files changed
+176 -128

No files matched your search

@@ -17,39 +17,42 @@
{% translate "This page is a best attempt, but backups or database logs can still contain your tokens. Always revoke tokens on https://developers.eveonline.com/authorized-apps where possible."|urlize %}
</p>
<table class="table w-100" id="table_tokens">
<thead>
<tr>
<th>{% translate "Scopes" %}</th>
<th class="text-end">{% translate "Actions" %}</th>
<th>{% translate "Character" %}</th>
</tr>
</thead>
<tbody>
{% for t in tokens %}
<div class="table-responsive">
<table class="table w-100" id="table_tokens">
<thead>
<tr>
<td style="white-space:initial;">
{% for s in t.scopes.all %}
<span class="badge text-bg-secondary">{{ s.name }}</span>
{% endfor %}
</td>
<td nowrap class="text-end">
<a href="{% url 'authentication:token_delete' t.id %}" class="btn btn-danger"><i class="fa-solid fa-trash-can"></i></a>
<a href="{% url 'authentication:token_refresh' t.id %}" class="btn btn-success"><i class="fa-solid fa-rotate"></i></a>
</td>
<td>{{ t.character_name }}</td>
<th>{% translate "Scopes" %}</th>
<th class="text-end">{% translate "Actions" %}</th>
<th>{% translate "Character" %}</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for t in tokens %}
<tr>
<td style="white-space:initial;">
{% for s in t.scopes.all %}
<span class="badge text-bg-secondary">{{ s.name }}</span>
{% endfor %}
</td>
<td nowrap class="text-end">
<a href="{% url 'authentication:token_delete' t.id %}" class="btn btn-danger"><i class="fa-solid fa-trash-can"></i></a>
<a href="{% url 'authentication:token_refresh' t.id %}" class="btn btn-success"><i class="fa-solid fa-rotate"></i></a>
</td>
<td>{{ t.character_name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock content %}
{% block extra_javascript %}
{% include "bundles/datatables-2-js-bs5.html" %}
{% include "bundles/datatables-2-responsive-js.html" %}
{% include "bundles/filterdropdown-js.html" %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -69,6 +72,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
columnDefs: [
{
targets: [0, 1],
@@ -114,4 +118,5 @@
{% block extra_css %}
{% include "bundles/datatables-2-css-bs5.html" %}
{% include "bundles/datatables-2-responsive-css.html" %}
{% endblock extra_css %}
@@ -238,6 +238,7 @@
{% block extra_javascript %}
{% include 'bundles/datatables-2-js-bs5.html' %}
{% include 'bundles/datatables-2-responsive-js.html' %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -251,6 +252,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
columnDefs: [
{
target: 1,
@@ -265,6 +267,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
columnDefs: [
{
targets: [0, 2],
@@ -286,6 +289,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
columnDefs: [
{
targets: [0, 2],
@@ -308,4 +312,5 @@
{% block extra_css %}
{% include 'bundles/datatables-2-css-bs5.html' %}
{% include 'bundles/datatables-2-responsive-css.html' %}
{% endblock %}
@@ -10,38 +10,41 @@
</div>
<div class="card-body mt-2">
<table class="table table-hover" id="table-search">
<thead>
<tr>
<th></th>
<th>{% translate "Character" %}</th>
<th>{% translate "Corporation" %}</th>
<th>{% translate "zKillboard" %}</th>
<th>{% translate "Main Character" %}</th>
<th>{% translate "Main Corporation" %}</th>
<th>{% translate "Main Alliance" %}</th>
</tr>
</thead>
<tbody>
{% for result in results %}
<tr {% if not result.1.registered %}class="danger"{% endif %}>
<td><img src="{{ result.1.portrait_url }}" class="img-circle" alt="{{ result.1.character_name }}"></td>
<td>{{ result.1.character_name }}</td>
<td >{{ result.0.corp.corporation_name }}</td>
<td><a href="https://zkillboard.com/character/{{ result.1.character_id }}/" class="badge text-bg-danger" target="_blank">{% translate "Killboard" %}</a></td>
<td>{{ result.1.main_character.character_name }}</td>
<td>{{ result.1.main_character.corporation_name }}</td>
<td>{{ result.1.main_character.alliance_name }}</td>
<div class="table-responsive">
<table class="table table-hover" id="table-search">
<thead>
<tr>
<th></th>
<th>{% translate "Character" %}</th>
<th>{% translate "Corporation" %}</th>
<th>{% translate "zKillboard" %}</th>
<th>{% translate "Main Character" %}</th>
<th>{% translate "Main Corporation" %}</th>
<th>{% translate "Main Alliance" %}</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for result in results %}
<tr {% if not result.1.registered %}class="danger"{% endif %}>
<td><img src="{{ result.1.portrait_url }}" class="img-circle" alt="{{ result.1.character_name }}"></td>
<td>{{ result.1.character_name }}</td>
<td >{{ result.0.corp.corporation_name }}</td>
<td><a href="https://zkillboard.com/character/{{ result.1.character_id }}/" class="badge text-bg-danger" target="_blank">{% translate "Killboard" %}</a></td>
<td>{{ result.1.main_character.character_name }}</td>
<td>{{ result.1.main_character.corporation_name }}</td>
<td>{{ result.1.main_character.alliance_name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
{% block extra_javascript %}
{% include 'bundles/datatables-2-js-bs5.html' %}
{% include 'bundles/datatables-2-responsive-js.html' %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -55,6 +58,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
stateSave: true,
stateDuration: 0
});
@@ -64,4 +68,5 @@
{% block extra_css %}
{% include 'bundles/datatables-2-css-bs5.html' %}
{% include 'bundles/datatables-2-responsive-css.html' %}
{% endblock %}
@@ -71,6 +71,7 @@
{% block extra_javascript %}
{% include 'bundles/datatables-2-js-bs5.html' %}
{% include 'bundles/datatables-2-responsive-js.html' %}
{% include 'bundles/moment-js.html' with locale=True %}
{% include 'bundles/filterdropdown-js.html' %}
@@ -102,6 +103,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
order: [
[0, 'desc'],
[1, 'asc']
@@ -138,4 +140,5 @@
{% block extra_css %}
{% include 'bundles/datatables-2-css-bs5.html' %}
{% include 'bundles/datatables-2-responsive-css.html' %}
{% endblock %}
@@ -28,7 +28,7 @@
<tr>
<th>{% translate "Character" %}</th>
<th>{% translate "Organization" %}</th>
<th></th>
<th>{% translate "Actions" %}</th>
</tr>
</thead>
@@ -86,6 +86,7 @@
{% block extra_javascript %}
{% include 'bundles/datatables-2-js-bs5.html' %}
{% include 'bundles/datatables-2-responsive-js.html' %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -99,6 +100,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
order: [
[0, 'asc']
],
@@ -117,4 +119,5 @@
{% block extra_css %}
{% include 'bundles/datatables-2-css-bs5.html' %}
{% include 'bundles/datatables-2-responsive-css.html' %}
{% endblock %}
@@ -26,78 +26,80 @@
{% block content %}
{% if groups %}
<table class="table" id="groupsTable" >
<thead>
<tr>
<th>{% translate "Name" %}</th>
<th>{% translate "Description" %}</th>
<th>
{% translate "Leaders" %}<br>
<span class="my-1 me-1 fw-lighter badge text-bg-primary">{% translate "User" %}</span>
<span class="my-1 me-1 fw-lighter badge text-bg-secondary">{% translate "Group" %}</span>
</th>
<th></th>
</tr>
</thead>
<tbody class>
{% for g in groups %}
<div class="table-responsive">
<table class="table" id="groupsTable" >
<thead>
<tr>
<td>{{ g.group.name }}</td>
<td>
{% if g.group.authgroup.description %}
{{ g.group.authgroup.description|linebreaks|urlize }}
{% endif %}
</td>
<td style="max-width: 30%;">
{% if g.group.authgroup.group_leaders.all.count %}
{% for leader in g.group.authgroup.group_leaders.all %}
{% if leader.profile.main_character %}
<span class="my-1 me-1 badge text-bg-primary">{{leader.profile.main_character}}</span>
<th>{% translate "Name" %}</th>
<th>{% translate "Description" %}</th>
<th>
{% translate "Leaders" %}<br>
<span class="my-1 me-1 fw-lighter badge text-bg-primary">{% translate "User" %}</span>
<span class="my-1 me-1 fw-lighter badge text-bg-secondary">{% translate "Group" %}</span>
</th>
<th>{% translate "Actions" %}</th>
</tr>
</thead>
<tbody class>
{% for g in groups %}
<tr>
<td>{{ g.group.name }}</td>
<td>
{% if g.group.authgroup.description %}
{{ g.group.authgroup.description|linebreaks|urlize }}
{% endif %}
</td>
<td style="max-width: 30%;">
{% if g.group.authgroup.group_leaders.all.count %}
{% for leader in g.group.authgroup.group_leaders.all %}
{% if leader.profile.main_character %}
<span class="my-1 me-1 badge text-bg-primary">{{leader.profile.main_character}}</span>
{% endif %}
{% endfor %}
{% endif %}
{% if g.group.authgroup.group_leader_groups.all.count %}
{% for group in g.group.authgroup.group_leader_groups.all %}
<span class="my-1 me-1 badge text-bg-secondary">{{group.name}}</span>
{% endfor %}
{% endif %}
</td>
<td class="text-end">
{% if g.group in user_groups %}
{% if not g.request %}
<a href="{% url 'groupmanagement:request_leave' g.group.id %}" class="btn btn-danger">
{% translate "Leave" %}
</a>
{% else %}
<button type="button" class="btn btn-secondary cursor-help me-1" data-bs-tooltip="aa-tooltip" title="{% translate 'Request pending' %}">
<i class="fa-regular fa-hourglass-half"></i>
</button>
{% endif %}
{% elif not g.request %}
{% if g.group.authgroup.open %}
<a href="{% url 'groupmanagement:request_add' g.group.id %}" class="btn btn-success">
{% translate "Join" %}
</a>
{% else %}
<a href="{% url 'groupmanagement:request_add' g.group.id %}" class="btn btn-primary">
{% translate "Request" %}
</a>
{% endif %}
{% endfor %}
{% endif %}
{% if g.group.authgroup.group_leader_groups.all.count %}
{% for group in g.group.authgroup.group_leader_groups.all %}
<span class="my-1 me-1 badge text-bg-secondary">{{group.name}}</span>
{% endfor %}
{% endif %}
</td>
<td class="text-end">
{% if g.group in user_groups %}
{% if not g.request %}
<a href="{% url 'groupmanagement:request_leave' g.group.id %}" class="btn btn-danger">
{% translate "Leave" %}
</a>
{% else %}
<button type="button" class="btn btn-secondary cursor-help me-1" data-bs-tooltip="aa-tooltip" title="{% translate 'Request pending' %}">
<i class="fa-regular fa-hourglass-half"></i>
</button>
{% endif %}
{% elif not g.request %}
{% if g.group.authgroup.open %}
<a href="{% url 'groupmanagement:request_add' g.group.id %}" class="btn btn-success">
{% translate "Join" %}
</a>
{% else %}
<a href="{% url 'groupmanagement:request_add' g.group.id %}" class="btn btn-primary">
{% translate "Request" %}
</a>
{% endif %}
{% else %}
<button type="button" class="btn btn-secondary cursor-help me-1" data-bs-tooltip="aa-tooltip" title="{% translate 'Request pending' %}">
<i class="fa-regular fa-hourglass-half"></i>
</button>
<a href="{% url 'groupmanagement:request_retract' g.group.id %}" class="btn btn-danger">
{% translate "Retract" %}
</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<a href="{% url 'groupmanagement:request_retract' g.group.id %}" class="btn btn-danger">
{% translate "Retract" %}
</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="alert alert-warning text-center">
{% translate "No groups available." %}
@@ -107,6 +109,7 @@
{% block extra_javascript %}
{% include 'bundles/datatables-2-js-bs5.html' %}
{% include 'bundles/datatables-2-responsive-js.html' %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -120,6 +123,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
});
});
</script>
@@ -127,4 +131,5 @@
{% block extra_css %}
{% include 'bundles/datatables-2-css-bs5.html' %}
{% include 'bundles/datatables-2-responsive-css.html' %}
{% endblock %}
@@ -2,6 +2,7 @@
{% load static %}
{% load i18n %}
{% load aa_i18n %}
{% load evelinks %}
{% load navactive %}
@@ -47,14 +48,14 @@
<div class="tab-content">
<div id="add" class="tab-pane active">
{% if acceptrequests %}
<div>
<table id="table-add" class="table table-responsive w-100">
<div class="table-responsive">
<table id="table-add" class="table w-100">
<thead>
<tr>
<th>{% translate "Character" %}</th>
<th>{% translate "Organization" %}</th>
<th>{% translate "Group" %}</th>
<th></th>
<th>{% translate "Actions" %}</th>
<th>{% translate "Corporation" %}</th>
</tr>
</thead>
@@ -124,14 +125,14 @@
{% if not show_leave_tab %}
<div id="leave" class="tab-pane">
{% if leaverequests %}
<div>
<table id="table-rem" class="table table-responsive w-100">
<div class="table-responsive">
<table id="table-rem" class="table w-100">
<thead>
<tr>
<th>{% translate "Character" %}</th>
<th>{% translate "Organization" %}</th>
<th>{% translate "Group" %}</th>
<th></th>
<th>{% translate "Actions" %}</th>
<th>{% translate "Corporation" %}</th>
</tr>
</thead>
@@ -201,6 +202,7 @@
{% block extra_javascript %}
{% include "bundles/datatables-2-js-bs5.html" %}
{% include "bundles/datatables-2-responsive-js.html" %}
{% include "bundles/filterdropdown-js.html" %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -424,4 +426,5 @@
{% endblock extra_javascript %}
{% block extra_css %}
{% include 'bundles/datatables-2-css-bs5.html' %}
{% include 'bundles/datatables-2-responsive-css.html' %}
{% endblock %}
@@ -56,6 +56,7 @@
{% endblock content %}
{% block extra_javascript %}
{% include "bundles/datatables-2-js-bs5.html" %}
{% include "bundles/datatables-2-responsive-js.html" %}
{% include "bundles/filterdropdown-js.html" %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -69,7 +70,10 @@
const groupColumn = 0;
const table_permission_audit = new DataTable($('#tab_permissions_audit'), {
language: {url: '{{ DT_LANG_PATH }}'},
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
columnDefs: [
{
target: groupColumn,
@@ -109,4 +113,5 @@
{% block extra_css %}
{% include "bundles/datatables-2-css-bs5.html" %}
{% include "bundles/datatables-2-responsive-css.html" %}
{% endblock extra_css %}
@@ -61,6 +61,7 @@
{% block extra_javascript %}
{% include "bundles/datatables-2-js-bs5.html" %}
{% include "bundles/datatables-2-responsive-js.html" %}
{% include "bundles/filterdropdown-js.html" %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -77,6 +78,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
columnDefs: [
{
target: groupColumn,
@@ -122,4 +124,5 @@
{% block extra_css %}
{% include "bundles/datatables-2-css-bs5.html" %}
{% include "bundles/datatables-2-responsive-css.html" %}
{% endblock extra_css %}
@@ -79,6 +79,7 @@
{% block extra_javascript %}
{% include "bundles/datatables-2-js-bs5.html" %}
{% include "bundles/datatables-2-responsive-js.html" %}
{% include "bundles/filterdropdown-js.html" %}
{% include "bundles/chart-js.html" %}
{% include "bundles/moment-js.html" with locale=True %}
@@ -100,6 +101,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
ajax: {
url: '{% url "mumble:connection_history_data" %}',
dataSrc: 'connection_history_data',
@@ -162,6 +164,7 @@
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
ajax: {
url: '{% url "mumble:release_counts_data" %}',
dataSrc: 'release_counts_data',
@@ -236,4 +239,5 @@
{% block extra_css %}
{% include "bundles/datatables-2-css-bs5.html" %}
{% include "bundles/datatables-2-responsive-css.html" %}
{% endblock extra_css %}
+3
View File
@@ -166,6 +166,7 @@ ESC to cancel{% endblocktranslate %}" id="blah"></i></th>
{% block extra_javascript %}
{% include "bundles/datatables-2-js-bs5.html" %}
{% include "bundles/datatables-2-responsive-js.html" %}
{% include "bundles/x-editable-js.html" %}
{% include "bundles/moment-js.html" %}
{% include "bundles/clipboard-js.html" %}
@@ -249,6 +250,7 @@ ESC to cancel{% endblocktranslate %}" id="blah"></i></th>
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
order: [
[ 6, 'asc' ]
],
@@ -275,6 +277,7 @@ ESC to cancel{% endblocktranslate %}" id="blah"></i></th>
{% block extra_css %}
{% include "bundles/datatables-2-css-bs5.html" %}
{% include "bundles/datatables-2-responsive-css.html" %}
{% include "bundles/x-editable.css.html" %}
{% include "bundles/checkbox-css.html" %}
@@ -14,7 +14,7 @@
<th class="text-center">{% translate "Creator" %}</th>
{% if perms.auth.timer_management %}
<th class="text-center">{% translate "Action" %}</th>
<th class="text-center">{% translate "Actions" %}</th>
{% endif %}
</tr>
</thead>
@@ -26,7 +26,7 @@
{{ timer.details }}
{% if timer.timer_type != 'UNSPECIFIED' %}
<br />
<br>
({{ timer.get_timer_type_display }})
{% endif %}
</td>
@@ -44,7 +44,6 @@
{% elif timer.objective == "Neutral" %}
<div class="badge text-bg-secondary">
{% endif %}
{{ timer.get_objective_display }}
</div>
</td>
@@ -86,12 +86,14 @@
{% block extra_css %}
{% include "bundles/datatables-2-css-bs5.html" %}
{% include "bundles/datatables-2-responsive-css.html" %}
{% endblock extra_css %}
{% block extra_javascript %}
{% include "bundles/moment-js.html" with locale=True %}
{% include "bundles/timers-js.html" %}
{% include "bundles/datatables-2-js-bs5.html" %}
{% include "bundles/datatables-2-responsive-js.html" %}
{% include "bundles/filterdropdown-js.html" %}
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
@@ -182,7 +184,10 @@
setInterval(timedUpdate, 1000);
const dtOptions = {
language: {url: '{{ DT_LANG_PATH }}'},
language: {
url: '{{ DT_LANG_PATH }}'
},
responsive: true,
order: [
[4, 'asc']
],