3 Commits
Author SHA1 Message Date
florian.wilde 9d4e419cd1 Merge #7: Titelraster auf eine feste Zeilenhoehe bringen
CI / pruefen (push) Canceled after 0s
Closes #2
2026-09-01 21:31:43 +00:00
Florian Wilde a853b066b5 Titelraster auf eine feste Zeilenhoehe bringen
CI / pruefen (pull_request) Canceled after 0s
Der Titelblock hatte mit line-clamp-2 zwar eine Ober-, aber keine
Untergrenze. Einzeilige Titel belegten dadurch 19 statt 39 Pixel, und alles
darunter rutschte um eine Zeilenhoehe nach oben — neben Karten mit
zweizeiligem Titel wirkte das Raster ausgefranst.

Der Titelblock bekommt jetzt mit min-h-[2lh] immer zwei Zeilen. Die Einheit
lh haengt an der tatsaechlichen Zeilenhoehe, damit der Wert nicht von einer
Aenderung an leading-snug abgehaengt wird.

In der Bibliothekskarte kam hinzu, dass der Fortschrittsbalken nur bei
Serien erscheint. Sein Platz wird jetzt auch dann freigehalten, wenn er
leer bleibt — als unsichtbarer Nachbau statt einer festen Pixelhoehe, damit
er sich von selbst nachzieht.

Nachgemessen bei 1400 px: Metazeilen einer Reihe liegen jetzt alle auf
derselben Oberkante (Suche 711 px, Bibliothek 715/1117/1520 px), und alle
Karten sind gleich hoch (353 bzw. 387 px). Vorher: 691 gegen 711 px und
Kartenhoehen von 333 bis 367 px. Bei Handybreite ebenfalls sauber.

Refs #2
2026-09-01 23:29:12 +02:00
Florian Wilde 4ad5b244bc fix: eigener Projektname fuer die Entwicklungsdatenbank
CI / pruefen (push) Canceled after 0s
Beide Compose-Dateien leiteten den Projektnamen aus dem Verzeichnis ab. Ein
'docker compose down -v' auf dem Produktivstack nahm dadurch das Volume der
Entwicklungsdatenbank mit — genau das ist beim Testen passiert.
2026-09-01 22:57:22 +02:00
3 changed files with 30 additions and 13 deletions
+6
View File
@@ -1,5 +1,11 @@
# Nur die Datenbank — die App läuft bei der Entwicklung direkt über `npm run dev`.
# docker compose -f docker-compose.dev.yml up -d
#
# Eigener Projektname: sonst teilt sich dieser Stack den Namen mit der
# Produktiv-Compose (beide leiten ihn sonst aus dem Verzeichnis ab), und ein
# `docker compose down -v` dort nimmt die Entwicklungsdatenbank mit.
name: flimmer-dev
services:
db:
image: postgres:17-alpine
+1 -1
View File
@@ -119,7 +119,7 @@ async function Results({ query, filter }: { query: string; filter: Filter }) {
>
<Poster path={item.posterPath} alt={item.title} size="w342" />
<div className="mt-2 space-y-0.5">
<p className="line-clamp-2 text-sm font-medium leading-snug group-hover:text-[var(--fl-text)]">
<p className="line-clamp-2 min-h-[2lh] text-sm font-medium leading-snug group-hover:text-[var(--fl-text)]">
{item.title}
</p>
<p className="text-xs text-[var(--fl-faint)]">
+23 -12
View File
@@ -63,7 +63,7 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
</div>
<div className="mt-2 space-y-1">
<p className="line-clamp-2 text-sm font-medium leading-snug">{item.title}</p>
<p className="line-clamp-2 min-h-[2lh] text-sm font-medium leading-snug">{item.title}</p>
<p className="text-xs text-[var(--fl-faint)]">
{item.type === "SERIES" ? "Serie" : "Film"}
{item.year ? ` · ${item.year}` : ""}
@@ -74,17 +74,28 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
: ""}
</p>
{showProgress && (
<div className="pt-0.5">
<ProgressBar
percent={item.percent}
label={`${item.watched} von ${item.total} Episoden gesehen`}
/>
<p className="mt-1 text-xs text-[var(--fl-faint)]">
{item.watched}/{item.total} Episoden
</p>
</div>
)}
<div className="pt-0.5">
{showProgress ? (
<>
<ProgressBar
percent={item.percent}
label={`${item.watched} von ${item.total} Episoden gesehen`}
/>
<p className="mt-1 text-xs text-[var(--fl-faint)]">
{item.watched}/{item.total} Episoden
</p>
</>
) : (
// Filme und Watchlist-Einträge haben keinen Balken. Der Platz wird
// trotzdem freigehalten — sonst fallen sie kürzer aus als Serien und
// das Raster franst reihenweise aus. Der Nachbau statt einer festen
// Pixelhöhe hält sich von selbst nach, wenn sich der Balken ändert.
<div className="invisible" aria-hidden>
<div className="fl-progress" />
<p className="mt-1 text-xs">&nbsp;</p>
</div>
)}
</div>
</div>
</Link>
);