From 7932830defee9196954316ef41c8d0551601e43c Mon Sep 17 00:00:00 2001 From: fds2610-bot Date: Tue, 11 Aug 2026 13:28:50 +0200 Subject: [PATCH] =?UTF-8?q?Cockpit:=20Legende=20ohne=20Betr=C3=A4ge,=20Kac?= =?UTF-8?q?hel=20ein=20Viertel=20schmaler?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die Beträge stehen am Balken im Tooltip und in der Kachel Kontostände – in der Legende kosteten sie nur Breite. Ohne sie kommen die Namen mit schmalen Spalten aus, und die Kachel greift im engeren Cockpit-Raster über zwei Spalten statt über zwei breite: 602 statt 808 Pixel. Dazu zwei Anpassungen an die schmalere Kachel: Der Kopftext gibt nach, damit der Schalter oben rechts stehen bleibt, und die Schrift im SVG wächst, weil sie mit dem viewBox schrumpft. Co-Authored-By: Claude Opus 5 --- docs/cockpit.md | 6 ++++++ public/static/app.css | 23 +++++++++++++++-------- src/Views/cockpit/index.php | 2 +- src/Views/cockpit/vermoegensdiagramm.php | 11 +++++------ 4 files changed, 27 insertions(+), 15 deletions(-) diff --git a/docs/cockpit.md b/docs/cockpit.md index 5f31de0..bb9fbb0 100644 --- a/docs/cockpit.md +++ b/docs/cockpit.md @@ -63,6 +63,12 @@ Die Achse rundet über `Vermoegensentwicklung::skala()` auf Schritte von 1, 2, 2 mal einer Zehnerpotenz und schließt die Null immer ein. Jedes Balkenstück trägt ein `` mit Konto, Monat und Betrag – das ist der Tooltip, ohne eine Zeile JavaScript. +Die Legende führt nur Farbe und Kontoname. 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`) – schmal genug, um die übrigen +Kacheln danebenstehen zu lassen, breit genug für zwölf Balken. Unterhalb von 820 px fällt +der Ausgriff weg, sonst erzwänge er im einspaltigen Raster einen waagerechten Rollbalken. + ## Tests * `tests/13_VermoegensentwicklungTest.php` – Zeitraum, Fortschreibung der Stände, diff --git a/public/static/app.css b/public/static/app.css index 100ff7d..d5401d4 100644 --- a/public/static/app.css +++ b/public/static/app.css @@ -264,6 +264,10 @@ 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); @@ -290,6 +294,13 @@ form.inline { display: inline; margin: 0; } 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; +} + .kachelhinweis { margin: .25rem 0 0; color: var(--text-gedaempft); @@ -379,11 +390,13 @@ form.inline { display: inline; margin: 0; } stroke-width: 1.5; } +/* Die Schrift skaliert mit dem viewBox: In der schmalen Kachel schrumpft sie um + ein Viertel, deshalb hier größer als im Fließtext angesetzt. */ .diagramm-achse, .diagramm-beschriftung { fill: var(--text-gedaempft); font-family: var(--schrift); - font-size: 11px; + font-size: 14px; } .diagramm-achse { font-family: var(--schrift-zahl); } @@ -395,7 +408,7 @@ form.inline { display: inline; margin: 0; } margin: .9rem 0 0; padding: 0; display: grid; - grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .1rem 1.2rem; font-size: .88rem; } @@ -421,12 +434,6 @@ form.inline { display: inline; margin: 0; } white-space: nowrap; } -.legendenwert { - margin-left: auto; - font-family: var(--schrift-zahl); - font-variant-numeric: tabular-nums; -} - /* ── Ein/Aus-Schalter ──────────────────────────────────────────────────────── Die Bahn mit dem laufenden Knopf, wie man ihn von Mobilgeräten kennt. Ein diff --git a/src/Views/cockpit/index.php b/src/Views/cockpit/index.php index 453e263..03e0561 100644 --- a/src/Views/cockpit/index.php +++ b/src/Views/cockpit/index.php @@ -14,7 +14,7 @@ include __DIR__ . '/../layout/kopf.php'; <span class="tab aktiv">Cockpit</span> </div> -<div class="kachelraster"> +<div class="kachelraster dicht"> <section class="kachel breit"> <header class="mitschalter"> <div> diff --git a/src/Views/cockpit/vermoegensdiagramm.php b/src/Views/cockpit/vermoegensdiagramm.php index 29c05bc..e77b49d 100644 --- a/src/Views/cockpit/vermoegensdiagramm.php +++ b/src/Views/cockpit/vermoegensdiagramm.php @@ -49,7 +49,7 @@ $hoehe = 250; $links = 82; $rechts = 10; $oben = 12; -$unten = 34; +$unten = 40; $plotB = $breite - $links - $rechts; $plotH = $hoehe - $oben - $unten; @@ -121,10 +121,10 @@ $zeitraum = $monate[0]['kuerzel'] . ' ' . $monate[0]['jahrKurz'] </rect> <?php endforeach; ?> - <text class="diagramm-beschriftung" x="<?= $mitte($nummer) ?>" y="<?= $hoehe - 14 ?>" + <text class="diagramm-beschriftung" x="<?= $mitte($nummer) ?>" y="<?= $hoehe - 22 ?>" text-anchor="middle"><?= View::h($monat['kuerzel']) ?></text> <?php if ($monat['monat'] === 1 || $nummer === 0): ?> - <text class="diagramm-beschriftung schwach" x="<?= $mitte($nummer) ?>" y="<?= $hoehe - 3 ?>" + <text class="diagramm-beschriftung schwach" x="<?= $mitte($nummer) ?>" y="<?= $hoehe - 6 ?>" text-anchor="middle"><?= View::h($monat['jahrKurz']) ?></text> <?php endif; ?> <?php endforeach; ?> @@ -132,12 +132,11 @@ $zeitraum = $monate[0]['kuerzel'] . ' ' . $monate[0]['jahrKurz'] <ul class="diagrammlegende"> <?php foreach ($konten as $index => $konto): ?> + <?php /* Nur Farbe und Name: Die Beträge stehen am Balken im Tooltip und in + der Kachel „Kontostände“ – in der Legende kosteten sie nur Breite. */ ?> <li> <span class="legendenfarbe <?= $serie($index) ?>" aria-hidden="true"></span> <span class="legendenname"><?= View::h($konto['name']) ?></span> - <span class="legendenwert <?= View::betragKlasse($konto['werte'][$anzahl - 1]) ?>"> - <?= View::betrag($konto['werte'][$anzahl - 1]) ?> - </span> </li> <?php endforeach; ?> </ul>