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 }) { /> -
+
}) {
-
+
}) {
-
+
}) { /> -
+
}) {
-
+
}) { /> -
+
}) { -
+