b0rbor4d/spiele-redaktion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P1: Tabellen — Sticky-Header, größere mobile Cover, einklappbare Audit-Details

Browse Source 
- Desktop-Tabellen (Neuheiten, Planung, Archiv, Audit-Log): Scrollbox
  max-h-70vh mit sticky thead
- Mobile Cover jetzt min. 48x68 px (bereits im Icon-Commit umgesetzt)
- Audit-Log: Alt/Neu/Details-JSON per nativem <details> einklappbar,
  monospace 11px
This commit is contained in:
Flo Hartmann
2026-08-26 09:03:21 +00:00
parent 7645f6a791
commit fee5f8b9a3
4 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/archiv/templates/archiv/index.html
View File

@@ -108,9 +108,9 @@
{% endfor %} {% endfor %}
</ul> </ul>
<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm"> <div class="hidden md:block overflow-auto max-h-[70vh] bg-white rounded-xl border border-slate-200 shadow-sm">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-slate-50 text-left text-slate-500"> <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
<tr> <tr>
<th class="px-4 py-3 font-medium">Cover</th> <th class="px-4 py-3 font-medium">Cover</th>
<th class="px-4 py-3 font-medium">Spieltitel</th> <th class="px-4 py-3 font-medium">Spieltitel</th>

20
plugins/audit-log/templates/audit-log/index.html
View File

@@ -61,9 +61,9 @@
</div> </div>
</form> </form>
<div class="bg-white rounded-xl border border-slate-200 overflow-x-auto"> <div class="bg-white rounded-xl border border-slate-200 overflow-auto max-h-[70vh]">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-slate-50 text-left text-slate-500"> <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
<tr> <tr>
<th class="px-4 py-2 font-medium whitespace-nowrap">Zeitpunkt</th> <th class="px-4 py-2 font-medium whitespace-nowrap">Zeitpunkt</th>
<th class="px-4 py-2 font-medium">Benutzer</th> <th class="px-4 py-2 font-medium">Benutzer</th>
@@ -86,12 +86,18 @@
</td> </td>
<td class="px-4 py-2 max-w-md"> <td class="px-4 py-2 max-w-md">
{% if e.alt or e.neu %} {% if e.alt or e.neu %}
{% if e.alt %}<div class="mb-1"><span class="text-slate-400 text-xs">Alt:</span> <details>
<pre class="text-xs bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.alt | json_schoen }}</pre></div>{% endif %} <summary class="cursor-pointer text-xs text-emerald-700 hover:text-emerald-900 select-none">Änderungen anzeigen</summary>
{% if e.neu %}<div><span class="text-slate-400 text-xs">Neu:</span> {% if e.alt %}<div class="mt-1 mb-1"><span class="text-slate-400 text-xs">Alt:</span>
<pre class="text-xs bg-emerald-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.neu | json_schoen }}</pre></div>{% endif %} <pre class="font-mono text-[11px] bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.alt | json_schoen }}</pre></div>{% endif %}
{% if e.neu %}<div class="mt-1"><span class="text-slate-400 text-xs">Neu:</span>
<pre class="font-mono text-[11px] bg-emerald-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.neu | json_schoen }}</pre></div>{% endif %}
</details>
{% elif e.details %} {% elif e.details %}
<pre class="text-xs bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.details | json_schoen }}</pre> <details>
<summary class="cursor-pointer text-xs text-emerald-700 hover:text-emerald-900 select-none">Details anzeigen</summary>
<pre class="mt-1 font-mono text-[11px] bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.details | json_schoen }}</pre>
</details>
{% else %} {% else %}
<span class="text-slate-400">&ndash;</span> <span class="text-slate-400">&ndash;</span>
{% endif %} {% endif %}

4
plugins/neuheiten/templates/neuheiten/_liste.html
View File

@@ -51,9 +51,9 @@
</ul> </ul>
<!-- Desktop/Tablet (&ge;768px): Tabellenform --> <!-- Desktop/Tablet (&ge;768px): Tabellenform -->
<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm"> <div class="hidden md:block overflow-auto max-h-[70vh] bg-white rounded-xl border border-slate-200 shadow-sm">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-slate-50 text-left text-slate-500"> <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
<tr> <tr>
<th class="px-4 py-3 font-medium">Cover</th> <th class="px-4 py-3 font-medium">Cover</th>
{% set basis = '/neuheiten?q=' ~ (q | urlencode) ~ '&status=' ~ (status_filter | urlencode) %} {% set basis = '/neuheiten?q=' ~ (q | urlencode) ~ '&status=' ~ (status_filter | urlencode) %}

4
plugins/planung/templates/planung/index.html
View File

@@ -133,9 +133,9 @@
</ul> </ul>
<!-- Desktop/Tablet (&ge;768px): Tabellenform --> <!-- Desktop/Tablet (&ge;768px): Tabellenform -->
<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm"> <div class="hidden md:block overflow-auto max-h-[70vh] bg-white rounded-xl border border-slate-200 shadow-sm">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-slate-50 text-left text-slate-500"> <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
<tr> <tr>
<th class="px-4 py-3 font-medium">Cover</th> <th class="px-4 py-3 font-medium">Cover</th>
<th class="px-4 py-3 font-medium">Spieltitel</th> <th class="px-4 py-3 font-medium">Spieltitel</th>