Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rezepte: Listenbreite ziehbar, lange Namen brechen um

Browse Source 
Die Rezeptliste hing auf hoechstens 320px fest, und .btn ist nowrap - ein
Name wie "Cheesecake mit Streuseln und Fruchteinlage" lief damit einfach aus
der Spalte heraus und war abgeschnitten.

Jetzt sitzt zwischen Liste und Detail ein Griff zum Ziehen, Bedienung wie der
Spaltengriff der Tabellen (Zeiger-Ereignisse, col-resize). Die Breite wird
gemerkt und zwischen 180 und 640 Pixel gehalten: darunter ist die Liste
unlesbar, darueber bleibt fuer die Zutaten nichts mehr uebrig.

Dazu eine kleine Klasse .btn.umbruch, die das nowrap aufhebt - ein Knopf,
dessen Beschriftung umbrechen darf, ist auch anderswo brauchbar.

In der laufenden Oberflaeche nachgemessen: Ziehen um 120px ergibt genau 120px
mehr und landet im Speicher, die Grenzen klemmen bei 180 und 640, und der
lange Name braucht mit der Klasse zwei Zeilen (Text 372px bei 372px Spalte)
statt ueber den Rand zu laufen (434px).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-10-16 16:48:43 +02:00
co-authored by Claude Opus 5
parent 8de222072c
commit 9f5d0a2310
2 changed files with 60 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+15
View File
@@ -659,6 +659,21 @@ td select { width: auto; min-width: 0; max-width: 100%; }
.dt-th.sorted .dt-th-label { color: var(--accent); }
.dt-sort { font-size: 0.7em; flex: 0 0 auto; }
.dt-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
/* Griff zwischen zwei Spalten einer Seite (Rezepte: Liste | Detail). Gleiche
Bedienung wie der Spaltengriff der Tabelle, nur senkrecht durchgehend. */
.spalten-griff {
align-self: stretch; width: 8px; border-radius: 999px;
background: transparent; border: 0; padding: 0;
cursor: col-resize; touch-action: none;
}
.spalten-griff:hover, .spalten-griff:focus-visible { background: var(--accent-soft); }
/* Ein Knopf, dessen Beschriftung umbrechen darf - .btn ist sonst nowrap und
schneidet lange Namen ab. */
.btn.umbruch {
white-space: normal; text-align: left; height: auto; line-height: 1.35;
}
.dt-resize:hover { background: var(--accent-soft); }
.dt-filter td { padding: 4px 6px; vertical-align: middle; }
.dt-filter-cell { display: flex; gap: 2px; align-items: center; }