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

Web: Ring-Karten – Legende in eigenem Scroll-Bereich (Ring bleibt stehen)

Browse Source 
align-self:stretch an der <ul> war zu unzuverlaessig (u.a. wegen flex-wrap). Jetzt
kanonisches Muster: Ring (feste Groesse, mittig) + eigener .chart-legend-scroll
(flex:1 1 0; min-height:0; overflow-y:auto) in einem align-items:stretch-Container
ohne Umbruch. Nur die Legende scrollt, der Ring bleibt stehen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-30 18:17:10 +02:00
parent 30e570095f
commit d05727779b
2 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/dashboard/charts/Donut.jsx
View File

@@ -65,6 +65,8 @@ export default function Donut({ segmente = [], gesamtLabel = "gesamt", einheit =
</text> </text>
</svg> </svg>
{/* Eigener Scroll-Bereich: nur die Legende scrollt, der Ring bleibt stehen. */}
<div className="chart-legend-scroll">
<ul className="chart-legend"> <ul className="chart-legend">
{boegen.map((b) => ( {boegen.map((b) => (
<li key={b.name} <li key={b.name}
@@ -79,5 +81,6 @@ export default function Donut({ segmente = [], gesamtLabel = "gesamt", einheit =
))} ))}
</ul> </ul>
</div> </div>
</div>
); );
} }

18
web/src/styles.css
View File

@@ -777,21 +777,21 @@ select.zeitraum:hover { color: var(--text); }
/* ---------- Diagramme ---------- */ /* ---------- Diagramme ---------- */
/* Der Ring fuellt die Karte und sitzt mittig – vorher klebte er oben und /* Der Ring fuellt die Karte und sitzt mittig – vorher klebte er oben und
darunter blieb eine grosse leere Flaeche stehen. */ darunter blieb eine grosse leere Flaeche stehen. */
/* Ring links (feste Größe, mittig) + eigener Scroll-Bereich rechts für die
Legende. Der Ring-Bereich füllt die feste Kartenhöhe; nur die Legende scrollt,
nicht die ganze Karte. */
.chart-donut { .chart-donut {
display: flex; align-items: center; justify-content: center; display: flex; align-items: stretch; justify-content: center;
gap: var(--sp-4); flex-wrap: wrap; gap: var(--sp-4);
flex: 1; min-height: 0; flex: 1; min-height: 0; overflow: hidden;
} }
/* Bei vielen Kategorien (Detailansicht) soll der Ring stehen bleiben und nur die .chart-legend-scroll { flex: 1 1 0; min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto; }
Legende scrollen – nicht die ganze Karte. Deshalb füllt die Legende die Höhe .donut-svg { width: 160px; height: 160px; flex: 0 0 auto; align-self: center; }
des Ring-Bereichs und scrollt in sich; der Ring bleibt mittig fixiert. */
.chart-donut .chart-legend { align-self: stretch; min-height: 0; overflow-y: auto; }
.donut-svg { width: 160px; height: 160px; flex: 0 0 auto; }
.donut-svg circle { transition: stroke-width 120ms ease; cursor: default; } .donut-svg circle { transition: stroke-width 120ms ease; cursor: default; }
.donut-value { font-size: 20px; font-weight: 680; fill: var(--text); } .donut-value { font-size: 20px; font-weight: 680; fill: var(--text); }
.donut-label { font-size: 10px; fill: var(--muted); } .donut-label { font-size: 10px; fill: var(--muted); }
.chart-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 140px; } .chart-legend { list-style: none; margin: 0; padding: 0; }
.chart-legend li { .chart-legend li {
display: flex; align-items: center; gap: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2);
padding: 3px 0; font-size: 0.82rem; padding: 3px 0; font-size: 0.82rem;