diff --git a/Changes.md b/Changes.md index 44d5929..45fc381 100644 --- a/Changes.md +++ b/Changes.md @@ -20,6 +20,11 @@ - Eigenes SVG, keine Diagrammbibliothek. Die Farben stehen als Klasse am Element und folgen damit dem hellen wie dem dunklen Thema; jedes Balkenstück trägt ein `` als Tooltip, ohne eine Zeile JavaScript. +- Die Kachel ist so groß wie ihre Nachbarn: Der Ausgriff über zwei Rasterspalten + (`.kachel.breit`) und das engere Cockpit-Raster (`.kachelraster.dicht`) entfallen wieder. +- Die Legende steht unter der Zeichnung statt daneben und in kleinerer Schrift (.74rem); + sie füllt so viele Spalten, wie die Kachel hergibt. Der Schalter teilt sich die erste + Zeile mit der Überschrift, damit er in der schmaleren Kachel oben rechts bleibt. ## Budgetplaner: drei Ansichten und Verteilen über das Zahnrad (11.08.2026) diff --git a/docs/cockpit.md b/docs/cockpit.md index 3257d89..902bc83 100644 --- a/docs/cockpit.md +++ b/docs/cockpit.md @@ -70,14 +70,15 @@ mal einer Zehnerpotenz und schließt die Null immer ein. Jedes Balkenstück trä Die Maße stehen in echten Bildpunkten: Ein Balken ist 18 Punkte breit, zwischen zwei Monaten bleiben 3. Damit das auch auf dem Schirm so ankommt, trägt das `<svg>` Breite und Höhe als Attribute und wird **nicht** auf die Kachel gestreckt; `max-width: 100%` lässt es -erst mitschrumpfen, wenn die Kachel schmaler wird als die Zeichnung. +erst mitschrumpfen, wenn die Kachel schmaler wird als die Zeichnung – in der dreispaltigen +Kachel also auf gut 90 Prozent. -Die Legende führt nur Farbe und Kontoname und steht neben der Zeichnung – die schmale -Zeichnung ließe sonst die halbe Kachel leer. Die Beträge stehen am Balken im Tooltip und in -der Kachel *Kontostände*; in der Legende kosteten sie nur Breite. Die Kachel greift über -zwei Spalten des Cockpit-Rasters (`.kachelraster.dicht`). Unterhalb von 820 px fällt der -Ausgriff weg, sonst erzwänge er im einspaltigen Raster einen waagerechten Rollbalken; dort -rutscht auch die Legende unter die Zeichnung. +Die Kachel ist eine gewöhnliche Kachel des Cockpit-Rasters, so breit wie ihre Nachbarn: +Ein Ausgriff über zwei Spalten machte sie zum Fremdkörper zwischen den anderen dreien. + +Die Legende führt nur Farbe und Kontoname und steht darunter, in kleinerer Schrift und so +vielen Spalten, wie die Kachel hergibt (`auto-fill`). Die Beträge stehen am Balken im +Tooltip und in der Kachel *Kontostände*; in der Legende kosteten sie nur Breite. ## Tests diff --git a/public/static/app.css b/public/static/app.css index f7dea5e..a852fdd 100644 --- a/public/static/app.css +++ b/public/static/app.css @@ -264,10 +264,6 @@ form.inline { display: inline; margin: 0; } gap: 1rem; } -/* Engere Spalten für das Cockpit: Die Diagrammkachel greift über zwei davon und - bleibt damit schmal, ohne dass eine Lücke zur Nachbarkachel entsteht. */ -.kachelraster.dicht { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } - .kachel { background: var(--flaeche); border: 1px solid var(--rand); @@ -278,28 +274,22 @@ form.inline { display: inline; margin: 0; } .kachel.einzeln { max-width: 640px; } -/* Ein Diagramm mit zwölf Balken braucht mehr als eine Spalte – aber nicht die - ganze Zeile: über zwei Spalten bleibt es lesbar und die Kachel handlich. Unter - der Umbruchbreite muss der Ausgriff weg, sonst erzwänge er eine zweite Spalte, - die dort nicht mehr hineinpasst (siehe Media Query am Dateiende). */ -.kachel.breit { grid-column: span 2; } - .kachel header { margin-bottom: .6rem; } .kachel header.mitschalter { display: flex; - align-items: flex-start; + align-items: center; justify-content: space-between; - gap: 1rem; + gap: .5rem 1rem; flex-wrap: wrap; } -/* Der Text gibt nach, damit der Schalter oben rechts stehen bleibt und nicht - unter die Überschrift rutscht; erst ganz schmal bricht die Zeile um. */ -.kachel header.mitschalter > div { - flex: 1 1 11rem; - min-width: 0; -} +/* Der Schalter teilt sich die Zeile mit der Überschrift und bleibt oben rechts; + der erklärende Satz nimmt die ganze nächste Zeile. Stünde er in derselben + Zeile, drückte er den Schalter in einer schmalen Kachel nach unten. */ +.kachel header.mitschalter > h2 { min-width: 0; } + +.kachel header.mitschalter > .kachelhinweis { flex: 1 0 100%; margin: 0; } .kachelhinweis { margin: .25rem 0 0; @@ -373,12 +363,13 @@ form.inline { display: inline; margin: 0; } /* Das SVG bringt seine Maße als Attribute mit und wird nicht auf die Kachel gestreckt: Nur so sind die 18 Punkte Balkenbreite auch 18 Bildpunkte. Erst - wenn die Kachel schmaler wird als die Zeichnung, skaliert sie mit. */ + wenn die Kachel schmaler wird als die Zeichnung, skaliert sie mit – die + Legende darunter nimmt dann die volle Kachelbreite. */ .diagrammbereich { display: flex; - flex-wrap: wrap; + flex-direction: column; align-items: flex-start; - gap: .5rem 1.5rem; + gap: .6rem; } .diagramm { @@ -417,30 +408,30 @@ form.inline { display: inline; margin: 0; } .diagramm-beschriftung.schwach { opacity: .7; } -/* Neben der Zeichnung statt darunter: Die schmale Zeichnung ließe sonst die - halbe Kachel leer. */ +/* Unter der Zeichnung und in kleiner Schrift: So bleibt die Kachel so breit wie + ihre Nachbarn, und zwölf Kontonamen passen in zwei Spalten darunter. */ .diagrammlegende { list-style: none; margin: 0; padding: 0; - flex: 1 1 11rem; + align-self: stretch; display: grid; - grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); - gap: .1rem 1.2rem; - font-size: .88rem; + grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); + gap: 0 1rem; + font-size: .74rem; align-content: start; } .diagrammlegende li { display: flex; align-items: center; - gap: .5rem; - padding: .15rem 0; + gap: .4rem; + padding: .1rem 0; } .legendenfarbe { - width: .8rem; - height: .8rem; + width: .65rem; + height: .65rem; border-radius: 2px; background: var(--farbe); flex: none; @@ -1021,10 +1012,6 @@ body.schlicht { @media (max-width: 820px) { .rahmen { grid-template-columns: 1fr; } - /* Einspaltiges Raster: Ein Ausgriff über zwei Spalten erzwänge hier eine - zweite Spalte und damit den waagerechten Rollbalken. */ - .kachel.breit { grid-column: auto; } - .seitenleiste { position: static; height: auto; diff --git a/src/Views/cockpit/index.php b/src/Views/cockpit/index.php index 03e0561..d8ba280 100644 --- a/src/Views/cockpit/index.php +++ b/src/Views/cockpit/index.php @@ -14,14 +14,10 @@ include __DIR__ . '/../layout/kopf.php'; <span class="tab aktiv">Cockpit</span> </div> -<div class="kachelraster dicht"> - <section class="kachel breit"> +<div class="kachelraster"> + <section class="kachel"> <header class="mitschalter"> - <div> - <h2>Vermögensentwicklung</h2> - <p class="kachelhinweis">Kontostände der letzten zwölf Monate, je Monatsende - gestapelt – ein Farbton pro Konto.</p> - </div> + <h2>Vermögensentwicklung</h2> <?php /* Ein Knopf, kein Ankreuzfeld: Ohne Inline-Skript könnte ein Ankreuzfeld das Formular nicht selbst abschicken, und die @@ -35,6 +31,9 @@ include __DIR__ . '/../layout/kopf.php'; <span class="schaltertext">nur aktive</span> </button> </form> + + <p class="kachelhinweis">Kontostände der letzten zwölf Monate, je Monatsende + gestapelt – ein Farbton pro Konto.</p> </header> <?php if (!$vermoegen['hatWerte']): ?> <p class="platzhalter">