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

Coverbilder (bild_url) + responsives Layout für Mobil/Tablet

Browse Source 
Teil 1 — Coverbilder:
- Migration 0004_bild_url (neuheiten), 0002_bild_url (planung, archiv
  mit beiden Spiegel-Tabellen); nullable VARCHAR(500), SQLite↔Postgres
  portabel, bestehende Zeilen bleiben erhalten
- BGG-Client extrahiert Cover aus der Thing-Antwort (bevorzugt <image>,
  sonst <thumbnail>; protokoll-relative URLs → https)
- Sync-Upsert pflegt bild_url beim Update; fehlendes Bild löscht keines
- Web-Quellen übernehmen img-URLs aus den Listenelementen (src/data-src,
  relative Pfade gegen die Seiten-URL aufgelöst); SPIEL-Essen nutzt das
  BILDER-Feld des JSON-Endpunkts
- Verschiebung Neuheiten→Planung und Archivierung/Wiederherstellen
  schreiben bild_url mit
- Anzeige: kleine Vorschaubilder (40x56) in den Listen, groß (max 200px)
  in Planung-Bearbeiten/Prüf-Dialog; Platzhalter-Div ohne Bild;
  Hotlinking mit loading=lazy + decoding=async

Teil 2 — Responsives Layout:
- Basislayout: Burger-Menü (Alpine.js) auf Mobil, Desktop-Leiste ab md:
- Listen kollabieren <768px zu Karten-Ansichten (Cover links, Titel +
  Metadaten rechts, Status-Badge oben); Desktop behält Tabellenform
- Touch-Ziele >= 44px auf Mobil, Formulare vollbreit mit Labels oben
- Sync-Übersicht/Audit-Log bleiben horizontal scrollbare Tabellen

Tests: 15 neue Fälle (tests/test_covers.py) — Migration inkl.
Daten-Erhalt, BGG-Parsing gemockt, Quellen-Übernahme, Template-Render;
316 Tests grün. README aktualisiert.
This commit is contained in:
Flo Hartmann
2026-08-24 16:54:56 +00:00
parent 20b84a8e1a
commit 96d6af8163
33 changed files with 1134 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
plugins/planung/templates/planung/_cover.html Normal file
View File

@@ -0,0 +1,24 @@
{# Coverbild-Vorschau des Planung-Plugins.
Erwartete Variablen: cover_bild (URL oder None), cover_titel,
cover_gross (optional: true für großformatige Ansichten).
Bilder werden direkt von der Quelle eingebettet (Hotlinking, kein
Download) — mit loading="lazy" und decoding="async". Ohne Bild zeigt
das Partial einen dezenten Platzhalter mit Spielicon-Zeichen. #}
{% set _gross = cover_gross | default(false) %}
{% if _gross %}
{% if cover_bild %}
<img src="{{ cover_bild }}" alt="Cover: {{ cover_titel }}" loading="lazy" decoding="async"
class="block h-auto w-auto max-w-[200px] max-h-[280px] rounded-lg border border-slate-200 bg-white shadow-sm">
{% else %}
<div aria-hidden="true" title="Kein Cover vorhanden"
class="flex h-[210px] w-[150px] max-w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 text-6xl text-slate-300 select-none">&#127922;</div>
{% endif %}
{% else %}
{% if cover_bild %}
<img src="{{ cover_bild }}" alt="Cover: {{ cover_titel }}" loading="lazy" decoding="async" width="40" height="56"
class="block h-14 w-10 shrink-0 rounded border border-slate-200 bg-slate-50 object-cover">
{% else %}
<div aria-hidden="true" title="Kein Cover vorhanden"
class="flex h-14 w-10 shrink-0 items-center justify-center rounded border border-dashed border-slate-300 bg-slate-50 text-lg text-slate-400 select-none">&#127922;</div>
{% endif %}
{% endif %}

11
plugins/planung/templates/planung/bearbeiten.html
View File

@@ -6,8 +6,16 @@
{% if user.id == eintrag.rezensent_id %}du{% else %}{{ user.display_name }}{% endif %}
</p>
<div class="flex flex-col sm:flex-row gap-5 items-start mb-4">
<div class="shrink-0 mx-auto sm:mx-0">
{% set cover_bild = eintrag.bild_url %}
{% set cover_titel = eintrag.titel %}
{% set cover_gross = true %}
{% include "planung/_cover.html" %}
</div>
<form method="post" action="/planung/{{ eintrag.id }}/bearbeiten"
class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 max-w-2xl space-y-4">
class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 max-w-2xl space-y-4 w-full">
<div>
<label for="titel" class="block text-xs font-medium text-slate-500 mb-1">Spieltitel *</label>
<input type="text" id="titel" name="titel" required value="{{ eintrag.titel }}"
@@ -38,4 +46,5 @@
<a href="{{ abbrechen_url }}" class="text-sm text-slate-500 hover:text-slate-800 underline">Abbrechen</a>
</div>
</form>
</div>
{% endblock %}

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

@@ -17,29 +17,30 @@
<div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
<h2 class="font-semibold mb-3">Titel h&auml;ndisch nachtragen</h2>
<form method="post" action="/planung/neu" class="flex flex-wrap items-end gap-3">
<div>
<!-- Mobil: Felder untereinander vollbreit; ab sm: flexibel nebeneinander -->
<form method="post" action="/planung/neu" class="grid grid-cols-1 gap-3 sm:flex sm:flex-wrap sm:items-end">
<div class="sm:w-64 lg:w-72">
<label for="titel" class="block text-xs font-medium text-slate-500 mb-1">Spieltitel *</label>
<input type="text" id="titel" name="titel" required
class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-72 focus:outline-none focus:ring-2 focus:ring-emerald-500">
class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
</div>
<div>
<div class="sm:w-48 lg:w-52">
<label for="verlag" class="block text-xs font-medium text-slate-500 mb-1">Verlag</label>
<input type="text" id="verlag" name="verlag"
class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-52 focus:outline-none focus:ring-2 focus:ring-emerald-500">
class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
</div>
<div>
<div class="sm:w-32">
<label for="ausgabe" class="block text-xs font-medium text-slate-500 mb-1">Ausgabe</label>
<input type="text" id="ausgabe" name="ausgabe" placeholder="z. B. 3/2025"
class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-32 focus:outline-none focus:ring-2 focus:ring-emerald-500">
class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
</div>
<div>
<div class="sm:w-32">
<label for="bgg_id" class="block text-xs font-medium text-slate-500 mb-1">BGG-ID (optional)</label>
<input type="text" id="bgg_id" name="bgg_id"
class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-32 focus:outline-none focus:ring-2 focus:ring-emerald-500">
<input type="text" id="bgg_id" name="bgg_id" inputmode="numeric"
class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
</div>
<button type="submit"
class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
class="w-full sm:w-auto min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
Pr&uuml;fen &amp; eintragen
</button>
</form>
@@ -47,22 +48,95 @@
<div class="flex items-center mb-3 gap-3">
<form method="get" action="/planung" class="flex items-center gap-2">
<select name="status" class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
<select name="status" class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white min-h-[44px] md:min-h-0"
onchange="this.form.submit()">
<option value="">Alle Status</option>
{% for wert in status_optionen %}
<option value="{{ wert }}" {% if wert == status_filter %}selected{% endif %}>{{ status_anzeige[wert] }}</option>
{% endfor %}
</select>
<noscript><button type="submit" class="bg-slate-200 hover:bg-slate-300 px-3 py-2 rounded-lg text-sm">Filtern</button></noscript>
<noscript><button type="submit" class="bg-slate-200 hover:bg-slate-300 px-3 py-2 rounded-lg text-sm min-h-[44px] md:min-h-0">Filtern</button></noscript>
</form>
<p class="text-xs text-slate-400 ml-auto">{{ anzahl }} Eintr&auml;ge</p>
</div>
<div class="overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
<!-- Mobil (<768px): Karten-Ansicht — Cover links, Titel+Metadaten rechts, Status oben -->
<ul class="md:hidden space-y-3" role="list">
{% for eintrag in eintraege %}
<li class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 flex gap-3">
<div class="pt-0.5">
{% set cover_bild = eintrag.bild_url %}
{% set cover_titel = eintrag.titel %}
{% include "planung/_cover.html" %}
</div>
<div class="min-w-0 flex-1">
<div class="flex items-start gap-2">
<h3 class="text-sm font-medium leading-snug break-words">
{{ eintrag.titel }}
{% if eintrag.bgg_id %}
<a href="https://boardgamegeek.com/boardgame/{{ eintrag.bgg_id }}" target="_blank" rel="noopener"
class="ml-0.5 text-[10px] text-slate-400 hover:text-emerald-700 align-super">BGG&nbsp;{{ eintrag.bgg_id }}</a>
{% endif %}
{% if eintrag.pruefung %}
<span class="ml-0.5 inline-block px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 text-xs align-middle"
title="Die dedup-Prüfung hatte beim Eintragen Treffer.">&#9888; Pr&uuml;fhinweis</span>
{% endif %}
</h3>
{% if eintrag.status == 'offen' %}
<span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-slate-200 text-slate-700 text-xs">{{ status_anzeige[eintrag.status] }}</span>
{% elif eintrag.status == 'in_bearbeitung' %}
<span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 text-xs">{{ status_anzeige[eintrag.status] }}</span>
{% else %}
<span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-xs">{{ status_anzeige[eintrag.status] }}</span>
{% endif %}
</div>
<dl class="mt-1.5 space-y-0.5 text-xs text-slate-500">
{% if eintrag.verlag %}<div><dt class="inline font-medium text-slate-400">Verlag: </dt><dd class="inline">{{ eintrag.verlag }}</dd></div>{% endif %}
{% if eintrag.ausgabe %}<div><dt class="inline font-medium text-slate-400">Ausgabe: </dt><dd class="inline">{{ eintrag.ausgabe }}</dd></div>{% endif %}
<div><dt class="inline font-medium text-slate-400">Rezensent: </dt><dd class="inline">{{ namen.get(eintrag.rezensent_id, '—') }}</dd></div>
<div>
<dt class="inline font-medium text-slate-400">Aktualisiert: </dt>
<dd class="inline">{{ eintrag.aktualisiert_am.strftime('%d.%m.%Y %H:%M') if eintrag.aktualisiert_am else '—' }}</dd>
</div>
</dl>
{% if kann_bearbeiten(eintrag) %}
<div class="mt-2 grid grid-cols-1 gap-2">
{% if eintrag.status == 'offen' %}
<form method="post" action="/planung/{{ eintrag.id }}/status">
<input type="hidden" name="status" value="in_bearbeitung">
<button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center bg-sky-600 hover:bg-sky-700 active:bg-sky-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap">In Bearbeitung</button>
</form>
{% endif %}
{% if eintrag.status != 'abgeschlossen' %}
<form method="post" action="/planung/{{ eintrag.id }}/status">
<input type="hidden" name="status" value="abgeschlossen">
<button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap">Abgeschlossen</button>
</form>
{% endif %}
<a href="/planung/{{ eintrag.id }}/bearbeiten"
class="min-h-[44px] inline-flex items-center justify-center border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-3 py-2 rounded-lg text-sm whitespace-nowrap">Bearbeiten</a>
<form method="post" action="/planung/{{ eintrag.id }}/loeschen">
<button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center border border-red-200 text-red-600 hover:bg-red-50 px-3 py-2 rounded-lg text-sm whitespace-nowrap">L&ouml;schen</button>
</form>
</div>
{% else %}
<p class="mt-2 text-xs text-slate-400">nur {{ namen.get(eintrag.rezensent_id, '') }}</p>
{% endif %}
</div>
</li>
{% else %}
<li class="bg-white rounded-xl border border-slate-200 shadow-sm px-4 py-8 text-center text-sm text-slate-400">
Noch keine Eintr&auml;ge — schiebe einen Titel aus den Neuheiten hierher oder trage ihn oben h&auml;ndisch nach.
</li>
{% endfor %}
</ul>
<!-- Desktop/Tablet (&ge;768px): Tabellenform -->
<div class="hidden md:block overflow-x-auto 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">
<tr>
<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">Verlag</th>
<th class="px-4 py-3 font-medium">Ausgabe</th>
@@ -75,6 +149,11 @@
<tbody class="divide-y divide-slate-100">
{% for eintrag in eintraege %}
<tr class="hover:bg-slate-50">
<td class="px-4 py-3">
{% set cover_bild = eintrag.bild_url %}
{% set cover_titel = eintrag.titel %}
{% include "planung/_cover.html" %}
</td>
<td class="px-4 py-3 font-medium">
{{ eintrag.titel }}
{% if eintrag.bgg_id %}
@@ -107,19 +186,19 @@
{% if eintrag.status == 'offen' %}
<form method="post" action="/planung/{{ eintrag.id }}/status">
<input type="hidden" name="status" value="in_bearbeitung">
<button type="submit" class="text-xs bg-sky-600 hover:bg-sky-700 text-white px-2 py-1 rounded-lg whitespace-nowrap">In Bearbeitung</button>
<button type="submit" class="text-xs bg-sky-600 hover:bg-sky-700 text-white px-2.5 py-2 rounded-lg whitespace-nowrap">In Bearbeitung</button>
</form>
{% endif %}
{% if eintrag.status != 'abgeschlossen' %}
<form method="post" action="/planung/{{ eintrag.id }}/status">
<input type="hidden" name="status" value="abgeschlossen">
<button type="submit" class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2 py-1 rounded-lg whitespace-nowrap">Abgeschlossen</button>
<button type="submit" class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2.5 py-2 rounded-lg whitespace-nowrap">Abgeschlossen</button>
</form>
{% endif %}
<a href="/planung/{{ eintrag.id }}/bearbeiten"
class="text-xs border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-2 py-1 rounded-lg whitespace-nowrap">Bearbeiten</a>
class="text-xs border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-2.5 py-2 rounded-lg whitespace-nowrap">Bearbeiten</a>
<form method="post" action="/planung/{{ eintrag.id }}/loeschen">
<button type="submit" class="text-xs border border-red-200 text-red-600 hover:bg-red-50 px-2 py-1 rounded-lg whitespace-nowrap">L&ouml;schen</button>
<button type="submit" class="text-xs border border-red-200 text-red-600 hover:bg-red-50 px-2.5 py-2 rounded-lg whitespace-nowrap">L&ouml;schen</button>
</form>
</div>
{% else %}
@@ -129,7 +208,7 @@
</tr>
{% else %}
<tr>
<td colspan="7" class="px-4 py-8 text-center text-slate-400">
<td colspan="8" class="px-4 py-8 text-center text-slate-400">
Noch keine Eintr&auml;ge — schiebe einen Titel aus den Neuheiten hierher oder trage ihn oben h&auml;ndisch nach.
</td>
</tr>

10
plugins/planung/templates/planung/pruefung.html
View File

@@ -7,7 +7,14 @@
der Eintrag angelegt wird.
</p>
<div class="bg-amber-50 border border-amber-300 rounded-xl p-4 mb-6 text-sm">
<div class="flex flex-col sm:flex-row gap-4 items-start">
<div class="shrink-0 mx-auto sm:mx-0">
{% set cover_bild = bild_url %}
{% set cover_titel = spiel_titel %}
{% set cover_gross = true %}
{% include "planung/_cover.html" %}
</div>
<div class="bg-amber-50 border border-amber-300 rounded-xl p-4 mb-0 sm:mb-6 text-sm w-full">
<p class="font-medium text-amber-800 mb-2">&#9888; {{ konflikte|length }} Treffer f&uuml;r „{{ spiel_titel }}“</p>
<ul class="list-disc list-inside space-y-1 text-slate-700">
{% for konflikt in konflikte %}
@@ -27,6 +34,7 @@
<p class="mt-2 text-slate-600">Empfohlener Titel: <span class="font-medium">{{ titel_empfehlung }}</span></p>
{% endif %}
</div>
</div>
<form method="post" action="{{ aktion }}" class="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
{% for name, wert in versteckt.items() %}