From ffbe70aedeacb169fa32450be1db4a1b07c73ca0 Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Mon, 31 Aug 2026 17:48:05 +0200 Subject: [PATCH] Zeilen nur strecken, wenn die Karten dieselbe Bauart haben MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rueckbau des letzten Commits, soweit er zu weit ging. Er hat alle Diagrammzeilen gestreckt; richtig ist das nur dort, wo die Karten von Natur aus aehnlich hoch sind. Gemessen bei 1680 px, Hoehenunterschied innerhalb einer Zeile: Trichter | Auslastung (Liste | Liste) 0 px / 0 px Zahlungseingang | Bestand (Chart | Chart) 0 px / 0 px Zahlungseingang | Gewerk (Chart | Liste) 147 px / 315 px Vorgaenge Status | Gewerk (Chart | Liste) 190 px / 358 px (volle Daten / duenne Daten) Der Grund steckt in der Liste: Eine Balkenliste hat keine Mindesthoehe. Fuenf Kategorien ergeben 280 px, eine einzige 112 px — daneben liegt ein Zeitverlauf unveraendert bei 427 px, weil seine Diagrammflaeche fest ist. Diese Zeile zu strecken heisst, eine Karte mit einem Balken auf 427 px aufzublasen. Das ist schlimmer als die Luecke, die es vermeiden soll: Weissraum auf der Seite liest sich als "hier ist gerade wenig", eine riesige Karte mit einem Balken darin als Fehler. items-start kehrt deshalb auf allen Zeilen zurueck, in denen ein Diagramm mit fester Hoehe neben einer Liste steht. Gestreckt bleibt, wo beide Karten dieselbe Bauart haben — Trichter neben Auslastung. Das senkrechte Zentrieren im Kartenkoerper bleibt: Auf oben buendigen Zeilen ist es wirkungslos, auf den gestreckten verteilt es den Ueberschuss oben und unten statt ihn unten abzuladen. Das war die Verbesserung am Trichter. Auf dem Dashboard bleibt die Zeile aus Zeitverlauf und Balkenliste gestreckt. Derselbe Massstab, anderes Ergebnis: Dort gibt es keinen Filter, die Liste hat immer ihre fuenf Gewerke, und es bleiben rund 90 px. Der Filter ist der Unterschied, nicht die Kachel. DESIGN-SYSTEM.md traegt jetzt die Regel mit den Messwerten statt der zu weit gefassten Fassung von vorhin. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX --- docs/DESIGN-SYSTEM.md | 57 +++++++++++++------- features/dashboard/pages/AuftraegeSeite.tsx | 4 +- features/dashboard/pages/FinanzenSeite.tsx | 2 +- features/dashboard/pages/KundenSeite.tsx | 4 +- features/dashboard/pages/TeamSeite.tsx | 2 +- features/dashboard/pages/UebersichtSeite.tsx | 2 +- 6 files changed, 46 insertions(+), 25 deletions(-) diff --git a/docs/DESIGN-SYSTEM.md b/docs/DESIGN-SYSTEM.md index 35d58b4..58e8b13 100644 --- a/docs/DESIGN-SYSTEM.md +++ b/docs/DESIGN-SYSTEM.md @@ -332,25 +332,46 @@ Placeholder-Token und für lesbaren Text nicht geeignet. ## Kartenhöhen in einer Zeile -Karten einer Zeile sind **gleich hoch, aber nicht gleich voll**. Die Höhe gibt -die inhaltsreichste Karte vor; die übrigen strecken sich mit und verteilen den -Überschuss oben und unten je zur Hälfte (`justify-center` im Kartenkörper). +**Gestreckt wird nur, wenn die Karten einer Zeile dieselbe Bauart haben.** +Zwei Listen, zwei Zeitverläufe, zwei Tabellen — da gibt die eine Karte eine +Höhe vor, die die andere ohnehin fast erreicht, und der Rest verteilt sich +oben und unten je zur Hälfte (`justify-center` im Kartenkörper). -Vorher waren die Zeilen oben bündig (`items-start`), und jede Karte endete dort, -wo ihr Inhalt endete. Bei ähnlich vollen Karten fiel das nicht auf. Bei dünner -Datenlage schon: Ein Balkendiagramm mit einer einzigen Kategorie war 112 px -hoch und stand neben einem Zeitverlauf mit 427 px — 315 px Seitenhintergrund -als Loch dazwischen. Das liest sich nicht als „wenig Daten", sondern als -„etwas ist kaputt". +**Steht ein Diagramm mit fester Höhe neben einer Liste, bleibt die Zeile oben +bündig.** Dann hört jede Karte dort auf, wo ihr Inhalt aufhört, und der +Höhenunterschied wird zu Weißraum auf der Seite. -Die Leere verschwindet dadurch nicht — sie zieht aus dem Seitenhintergrund in -die Karte. Das ist der Unterschied zwischen einem Raster mit Lücken und einer -Karte, in der gerade wenig steht. +Das ist gemessen, nicht geschätzt. Höhenunterschiede innerhalb einer Zeile +bei 1680 px: -**Die Karten bleiben dabei dynamisch.** Es gibt keine feste Höhe: Kommt mehr -Inhalt hinein, wächst die Karte und mit ihr die ganze Zeile. +| Zeile | volle Daten | dünne Daten | +|---|---|---| +| Vertriebstrichter ∣ Auslastung (zwei Listen) | 0 px | 0 px | +| Zahlungseingang ∣ Offener Bestand (zwei Diagramme) | 0 px | 0 px | +| Zahlungseingang ∣ Umsatz nach Gewerk (Diagramm ∣ Liste) | 147 px | **315 px** | +| Vorgänge nach Status ∣ nach Gewerk (Diagramm ∣ Liste) | 190 px | **358 px** | -**Ausnahme: Zeilen mit Tabellen.** Eine Tabelle hat ein natürliches Ende und -eine eigene Fußzeile zum Blättern. Sie zu strecken schiebt nur die Blätterleiste -nach unten. Solche Zeilen bleiben oben bündig — im Prototyp die -Reaktivierungs- und Zahlungsmoral-Tabellen auf der Kundenseite. +Der Grund steckt in der Liste: Eine Balkenliste hat keine Mindesthöhe. Fünf +Kategorien ergeben 280 px, eine einzige 112 px — daneben liegt ein +Zeitverlauf unverändert bei 427 px, weil seine Diagrammfläche fest ist. + +Diese Zeilen zu strecken hieße, eine Karte mit einem Balken auf 427 px +aufzublasen. Das ist schlimmer als die Lücke, die es vermeiden soll: +Weißraum auf der Seite liest sich als „hier ist gerade wenig", eine riesige +Karte mit einem Balken darin als Fehler. + +**Zeilen mit Tabellen bleiben ebenfalls oben bündig**, auch wenn zwei +Tabellen nebeneinander von Natur aus gleich hoch sind. Eine Tabelle hat eine +eigene Fußzeile zum Blättern; sie zu strecken schiebt nur die Blätterleiste +nach unten. + +**Auf dem Dashboard ist die Zeile aus Zeitverlauf und Balkenliste trotzdem +gestreckt.** Das ist kein Widerspruch, sondern derselbe Maßstab: Der +Unterschied entsteht dort gar nicht erst groß, weil das Dashboard keinen +Filter hat — jede Kachel zeigt ihren festen Zeitraum, die Balkenliste hat +immer ihre fünf Gewerke, und es bleiben rund 90 px, die sich oben und unten +verteilen. In Analytics kann derselbe Unterschied durch einen Filter auf +315 px wachsen. Der Filter ist der Unterschied, nicht die Kachel. + +Die Karten sind in allen Fällen dynamisch — nirgends steht eine feste Höhe. +Kommt mehr Inhalt hinein, wächst die Karte. diff --git a/features/dashboard/pages/AuftraegeSeite.tsx b/features/dashboard/pages/AuftraegeSeite.tsx index 159ee74..aad1b2b 100644 --- a/features/dashboard/pages/AuftraegeSeite.tsx +++ b/features/dashboard/pages/AuftraegeSeite.tsx @@ -142,7 +142,7 @@ export function AuftraegeSeite({ vm }: { vm: VMState }) { /> -
+
}) {
-
+
}) {
-
+
}) { /> -
+
}) {
-
+
}) { /> -
+
}) { -
+