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

- 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

View File

@@ -108,9 +108,9 @@
{% endfor %}
</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">
<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>
<th class="px-4 py-3 font-medium">Cover</th>
<th class="px-4 py-3 font-medium">Spieltitel</th>

View File

@@ -61,9 +61,9 @@
</div>
</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">
<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>
<th class="px-4 py-2 font-medium whitespace-nowrap">Zeitpunkt</th>
<th class="px-4 py-2 font-medium">Benutzer</th>
@@ -86,12 +86,18 @@
</td>
<td class="px-4 py-2 max-w-md">
{% if e.alt or e.neu %}
{% if e.alt %}<div class="mb-1"><span class="text-slate-400 text-xs">Alt:</span>
<pre class="text-xs bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.alt | json_schoen }}</pre></div>{% endif %}
{% if e.neu %}<div><span class="text-slate-400 text-xs">Neu:</span>
<pre class="text-xs bg-emerald-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.neu | json_schoen }}</pre></div>{% endif %}
<details>
<summary class="cursor-pointer text-xs text-emerald-700 hover:text-emerald-900 select-none">Änderungen anzeigen</summary>
{% if e.alt %}<div class="mt-1 mb-1"><span class="text-slate-400 text-xs">Alt:</span>
<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 %}
<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 %}
<span class="text-slate-400">&ndash;</span>
{% endif %}

View File

@@ -51,9 +51,9 @@
</ul>
<!-- 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">
<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>
<th class="px-4 py-3 font-medium">Cover</th>
{% set basis = '/neuheiten?q=' ~ (q | urlencode) ~ '&status=' ~ (status_filter | urlencode) %}

View File

@@ -133,9 +133,9 @@
</ul>
<!-- 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">
<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>
<th class="px-4 py-3 font-medium">Cover</th>
<th class="px-4 py-3 font-medium">Spieltitel</th>