diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx index ccdddef..4305d06 100644 --- a/app/(app)/page.tsx +++ b/app/(app)/page.tsx @@ -1,6 +1,6 @@ import { ChevronRight } from "lucide-react"; import Link from "next/link"; -import { Suspense, type CSSProperties } from "react"; +import { Fragment, Suspense } from "react"; import { AnstehendFilter } from "@/components/dashboard/AnstehendFilter"; import { AnstehendListe, type AnstehendEintrag } from "@/components/dashboard/AnstehendListe"; import { DraftsCard } from "@/components/dashboard/DraftsCard"; @@ -31,6 +31,28 @@ const TONE: Record = { /** Eine Kennzahl auf der Übersicht. */ type Kachel = { label: string; value: string | number; tone: keyof typeof TONE; href: string }; +/** + * Wie viele Spalten die Überschrift einer Gruppe überspannt — nach der Zahl + * ihrer Kacheln. + * + * Ausgeschrieben und nicht als `span var(--kacheln)`: Tailwind erzeugt nur + * Klassen, die als Zeichenkette im Quelltext stehen, und eine aus einer + * Variablen berechnete Spannweite wäre zur Bauzeit nicht zu sehen. Die + * Tabelle deckt jede mögliche Gruppengrösse bis zur Rasterbreite ab; ein + * Zugriff daneben gäbe `undefined` und damit eine Überschrift über einer + * einzigen Spalte — auffällig genug, um bemerkt zu werden. + */ +const SPALTEN_SPAN: Record = { + 1: "xl:col-span-1", + 2: "xl:col-span-2", + 3: "xl:col-span-3", + 4: "xl:col-span-4", + 5: "xl:col-span-5", + 6: "xl:col-span-6", + 7: "xl:col-span-7", + 8: "xl:col-span-8", +}; + // Die Tabelle, die hier stand, ist nach lib/colors.ts gewandert: Punkt und // Chip derselben Zeile kamen aus zwei getrennten Verzeichnissen, und eines // davon war das falsche. Jetzt leiten beide aus EVENT_CATEGORY ab und koennen @@ -224,58 +246,66 @@ export default async function DashboardPage({ return (
{drafts.length > 0 && } - {/* ── Eine Reihe, drei Gruppen ────────────────────────────────── - Ab der grossen Breite stehen alle acht Kacheln nebeneinander, die - Überschrift jeweils über den ihren. + {/* ── Ein Raster, nicht drei nebeneinandergestellte ────────────── + Alle acht Kacheln liegen in **einem** Raster mit acht gleichen + Spalten und einem einzigen Abstandswert. Nur so sind sie gleich + breit und gleich weit auseinander — unabhängig davon, zu welcher + Gruppe sie gehören. - Die Breite einer Gruppe folgt der **Zahl ihrer Kacheln**: fünf, zwei, - eine. Der erste Versuch gab jeder Gruppe denselben Anteil (`flex-1`) - — dann quetschten sich fünf Kacheln in ein Drittel und brachen um, - während die einzelne rechts dasselbe Drittel für sich hatte. + Die beiden Anläufe davor stellten drei eigene Raster nebeneinander. + Das ging zweimal schief: erst bekam jede Gruppe ein Drittel der + Breite (fünf Kacheln gequetscht, eine mit demselben Platz), dann + einen Anteil nach Kachelzahl — da stimmten die Breiten fast, aber + eben nur fast: eine Gruppe mit fünf Kacheln hat vier Abstände in + sich, eine mit einer keinen, und dieser Unterschied verteilt sich + auf die Kachelbreiten. Gleichmässig wird es erst, wenn alle Kacheln + demselben Raster angehören. - Die Zahl geht als CSS-Variable in beide Regeln, statt als - ausgeschriebene Klasse je Gruppe. Käme eine neunte Kachel dazu, - stimmte die Aufteilung von selbst; mit `xl:flex-[5]` von Hand müsste - jemand daran denken, und es fiele nicht auf, wenn er es nicht tut. + Die Überschriften sitzen in Zeile 1 und überspannen die Spalten + ihrer Gruppe, die Kacheln in Zeile 2. Beide Zeilen entstehen aus + derselben DOM-Reihenfolge (Überschrift, ihre Kacheln, nächste + Überschrift …) — die ist für Vorlesegeräte die richtige, und die + ausdrückliche Zeilenangabe sortiert sie fürs Auge. - Darunter untereinander, je Gruppe zwei Kacheln nebeneinander — in - einer Reihe wären acht Kacheln auf einem Laptop unlesbar schmal. */} -
+ Unterhalb der grossen Breite gibt es keine Zeilenangabe: dann fliesst + alles der Reihe nach, die Überschrift über die volle Breite und ihre + Kacheln zu zweit darunter. Acht nebeneinander wären auf einem Laptop + unlesbar schmal. */} +
{kpiGruppen.map((gruppe) => ( -
-

{gruppe.titel}

-
- {gruppe.kacheln.map((kpi) => ( - - - {/* Number first in the visual order: it is what the eye is - looking for, and the label only qualifies it. */} - {/* Kleiner, sobald alle acht in einer Reihe stehen: dort - bleiben je Kachel gut 110 px, und „748.4" braucht in - 30 px Schriftgrad mehr davon, als nach dem Innenabstand - übrig ist. Die Kachel hat `overflow-hidden` — die Zahl - wäre also nicht zu breit, sondern abgeschnitten, und - eine abgeschnittene Kennzahl ist schlimmer als eine - kleine. Darunter stehen zwei je Reihe, da ist Platz. */} -
- {kpi.value} -
-
- {kpi.label} - -
- - ))} -
-
+ +

+ {gruppe.titel} +

+ {gruppe.kacheln.map((kpi) => ( + + + {/* Number first in the visual order: it is what the eye is + looking for, and the label only qualifies it. + + Kleiner, sobald alle acht in einer Reihe stehen: dort + bleiben je Kachel gut 110 px, und „748.4" braucht in 30 px + Schriftgrad mehr davon, als nach dem Innenabstand übrig + ist. Die Kachel hat `overflow-hidden` — die Zahl wäre also + nicht zu breit, sondern abgeschnitten, und eine + abgeschnittene Kennzahl ist schlimmer als eine kleine. */} +
+ {kpi.value} +
+
+ {kpi.label} + +
+ + ))} + ))}