paul/audi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename Sommer/Winter to Sommerräder/Winterräder, reflow Reifen tile headline

Browse Source 
The tile headline now reads "Sommerräder"/"Winterräder" and renders as an
actual headline (new .tile-headline class, 20px/var(--fg)) instead of the
small muted .label styling used for other in-tile section titles.

Headline + km now sit above "Montiert" instead of the wheel photo
overlaying it: new .radkopf-row (flex) puts headline/km and the photo
side by side at the tile's top; Montiert dropped position:absolute (no
longer needed once the photo stopped sharing its space) and is now a
normal-flow pill below the headline block.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
tobias
2026-08-16 21:00:47 +02:00
co-authored by Claude Opus 5
parent ec55e5808e
commit 8b3e5b2b8f
5 changed files with 88 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
homeassistant/www/audi-dashboard.css
+26 -10
View File
@@ -329,6 +329,17 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
display: block;
line-height: 1.3;
}
/* Echte Überschrift innerhalb einer Kachel (z.B. "Sommerräder"/"Winterräder")
statt des sonst üblichen kleinen, gedämpften .label-Abschnittstitels -
selbe Typografie-Stufe wie .title (Seitentitel), nur etwas kleiner, weil
sie innerhalb einer Kachel steht statt in der Kopfzeile. */
.tile-headline {
font-size: 20px;
letter-spacing: -.01em;
line-height: 1.2;
color: var(--fg);
display: block;
}
/* A4: Messwerte erben nie mehr das uppercase der Label-Klasse. */
.wert {
font-size: 14px;
@@ -453,10 +464,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
/* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect-
ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter
notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle
Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats.
margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des
vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */
.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; }
Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. Rechtsbündig
sitzt es jetzt ueber .radkopf-row (display:flex; justify-content:space-
between), kein margin-left:auto mehr noetig. */
.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; }
.bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -889,14 +900,19 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
padding: var(--sp-4);
}
.radkopf { display: flex; flex-direction: column; margin-top: var(--sp-4); }
/* Kopfzeile der Reifen-Kachel: Überschrift+km links, Radfoto rechts, beide
oben bündig - ersetzt die frühere Überlagerung (Montiert absolut über dem
Foto), seit Überschrift und km ihren eigenen Platz über Montiert bekommen
haben. */
.radkopf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.radkopf { display: flex; flex-direction: column; }
/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): oben links
in der Kachel, obere Kante auf Höhe des Radfotos, linker Abstand
identisch zum Texteinzug (beides var(--sp-5), die Kachel-Innen-
polsterung). */
/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): normale
Flusslage unter der Kachel-Überschrift/km, nicht mehr über dem Foto
überlagert (das saß nur dort, solange Überschrift+km diesen Platz noch
nicht beanspruchten). */
.montiert {
position: absolute; top: var(--sp-5); left: var(--sp-5);
position: relative; margin-top: var(--sp-4);
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit; font-size: 12px; letter-spacing: normal;
color: var(--fg2);