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

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.
2026-08-24 16:54:56 +00:00
parent 20b84a8e1a
commit 96d6af8163
33 changed files with 1134 additions and 69 deletions
--- a/plugins/archiv/init.py
+++ b/plugins/archiv/init.py
@@ -71,6 +71,33 @@ def _tabelle_anlegen(conn) -> None:
    ArchivPlanung.__table__.create(conn, checkfirst=True)


+def _spalte_existiert(conn, tabelle: str, spalte: str) -> bool:
+    """Dialekt-agnostische Spaltenprüfung (PRAGMA bzw. information_schema)."""
+    if conn.dialect.name == "sqlite":
+        info = conn.exec_driver_sql(f"PRAGMA table_info({tabelle})").fetchall()
+        return any(zeile[1] == spalte for zeile in info)
+    existiert = conn.exec_driver_sql(
+        "SELECT column_name FROM information_schema.columns "
+        "WHERE table_name = :tabelle AND column_name = :spalte",
+        {"tabelle": tabelle, "spalte": spalte},
+    ).scalar()
+    return existiert is not None
+
+
+def _bild_url_spalten(conn) -> None:
+    """Migration 0002: Spalte bild_url in beiden Spiegel-Tabellen.
+
+    `ALTER TABLE … ADD COLUMN` mit nullable VARCHAR ohne Default ist
+    SQLite- und Postgres-portabel und erhält bestehende Zeilen.
+    """
+    for tabelle in ("archiv_neuheiten", "archiv_planung"):
+        if _spalte_existiert(conn, tabelle, "bild_url"):
+            continue
+        conn.exec_driver_sql(
+            f"ALTER TABLE {tabelle} ADD COLUMN bild_url VARCHAR(500)"
+        )
+
+
 class ArchivPlugin(BasePlugin):
    name = "archiv"
    title = "Archiv"
@@ -89,7 +116,10 @@ class ArchivPlugin(BasePlugin):
    # ---------- Plugin-Vertrag ----------

    def migrations(self) -> list[Migration]:
-        return [Migration(version="0001_archiv_tabellen", up=_tabelle_anlegen)]
+        return [
+            Migration(version="0001_archiv_tabellen", up=_tabelle_anlegen),
+            Migration(version="0002_bild_url", up=_bild_url_spalten),
+        ]

    def navigation(self) -> list[NavEntry]:
        return [NavEntry(label=self.title, url="/archiv")]
--- a/plugins/archiv/models.py
+++ b/plugins/archiv/models.py
@@ -63,6 +63,7 @@ class ArchivNeuheit(_ArchivMeta, Base):
    autor: Mapped[str | None] = mapped_column(String(300))
    erscheinungsjahr: Mapped[int | None] = mapped_column(Integer)
    bgg_id: Mapped[int | None] = mapped_column(Integer)
+    bild_url: Mapped[str | None] = mapped_column(String(500))
    status: Mapped[str] = mapped_column(String(50), default="neuheit")
    quelle: Mapped[str] = mapped_column(String(100), default="boardgamegeek")
    erstellt_am: Mapped[datetime | None] = mapped_column(DateTime)
@@ -83,6 +84,7 @@ class ArchivPlanung(_ArchivMeta, Base):
    verlag: Mapped[str | None] = mapped_column(String(300))
    autor: Mapped[str | None] = mapped_column(String(300))
    bgg_id: Mapped[int | None] = mapped_column(Integer)
+    bild_url: Mapped[str | None] = mapped_column(String(500))
    ausgabe: Mapped[str] = mapped_column(String(100), default="")
    #: Kein FK — Archiv-Zeilen überleben das Löschen des Benutzers.
    rezensent_id: Mapped[int | None] = mapped_column(Integer)
--- a/plugins/archiv/service.py
+++ b/plugins/archiv/service.py
@@ -201,6 +201,7 @@ class ArchivService:
                            autor=zeile["autor"],
                            erscheinungsjahr=zeile["erscheinungsjahr"],
                            bgg_id=zeile["bgg_id"],
+                            bild_url=zeile["bild_url"],
                            status=zeile["status"],
                            quelle=zeile["quelle"],
                            erstellt_am=zeile["erstellt_am"],
@@ -250,6 +251,7 @@ class ArchivService:
                            verlag=zeile["verlag"],
                            autor=zeile["autor"],
                            bgg_id=zeile["bgg_id"],
+                            bild_url=zeile["bild_url"],
                            ausgabe=zeile["ausgabe"],
                            rezensent_id=zeile["rezensent_id"],
                            status=zeile["status"],
@@ -305,6 +307,7 @@ class ArchivService:
                    "verlag": a.verlag,
                    "autor": a.autor,
                    "bgg_id": a.bgg_id,
+                    "bild_url": a.bild_url,
                    "jahr": a.erscheinungsjahr,
                    "ausgabe": "",
                    "status": a.status,
@@ -328,6 +331,7 @@ class ArchivService:
                    "verlag": a.verlag,
                    "autor": a.autor,
                    "bgg_id": a.bgg_id,
+                    "bild_url": a.bild_url,
                    "jahr": None,
                    "ausgabe": a.ausgabe,
                    "status": a.status,
@@ -409,6 +413,7 @@ class ArchivService:
                autor=archiv.autor,
                erscheinungsjahr=archiv.erscheinungsjahr,
                bgg_id=archiv.bgg_id,
+                bild_url=archiv.bild_url,
                status=archiv.status,
                quelle=archiv.quelle,
                erstellt_am=archiv.erstellt_am,
@@ -464,6 +469,7 @@ class ArchivService:
                verlag=archiv.verlag,
                autor=archiv.autor,
                bgg_id=archiv.bgg_id,
+                bild_url=archiv.bild_url,
                ausgabe=archiv.ausgabe,
                rezensent_id=rezensent_id,
                status=archiv.status,
--- a/plugins/archiv/templates/archiv/_cover.html
+++ b/plugins/archiv/templates/archiv/_cover.html
@@ -0,0 +1,24 @@
+{# Coverbild-Vorschau des Archiv-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 %}
--- a/plugins/archiv/templates/archiv/index.html
+++ b/plugins/archiv/templates/archiv/index.html
@@ -26,16 +26,16 @@
 {% endif %}

 <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
-  <form method="get" action="/archiv" class="flex flex-wrap items-end gap-3">
-    <div>
+  <form method="get" action="/archiv" 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="q" class="block text-xs font-medium text-slate-500 mb-1">Suche (Titel, Verlag, Autor)</label>
      <input type="text" id="q" name="q" value="{{ q }}"
-             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">
      <label for="quelle" class="block text-xs font-medium text-slate-500 mb-1">Herkunft</label>
      <select id="quelle" name="quelle"
-              class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
+              class="w-full sm:w-auto min-h-[44px] md:min-h-0 border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
              onchange="this.form.submit()">
        <option value="">Alle Listen</option>
        <option value="neuheiten" {% if quelle_filter == 'neuheiten' %}selected{% endif %}>Neuheiten</option>
@@ -43,7 +43,7 @@
      </select>
    </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">
      Suchen
    </button>
    {% if q or quelle_filter %}
@@ -54,10 +54,65 @@

 <p class="text-xs text-slate-400 mb-3">{{ anzahl }} Eintr&auml;ge im Archiv</p>

-<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 "archiv/_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 %}
+        </h3>
+        {% if eintrag.quelle == 'neuheiten' %}
+        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 text-xs">Neuheiten</span>
+        {% else %}
+        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-violet-100 text-violet-800 text-xs">Planung</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.jahr or eintrag.ausgabe %}<div><dt class="inline font-medium text-slate-400">Jahr/Ausgabe: </dt><dd class="inline">{{ eintrag.jahr if eintrag.jahr else eintrag.ausgabe }}</dd></div>{% endif %}
+        <div><dt class="inline font-medium text-slate-400">Status: </dt><dd class="inline">{{ status_anzeige.get(eintrag.status, eintrag.status) }}</dd></div>
+        <div>
+          <dt class="inline font-medium text-slate-400">Archiviert am: </dt>
+          <dd class="inline">{{ eintrag.archiviert_am.strftime('%d.%m.%Y %H:%M') if eintrag.archiviert_am else '—' }}</dd>
+        </div>
+        <div><dt class="inline font-medium text-slate-400">Grund: </dt><dd class="inline">{{ eintrag.grund }}</dd></div>
+      </dl>
+      <form method="post" action="/archiv/{{ eintrag.quelle }}/{{ eintrag.id }}/wiederherstellen" class="mt-2">
+        <button type="submit"
+                class="w-full min-h-[44px] inline-flex items-center justify-center gap-1 bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap"
+                title="Eintrag unverändert zurück in die aktive Liste verschieben">
+          &#8635; Wiederherstellen
+        </button>
+      </form>
+    </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">
+    {% if q or quelle_filter %}
+    Keine Treffer f&uuml;r diese Suche.
+    {% else %}
+    Das Archiv ist leer — nichts zu sehen.
+    {% endif %}
+  </li>
+  {% endfor %}
+</ul>
+
+<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">Herkunft</th>
        <th class="px-4 py-3 font-medium">Verlag</th>
@@ -72,6 +127,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 "archiv/_cover.html" %}
+        </td>
        <td class="px-4 py-3 font-medium">
          {{ eintrag.titel }}
          {% if eintrag.bgg_id %}
@@ -97,7 +157,7 @@
        <td class="px-4 py-3">
          <form method="post" action="/archiv/{{ eintrag.quelle }}/{{ eintrag.id }}/wiederherstellen">
            <button type="submit"
-                    class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2.5 py-1.5 rounded-lg whitespace-nowrap"
+                    class="text-xs bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-2.5 py-2 rounded-lg whitespace-nowrap"
                    title="Eintrag unverändert zurück in die aktive Liste verschieben">
              &#8635; Wiederherstellen
            </button>
@@ -106,7 +166,7 @@
      </tr>
      {% else %}
      <tr>
-        <td colspan="9" class="px-4 py-8 text-center text-slate-400">
+        <td colspan="10" class="px-4 py-8 text-center text-slate-400">
          {% if q or quelle_filter %}
          Keine Treffer f&uuml;r diese Suche.
          {% else %}