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

Karten-Darstellung der Tabellen entzerrt, Erklaerungen als Tooltip

Browse Source 
Tabellen (Uebersicht, Einheiten, Kategorien):
Wird der Container schmal, stellen sich Tabellen auf Karten um. Dort trennte
"space-between" Beschriftung und Wert an die beiden Zeilenenden - der Wert stand
weit rechts und wirkte durch die unterschiedlichen Zeilenhoehen nicht auf einer
Linie. Jetzt zwei feste Spalten (Beschriftung, Wert direkt daneben) mit
Ausrichtung an der Schriftlinie. Zahlenspalten stehen in der Karte linksbuendig.

Artikelseite:
Die Erklaerungen unter "MHD-Angabe", "Gruppe" und "Kategorie" standen dauerhaft
im Formular und machten es lang. Sie haengen jetzt als Tooltip an der
Beschriftung; eine gepunktete Linie zeigt an, dass dort eine Erklaerung steht.
(Kategorie hatte denselben Text-Block - der Einheitlichkeit halber mit
umgestellt.)

Geprueft: "npm run build" laeuft durch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-23 07:59:52 +02:00
parent 32d49b47bd
commit e4e22c7822
3 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/styles.css
View File

@@ -266,6 +266,11 @@ td select { width: auto; min-width: 0; max-width: 100%; }
/* Zelle mit Eingabe plus Kennzeichen (z.B. "niedrig"): eine Zeile, damit das
Kennzeichen immer an derselben Stelle sitzt statt mal darunter zu rutschen. */
.cell-row { display: flex; align-items: center; gap: 6px; }
/* Beschriftung mit Erklaerung im Tooltip: die gepunktete Linie zeigt an, dass
dort etwas steht - so bleibt das Formular kurz, ohne Wissen zu verstecken. */
.tip { border-bottom: 1px dotted var(--border-strong); cursor: help; }
/* In Zahlenspalten sitzt der Inhalt rechts, passend zur Ausrichtung der Spalte. */
.table td.num .cell-row { justify-content: flex-end; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
@@ -357,21 +362,27 @@ td select { width: auto; min-width: 0; max-width: 100%; }
padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
background: var(--surface);
}
/* Zwei feste Spalten statt "space-between": Beschriftung links, Wert direkt
daneben. Vorher wurde der Wert an den rechten Rand geschoben, wodurch
Beschriftung und Wert weit auseinanderstanden und die Zeile unruhig wirkte. */
.table td {
border: none; padding: 5px 0;
display: flex; align-items: center; justify-content: space-between;
border: none; padding: 4px 0;
display: grid;
grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
align-items: baseline;
gap: var(--sp-3); text-align: left;
}
.table td::before {
content: attr(data-label);
flex: 0 0 auto;
color: var(--muted); font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
}
/* Zellen ohne Beschriftung (Bild, Aktionen) brauchen keine Zeile fuer sich. */
.table td:not([data-label])::before { content: none; }
.table td:not([data-label]) { justify-content: flex-end; }
.table td:not([data-label]) { display: flex; justify-content: flex-end; }
/* In der Karte stehen auch Zahlen linksbuendig am Wert-Rand. */
.table td.num { text-align: left; }
.table td.num .cell-row { justify-content: flex-start; }
.table td input, .table td select { width: auto; max-width: 60%; margin-top: 0; }
.table .empty { text-align: center; }
/* Reine Nachschlagelisten (Begriff -> Erklaerung) bleiben zweispaltig,