Docker/kleiderboerse
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Hell/Dunkel-Umschaltung und Versionsangabe in der Fusszeile

Browse Source 
Farbschema folgt zunächst der Systemeinstellung, lässt sich per Knopf in
der Kopfzeile umstellen und wird dann gemerkt. Bei gesperrtem Speicher
(privates Fenster) greift wieder die Systemeinstellung.

theme.js steht bewusst OHNE defer und vor dem Inhalt: es setzt die
Farbklasse, bevor gezeichnet wird. Mit defer blitzte beim Laden kurz die
helle Fassung auf. Eine eigene Datei statt eines <script>-Blocks, weil die
CSP nur script-src 'self' erlaubt - inline wäre blockiert.

Fusszeile zeigt Version oder Commit, gleiches Muster wie die Kantone-App:
die CI reicht beides als Build-Argument durch, lokal erscheint der
Build-Zeitpunkt. Der ändert sich bei jedem Neubau und zeigt damit sofort,
ob wirklich der neue Stand läuft.

Beim Ergänzen der Dunkel-Varianten hatte mein Ersetzer die eben
eingefügten dark:-Klassen selbst nochmal getroffen und daraus Paare wie
"dark:text-slate-300 dark:text-slate-600" gemacht - bereinigt.

81 Tests, alle grün. Neu darunter: die Fusszeile zeigt Tag bzw. Commit,
theme.js steht vor <body> und ohne defer, der Umschalter ist da.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GR4bNaj9GtRu57J4Niii8o
This commit is contained in:
Stefan
2026-08-29 23:35:35 +02:00
co-authored by Claude Opus 5
parent 75b95b38e6
commit adedaa9a0d
17 changed files with 218 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+10
View File
@@ -40,9 +40,19 @@ ENV DATABASE_PATH=/data/kleiderboerse.sqlite \
UPLOAD_PATH=/uploads \ UPLOAD_PATH=/uploads \
PYTHONUNBUFFERED=1 PYTHONUNBUFFERED=1
# Versionsangabe für die Fusszeile. Die CI reicht Tag und Commit durch;
# lokal bleiben beide leer und es erscheint der Build-Zeitpunkt - der
# ändert sich bei jedem Neubau und zeigt so, ob der neue Stand läuft.
ARG APP_VERSION=""
ARG APP_REVISION=""
ENV APP_VERSION="$APP_VERSION" \
APP_REVISION="$APP_REVISION"
# Nicht als root laufen. Die beiden Verzeichnisse gehören dem Dienstbenutzer, # Nicht als root laufen. Die beiden Verzeichnisse gehören dem Dienstbenutzer,
# der Code dagegen root - so kann der Webdienst seinen eigenen Code nicht # der Code dagegen root - so kann der Webdienst seinen eigenen Code nicht
# überschreiben. # überschreiben.
RUN date -u '+%d.%m.%Y %H:%M UTC' > /app/build.txt
RUN useradd --system --create-home --shell /usr/sbin/nologin kleider \ RUN useradd --system --create-home --shell /usr/sbin/nologin kleider \
&& mkdir -p /data /uploads \ && mkdir -p /data /uploads \
&& chown kleider:kleider /data /uploads && chown kleider:kleider /data /uploads
app/routers/pages.py
+2
View File
@@ -21,6 +21,7 @@ from app.config import einstellungen
from app.database import get_db from app.database import get_db
from app.models import Item, Status from app.models import Item, Status
from app.schemas import ItemAendern, ItemAnlegen from app.schemas import ItemAendern, ItemAnlegen
from app.version import version_info
router = APIRouter(include_in_schema=False) router = APIRouter(include_in_schema=False)
@@ -63,6 +64,7 @@ def _umgebung(request: Request, db: Session, **extra) -> dict:
"zustand_text": lambda w: ZUSTAND_TEXT.get(w, w), "zustand_text": lambda w: ZUSTAND_TEXT.get(w, w),
"saison_text": lambda w: SAISON_TEXT.get(w, w), "saison_text": lambda w: SAISON_TEXT.get(w, w),
"groesse_text": _groesse_text, "groesse_text": _groesse_text,
"version": version_info(),
"meldung": request.query_params.get("meldung"), "meldung": request.query_params.get("meldung"),
"meldung_art": request.query_params.get("art", "ok"), "meldung_art": request.query_params.get("art", "ok"),
**extra, **extra,
app/static/theme.js
+50
View File
@@ -0,0 +1,50 @@
/* Hell/Dunkel umschalten.
*
* Diese Datei wird im <head> OHNE defer eingebunden. Das ist Absicht: sie
* muss laufen, bevor der Seiteninhalt gezeichnet wird, sonst blitzt beim
* Laden kurz die helle Fassung auf, obwohl dunkel eingestellt ist.
*
* Eine eigene Datei statt eines <script>-Blocks in der Seite, weil die CSP
* nur script-src 'self' erlaubt - Inline-Skripte wären blockiert.
*/
(function () {
var GESPEICHERT = "farbschema";
function gewuenscht() {
try {
var wahl = localStorage.getItem(GESPEICHERT);
if (wahl === "hell" || wahl === "dunkel") return wahl;
} catch (e) {
/* Gesperrter Speicher (privates Fenster) - dann eben das System. */
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dunkel" : "hell";
}
function anwenden(schema) {
document.documentElement.classList.toggle("dark", schema === "dunkel");
}
anwenden(gewuenscht());
// Wer nichts eingestellt hat, folgt weiter dem System - auch wenn es
// sich zur Laufzeit ändert (z.B. abends automatisch).
window.matchMedia("(prefers-color-scheme: dark)").addEventListener(
"change", function () {
var wahl = null;
try { wahl = localStorage.getItem(GESPEICHERT); } catch (e) { /* egal */ }
if (!wahl) anwenden(gewuenscht());
}
);
document.addEventListener("DOMContentLoaded", function () {
var knopf = document.getElementById("schema-knopf");
if (!knopf) return;
knopf.addEventListener("click", function () {
var neu = document.documentElement.classList.contains("dark")
? "hell" : "dunkel";
anwenden(neu);
try { localStorage.setItem(GESPEICHERT, neu); } catch (e) { /* egal */ }
});
});
})();
app/templates/_felder.html
+3 -3
View File
@@ -7,11 +7,11 @@
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div class="col-span-2"> <div class="col-span-2">
<label class="etikett" for="title">Titel <span class="font-normal text-slate-400">(freiwillig)</span></label> <label class="etikett" for="title">Titel <span class="font-normal text-slate-400 dark:text-slate-500">(freiwillig)</span></label>
<input class="feld" id="title" name="title" maxlength="100" <input class="feld" id="title" name="title" maxlength="100"
value="{{ vorgabe.title or '' if vorgabe else '' }}" value="{{ vorgabe.title or '' if vorgabe else '' }}"
placeholder="{{ platzhalter_titel }}"> placeholder="{{ platzhalter_titel }}">
<p class="text-xs text-slate-500 mt-1"> <p class="text-xs text-slate-500 dark:text-slate-400 dark:text-slate-500 mt-1">
Leer lassen genügt – dann steht dort automatisch Kategorie und Grösse. Leer lassen genügt – dann steht dort automatisch Kategorie und Grösse.
</p> </p>
</div> </div>
@@ -74,7 +74,7 @@
</div> </div>
<div class="col-span-2"> <div class="col-span-2">
<label class="etikett" for="description">Bemerkung <span class="font-normal text-slate-400">(freiwillig)</span></label> <label class="etikett" for="description">Bemerkung <span class="font-normal text-slate-400 dark:text-slate-500">(freiwillig)</span></label>
<textarea class="feld py-2" id="description" name="description" rows="2" <textarea class="feld py-2" id="description" name="description" rows="2"
placeholder="z.B. kleiner Fleck am Ärmel">{{ vorgabe.description or '' if vorgabe else '' }}</textarea> placeholder="z.B. kleiner Fleck am Ärmel">{{ vorgabe.description or '' if vorgabe else '' }}</textarea>
</div> </div>
app/templates/_kachel.html
+5 -5
View File
@@ -1,30 +1,30 @@
{# Eine Kachel in der Galerie. Eigene Datei, weil HTMX beim Filtern nur die {# Eine Kachel in der Galerie. Eigene Datei, weil HTMX beim Filtern nur die
Liste austauscht und dieselbe Darstellung braucht. #} Liste austauscht und dieselbe Darstellung braucht. #}
<a href="/kleid/{{ item.id }}" class="karte block group"> <a href="/kleid/{{ item.id }}" class="karte block group">
<div class="aspect-[3/4] bg-slate-100"> <div class="aspect-[3/4] bg-slate-100 dark:bg-slate-700">
{% if item.hauptbild %} {% if item.hauptbild %}
<img src="/uploads/{{ item.hauptbild.image_url }}" <img src="/uploads/{{ item.hauptbild.image_url }}"
alt="{{ item.anzeige_titel }}" loading="lazy" alt="{{ item.anzeige_titel }}" loading="lazy"
class="w-full h-full object-cover"> class="w-full h-full object-cover">
{% else %} {% else %}
<div class="w-full h-full grid place-items-center text-slate-300 text-sm"> <div class="w-full h-full grid place-items-center text-slate-300 dark:text-slate-600 text-sm">
kein Bild kein Bild
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="p-3"> <div class="p-3">
<p class="font-semibold leading-tight">{{ item.anzeige_titel }}</p> <p class="font-semibold leading-tight">{{ item.anzeige_titel }}</p>
<p class="text-sm text-slate-500 mt-1"> <p class="text-sm text-slate-500 dark:text-slate-400 dark:text-slate-500 mt-1">
{{ groesse_text(item) }} {{ groesse_text(item) }}
</p> </p>
{% if item.status == 'reserved' %} {% if item.status == 'reserved' %}
{# Bewusst ohne Namen: die Galerie ist öffentlich, der Name steht {# Bewusst ohne Namen: die Galerie ist öffentlich, der Name steht
nur in der Verwaltung. #} nur in der Verwaltung. #}
<span class="inline-block mt-2 text-xs font-semibold rounded-full <span class="inline-block mt-2 text-xs font-semibold rounded-full
px-2 py-0.5 bg-amber-100 text-amber-900">reserviert</span> px-2 py-0.5 bg-amber-100 dark:bg-amber-900 text-amber-900 dark:text-amber-100">reserviert</span>
{% elif item.status == 'given_away' %} {% elif item.status == 'given_away' %}
<span class="inline-block mt-2 text-xs font-semibold rounded-full <span class="inline-block mt-2 text-xs font-semibold rounded-full
px-2 py-0.5 bg-slate-200 text-slate-600">abgegeben</span> px-2 py-0.5 bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300">abgegeben</span>
{% endif %} {% endif %}
</div> </div>
</a> </a>
app/templates/_liste.html
+2 -2
View File
@@ -2,7 +2,7 @@
statt die ganze Seite neu zu laden. #} statt die ganze Seite neu zu laden. #}
<div id="liste"> <div id="liste">
{% if items %} {% if items %}
<p class="text-sm text-slate-500 mb-3">{{ gesamt }} Stück</p> <p class="text-sm text-slate-500 dark:text-slate-400 dark:text-slate-500 mb-3">{{ gesamt }} Stück</p>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3"> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
{% for item in items %}{% include "_kachel.html" %}{% endfor %} {% for item in items %}{% include "_kachel.html" %}{% endfor %}
</div> </div>
@@ -18,7 +18,7 @@
</div> </div>
{% endif %} {% endif %}
{% else %} {% else %}
<p class="text-center text-slate-500 py-12"> <p class="text-center text-slate-500 dark:text-slate-400 dark:text-slate-500 py-12">
Hier ist gerade nichts. Vielleicht mit einem anderen Filter? Hier ist gerade nichts. Vielleicht mit einem anderen Filter?
</p> </p>
{% endif %} {% endif %}
app/templates/anmelden.html
+1 -1
View File
@@ -10,7 +10,7 @@
autocomplete="current-password"> autocomplete="current-password">
</div> </div>
<button class="knopf-haupt w-full">Anmelden</button> <button class="knopf-haupt w-full">Anmelden</button>
<p class="text-xs text-slate-500"> <p class="text-xs text-slate-500 dark:text-slate-400 dark:text-slate-500">
Nur zum Erfassen nötig. Stöbern und Reservieren geht ohne. Nur zum Erfassen nötig. Stöbern und Reservieren geht ohne.
</p> </p>
</form> </form>
app/templates/basis.html
+25 -8
View File
@@ -4,18 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="color-scheme" content="light dark">
<title>{% block titel %}Kinderkleider-Börse{% endblock %}</title> <title>{% block titel %}Kinderkleider-Börse{% endblock %}</title>
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
{# Bewusst OHNE defer und vor dem Inhalt: das Skript setzt die
Farbklasse, bevor gezeichnet wird. Mit defer blitzte beim Laden
kurz die helle Fassung auf. #}
<script src="/static/theme.js"></script>
{# Lokal ausgeliefert, nicht vom CDN: die CSP erlaubt nur script-src {# Lokal ausgeliefert, nicht vom CDN: die CSP erlaubt nur script-src
'self', und ein CDN-Aufruf gäbe zudem die IP jedes Besuchers weiter. #} 'self', und ein CDN-Aufruf gäbe die IP jedes Besuchers weiter. #}
<script src="/static/htmx.min.js" defer></script> <script src="/static/htmx.min.js" defer></script>
</head> </head>
<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col"> <body class="bg-slate-50 text-slate-900 dark:bg-slate-900 dark:text-slate-100
min-h-screen flex flex-col">
<header class="bg-white border-b border-slate-200 sticky top-0 z-20"> <header class="bg-white dark:bg-slate-800 border-b border-slate-200
dark:border-slate-700 sticky top-0 z-20">
<div class="max-w-5xl mx-auto px-4 h-14 flex items-center gap-3"> <div class="max-w-5xl mx-auto px-4 h-14 flex items-center gap-3">
<a href="/" class="font-bold text-marke-700 text-lg">Kleider-Börse</a> <a href="/" class="font-bold text-marke-700 dark:text-marke-100 text-lg">
Kleider-Börse</a>
<nav class="ml-auto flex items-center gap-2 text-sm"> <nav class="ml-auto flex items-center gap-2 text-sm">
{% if betreiber %} {% if betreiber %}
<a href="/erfassen" class="knopf-still">Erfassen</a> <a href="/erfassen" class="knopf-still">Erfassen</a>
@@ -33,6 +41,12 @@
{% else %} {% else %}
<a href="/anmelden" class="knopf-still">Anmelden</a> <a href="/anmelden" class="knopf-still">Anmelden</a>
{% endif %} {% endif %}
<button id="schema-knopf" type="button" class="knopf-still !px-3"
aria-label="Zwischen hell und dunkel wechseln" title="Hell / dunkel">
<span class="dark:hidden" aria-hidden="true">🌙</span>
<span class="hidden dark:inline" aria-hidden="true">☀️</span>
</button>
</nav> </nav>
</div> </div>
</header> </header>
@@ -40,14 +54,17 @@
<main class="flex-1 w-full max-w-5xl mx-auto px-4 py-5"> <main class="flex-1 w-full max-w-5xl mx-auto px-4 py-5">
{% if meldung %} {% if meldung %}
<p class="mb-4 rounded-xl px-4 py-3 text-sm <p class="mb-4 rounded-xl px-4 py-3 text-sm
{{ 'bg-emerald-100 text-emerald-900' if meldung_art == 'ok' {{ 'bg-emerald-100 text-emerald-900 dark:bg-emerald-900 dark:text-emerald-100'
else 'bg-rose-100 text-rose-900' }}">{{ meldung }}</p> if meldung_art == 'ok'
else 'bg-rose-100 text-rose-900 dark:bg-rose-900 dark:text-rose-100' }}">
{{ meldung }}</p>
{% endif %} {% endif %}
{% block inhalt %}{% endblock %} {% block inhalt %}{% endblock %}
</main> </main>
<footer class="text-center text-xs text-slate-400 py-6"> <footer class="text-center text-xs text-slate-400 dark:text-slate-500 py-6">
Kinderkleider-Börse Kinderkleider-Börse ·
<span title="{{ version.titel }}">{{ version.label }}</span>
</footer> </footer>
</body> </body>
</html> </html>
app/templates/bearbeiten.html
+1 -1
View File
@@ -21,7 +21,7 @@
</div> </div>
{% endif %} {% endif %}
{% else %} {% else %}
<div class="aspect-[3/4] grid place-items-center text-slate-300">kein Bild</div> <div class="aspect-[3/4] grid place-items-center text-slate-300 dark:text-slate-600">kein Bild</div>
{% endif %} {% endif %}
</div> </div>
app/templates/detail.html
+14 -14
View File
@@ -2,7 +2,7 @@
{% block titel %}{{ item.anzeige_titel }}{% endblock %} {% block titel %}{{ item.anzeige_titel }}{% endblock %}
{% block inhalt %} {% block inhalt %}
<a href="/" class="text-sm text-marke-700 font-semibold">&larr; Übersicht</a> <a href="/" class="text-sm text-marke-700 dark:text-marke-100 font-semibold">&larr; Übersicht</a>
<div class="mt-3 grid md:grid-cols-2 gap-5"> <div class="mt-3 grid md:grid-cols-2 gap-5">
<div class="karte"> <div class="karte">
@@ -18,7 +18,7 @@
</div> </div>
{% endif %} {% endif %}
{% else %} {% else %}
<div class="aspect-[3/4] grid place-items-center text-slate-300"> <div class="aspect-[3/4] grid place-items-center text-slate-300 dark:text-slate-600">
kein Bild kein Bild
</div> </div>
{% endif %} {% endif %}
@@ -27,20 +27,20 @@
<div> <div>
<h1 class="text-2xl font-bold">{{ item.anzeige_titel }}</h1> <h1 class="text-2xl font-bold">{{ item.anzeige_titel }}</h1>
<dl class="mt-4 grid grid-cols-2 gap-3 text-sm"> <dl class="mt-4 grid grid-cols-2 gap-3 text-sm">
<div><dt class="text-slate-500">Grösse</dt> <div><dt class="text-slate-500 dark:text-slate-400 dark:text-slate-500">Grösse</dt>
<dd class="font-semibold">{{ item.size or '–' }}</dd></div> <dd class="font-semibold">{{ item.size or '–' }}</dd></div>
<div><dt class="text-slate-500">Kategorie</dt> <div><dt class="text-slate-500 dark:text-slate-400 dark:text-slate-500">Kategorie</dt>
<dd class="font-semibold">{{ item.kategorie.name if item.kategorie else '–' }}</dd></div> <dd class="font-semibold">{{ item.kategorie.name if item.kategorie else '–' }}</dd></div>
<div><dt class="text-slate-500">Für</dt> <div><dt class="text-slate-500 dark:text-slate-400 dark:text-slate-500">Für</dt>
<dd class="font-semibold">{{ geschlecht_text(item.gender) }}</dd></div> <dd class="font-semibold">{{ geschlecht_text(item.gender) }}</dd></div>
<div><dt class="text-slate-500">Zustand</dt> <div><dt class="text-slate-500 dark:text-slate-400 dark:text-slate-500">Zustand</dt>
<dd class="font-semibold">{{ zustand_text(item.condition) }}</dd></div> <dd class="font-semibold">{{ zustand_text(item.condition) }}</dd></div>
<div><dt class="text-slate-500">Saison</dt> <div><dt class="text-slate-500 dark:text-slate-400 dark:text-slate-500">Saison</dt>
<dd class="font-semibold">{{ saison_text(item.season) }}</dd></div> <dd class="font-semibold">{{ saison_text(item.season) }}</dd></div>
</dl> </dl>
{% if item.description %} {% if item.description %}
<p class="mt-4 text-slate-700 whitespace-pre-line">{{ item.description }}</p> <p class="mt-4 text-slate-700 dark:text-slate-200 whitespace-pre-line">{{ item.description }}</p>
{% endif %} {% endif %}
<div class="mt-6"> <div class="mt-6">
@@ -53,18 +53,18 @@
maxlength="100" autocomplete="name" maxlength="100" autocomplete="name"
placeholder="z.B. Familie Meier"> placeholder="z.B. Familie Meier">
<button class="knopf-haupt w-full">Reservieren</button> <button class="knopf-haupt w-full">Reservieren</button>
<p class="text-xs text-slate-500"> <p class="text-xs text-slate-500 dark:text-slate-400 dark:text-slate-500">
Du bekommst danach einen Link, mit dem du die Reservierung Du bekommst danach einen Link, mit dem du die Reservierung
selbst wieder aufheben kannst. selbst wieder aufheben kannst.
</p> </p>
</form> </form>
{% elif item.status == 'reserved' %} {% elif item.status == 'reserved' %}
<p class="rounded-xl bg-amber-100 text-amber-900 px-4 py-3"> <p class="rounded-xl bg-amber-100 dark:bg-amber-900 text-amber-900 dark:text-amber-100 px-4 py-3">
Ist bereits reserviert. Ist bereits reserviert.
</p> </p>
{% if betreiber %} {% if betreiber %}
<p class="mt-2 text-sm text-slate-600"> <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
Reserviert von: <strong>{{ item.reserved_by }}</strong> Reserviert von: <strong>{{ item.reserved_by }}</strong>
</p> </p>
<form method="post" action="/kleid/{{ item.id }}/freigeben" class="mt-2"> <form method="post" action="/kleid/{{ item.id }}/freigeben" class="mt-2">
@@ -74,14 +74,14 @@
{% endif %} {% endif %}
{% elif item.status == 'given_away' %} {% elif item.status == 'given_away' %}
<p class="rounded-xl bg-slate-200 text-slate-700 px-4 py-3"> <p class="rounded-xl bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 px-4 py-3">
Schon abgegeben. Schon abgegeben.
</p> </p>
{% endif %} {% endif %}
</div> </div>
{% if betreiber %} {% if betreiber %}
<div class="mt-6 border-t border-slate-200 pt-4 flex flex-wrap gap-2"> <div class="mt-6 border-t border-slate-200 dark:border-slate-700 pt-4 flex flex-wrap gap-2">
<a href="/kleid/{{ item.id }}/bearbeiten" class="knopf-still">Bearbeiten</a> <a href="/kleid/{{ item.id }}/bearbeiten" class="knopf-still">Bearbeiten</a>
{% if item.status == 'reserved' %} {% if item.status == 'reserved' %}
<form method="post" action="/kleid/{{ item.id }}/abgegeben"> <form method="post" action="/kleid/{{ item.id }}/abgegeben">
@@ -92,7 +92,7 @@
<form method="post" action="/kleid/{{ item.id }}/loeschen" <form method="post" action="/kleid/{{ item.id }}/loeschen"
onsubmit="return confirm('Wirklich löschen? Auch die Fotos werden entfernt.')"> onsubmit="return confirm('Wirklich löschen? Auch die Fotos werden entfernt.')">
<input type="hidden" name="csrf" value="{{ csrf }}"> <input type="hidden" name="csrf" value="{{ csrf }}">
<button class="knopf-still text-rose-700">Löschen</button> <button class="knopf-still text-rose-700 dark:text-rose-400">Löschen</button>
</form> </form>
</div> </div>
{% endif %} {% endif %}
app/templates/entwuerfe.html
+5 -5
View File
@@ -3,7 +3,7 @@
{% block inhalt %} {% block inhalt %}
<h1 class="text-xl font-bold">Unfertige Einträge ({{ gesamt }})</h1> <h1 class="text-xl font-bold">Unfertige Einträge ({{ gesamt }})</h1>
<p class="text-sm text-slate-600 mt-1 mb-5"> <p class="text-sm text-slate-600 dark:text-slate-300 mt-1 mb-5">
Aus dem Stapel-Import. Erst wenn Grösse und Kategorie eingetragen sind, Aus dem Stapel-Import. Erst wenn Grösse und Kategorie eingetragen sind,
erscheint ein Teil in der Galerie. erscheint ein Teil in der Galerie.
</p> </p>
@@ -12,19 +12,19 @@
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3"> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
{% for item in items %} {% for item in items %}
<a href="/kleid/{{ item.id }}/bearbeiten" class="karte block"> <a href="/kleid/{{ item.id }}/bearbeiten" class="karte block">
<div class="aspect-[3/4] bg-slate-100"> <div class="aspect-[3/4] bg-slate-100 dark:bg-slate-700">
{% if item.hauptbild %} {% if item.hauptbild %}
<img src="/uploads/{{ item.hauptbild.image_url }}" alt="" <img src="/uploads/{{ item.hauptbild.image_url }}" alt=""
loading="lazy" class="w-full h-full object-cover"> loading="lazy" class="w-full h-full object-cover">
{% endif %} {% endif %}
</div> </div>
<p class="p-3 text-sm font-semibold text-marke-700">Nachtragen &rarr;</p> <p class="p-3 text-sm font-semibold text-marke-700 dark:text-marke-100">Nachtragen &rarr;</p>
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
{% else %} {% else %}
<p class="text-center text-slate-500 py-12"> <p class="text-center text-slate-500 dark:text-slate-400 dark:text-slate-500 py-12">
Nichts offen. <a href="/erfassen" class="text-marke-700 font-semibold">Neue Fotos hochladen</a> Nichts offen. <a href="/erfassen" class="text-marke-700 dark:text-marke-100 font-semibold">Neue Fotos hochladen</a>
</p> </p>
{% endif %} {% endif %}
app/templates/erfassen.html
+2 -2
View File
@@ -10,7 +10,7 @@
class="karte p-4 space-y-3"> class="karte p-4 space-y-3">
<input type="hidden" name="csrf" value="{{ csrf }}"> <input type="hidden" name="csrf" value="{{ csrf }}">
<h2 class="font-semibold">Viele auf einmal</h2> <h2 class="font-semibold">Viele auf einmal</h2>
<p class="text-sm text-slate-600"> <p class="text-sm text-slate-600 dark:text-slate-300">
Erst alles mit der Kamera fotografieren, dann hier alle Fotos Erst alles mit der Kamera fotografieren, dann hier alle Fotos
zusammen auswählen. Pro Foto entsteht ein Entwurf, die Angaben zusammen auswählen. Pro Foto entsteht ein Entwurf, die Angaben
trägst du danach in Ruhe nach. trägst du danach in Ruhe nach.
@@ -21,7 +21,7 @@
<button class="knopf-haupt w-full">Fotos hochladen</button> <button class="knopf-haupt w-full">Fotos hochladen</button>
</form> </form>
<p class="text-center text-sm text-slate-500 my-5">oder einzeln erfassen</p> <p class="text-center text-sm text-slate-500 dark:text-slate-400 dark:text-slate-500 my-5">oder einzeln erfassen</p>
<form method="post" action="/erfassen" enctype="multipart/form-data" <form method="post" action="/erfassen" enctype="multipart/form-data"
class="karte p-4 space-y-4"> class="karte p-4 space-y-4">
app/templates/reserviert.html
+2 -2
View File
@@ -3,7 +3,7 @@
{% block inhalt %} {% block inhalt %}
<div class="max-w-lg mx-auto karte p-6 text-center"> <div class="max-w-lg mx-auto karte p-6 text-center">
<h1 class="text-xl font-bold">Reserviert für dich</h1> <h1 class="text-xl font-bold">Reserviert für dich</h1>
<p class="mt-2 text-slate-600"> <p class="mt-2 text-slate-600 dark:text-slate-300">
<strong>{{ item.anzeige_titel }}</strong> ist jetzt für dich zurückgelegt. <strong>{{ item.anzeige_titel }}</strong> ist jetzt für dich zurückgelegt.
</p> </p>
@@ -13,7 +13,7 @@
zurückgenommen werden, ohne dass jemand ein Konto braucht. #} zurückgenommen werden, ohne dass jemand ein Konto braucht. #}
<input class="feld text-xs" readonly value="{{ freigabe_url }}" <input class="feld text-xs" readonly value="{{ freigabe_url }}"
onclick="this.select()"> onclick="this.select()">
<p class="text-xs text-slate-500 mt-2"> <p class="text-xs text-slate-500 dark:text-slate-400 dark:text-slate-500 mt-2">
Ohne diesen Link kannst du die Reservierung nicht selbst aufheben – Ohne diesen Link kannst du die Reservierung nicht selbst aufheben –
dann hilft nur eine kurze Nachricht. dann hilft nur eine kurze Nachricht.
</p> </p>
app/version.py
+33
View File
@@ -0,0 +1,33 @@
"""Versionsangabe für die Fusszeile.
Gleiche Idee wie in der Kantone-App: die CI reicht Tag und Commit als
Build-Argumente durch. Lokal bleiben beide leer, dann erscheint der
Build-Zeitpunkt - der ändert sich bei jedem Neubau und zeigt damit sofort,
ob wirklich der neue Stand läuft.
"""
import os
from functools import lru_cache
from pathlib import Path
BUILD_DATEI = Path("/app/build.txt")
@lru_cache
def version_info() -> dict[str, str]:
version = os.getenv("APP_VERSION", "").strip()
revision = os.getenv("APP_REVISION", "").strip()
if version:
return {"art": "release", "label": f"Version {version}",
"titel": f"Commit {revision[:7]}" if revision else ""}
if revision:
return {"art": "commit", "label": f"Commit {revision[:7]}",
"titel": "Kein Release - aus einem einzelnen Commit gebaut"}
build = ""
if BUILD_DATEI.is_file():
build = BUILD_DATEI.read_text(encoding="utf-8").strip()
return {"art": "lokal", "label": build or "Entwicklungsstand",
"titel": "Lokal gebaut, ohne Versionsangabe"}
tailwind-input.css
+18 -5
View File
@@ -9,13 +9,26 @@
@apply inline-flex items-center justify-center gap-2 min-h-[44px] @apply inline-flex items-center justify-center gap-2 min-h-[44px]
px-4 rounded-xl font-semibold transition; px-4 rounded-xl font-semibold transition;
} }
.knopf-haupt { @apply knopf bg-marke-700 text-white hover:bg-marke-800; } .knopf-haupt {
.knopf-still { @apply knopf bg-slate-100 text-slate-700 hover:bg-slate-200; } @apply knopf bg-marke-700 text-white hover:bg-marke-800
dark:bg-marke-600 dark:hover:bg-marke-700;
}
.knopf-still {
@apply knopf bg-slate-100 text-slate-700 hover:bg-slate-200
dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600;
}
.feld { .feld {
@apply w-full min-h-[44px] px-3 rounded-xl border border-slate-300 @apply w-full min-h-[44px] px-3 rounded-xl border border-slate-300
bg-white text-slate-900 focus:outline-none focus:ring-2 bg-white text-slate-900 focus:outline-none focus:ring-2
focus:ring-marke-600; focus:ring-marke-600
dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100;
}
.etikett {
@apply block text-sm font-medium text-slate-600 mb-1
dark:text-slate-300;
}
.karte {
@apply bg-white rounded-2xl shadow-sm overflow-hidden
dark:bg-slate-800;
} }
.etikett { @apply block text-sm font-medium text-slate-600 mb-1; }
.karte { @apply bg-white rounded-2xl shadow-sm overflow-hidden; }
} }
tailwind.config.js
+3
View File
@@ -4,6 +4,9 @@
* app/static/style.css und ist darum nicht im Repository. * app/static/style.css und ist darum nicht im Repository.
*/ */
module.exports = { module.exports = {
// Umschaltbar per Klasse am <html>, gesetzt von app/static/theme.js.
// Nicht "media": sonst liesse sich nur dem System folgen, ohne eigene Wahl.
darkMode: "class",
content: ["./app/templates/**/*.html"], content: ["./app/templates/**/*.html"],
theme: { theme: {
extend: { extend: {
tests/test_seiten.py
+42
View File
@@ -221,3 +221,45 @@ def test_seiten_laden_nichts_von_fremden_servern(client, kategorie_id):
html = client.get(pfad).text html = client.get(pfad).text
fremde = re.findall(r'(?:src|href)="(?:https?:)?//[^"]+"', html) fremde = re.findall(r'(?:src|href)="(?:https?:)?//[^"]+"', html)
assert not fremde, f"{pfad} lädt von aussen: {fremde}" assert not fremde, f"{pfad} lädt von aussen: {fremde}"
# --------------------------------------------------------- Darstellung ---
def test_fusszeile_zeigt_die_version(client, monkeypatch):
"""Die CI reicht Tag und Commit durch; lokal steht der Build-Zeitpunkt."""
from app.version import version_info
version_info.cache_clear()
monkeypatch.setenv("APP_VERSION", "1.2.3")
monkeypatch.setenv("APP_REVISION", "abcdef1234567")
try:
assert "Version 1.2.3" in client.get("/").text
finally:
version_info.cache_clear()
def test_ohne_tag_erscheint_der_commit(client, monkeypatch):
from app.version import version_info
version_info.cache_clear()
monkeypatch.setenv("APP_VERSION", "")
monkeypatch.setenv("APP_REVISION", "abcdef1234567")
try:
assert "Commit abcdef1" in client.get("/").text
finally:
version_info.cache_clear()
def test_farbschema_skript_laeuft_vor_dem_zeichnen(client):
"""Ohne das blitzt beim Laden kurz die helle Fassung auf."""
html = client.get("/").text
theme = html.index('src="/static/theme.js"')
koerper = html.index("<body")
assert theme < koerper, "theme.js muss vor <body> stehen"
# und darf nicht verzögert werden
zeile = html[html.rindex("<script", 0, theme):html.index(">", theme) + 1]
assert "defer" not in zeile and "async" not in zeile
def test_umschalter_ist_vorhanden(client):
assert 'id="schema-knopf"' in client.get("/").text