dejanandClaude Opus 5
6a0b36ddcc
467 Stellen. Nicht durch einen anderen Strich ersetzt, sondern durch das
Satzzeichen, das an der jeweiligen Stelle richtig ist: Doppelpunkt, wo eine
Erlaeuterung folgt; Komma, wo der Satz weiterlaeuft; Punkt, wo zwei
Hauptsaetze aneinanderstiessen. Ein Halbgeviertstrich waere nur derselbe
Griff mit kuerzerem Strich gewesen.
Regelbasiert ersetzt und danach nachgeprueft, weil eine Regel allein nicht
reicht. Gefunden und einzeln korrigiert:
- Eingeschobene Saetze mit Strichpaar. Nur der oeffnende Strich passte ins
Muster, der schliessende blieb als "—," stehen. Drei Stellen, jetzt mit
Klammern oder als eigener Satz.
- Doppelte Doppelpunkte, wo beide Striche eines Paars zu Doppelpunkten wurden
("Globale Regeln: Schrift, Groessen, Abstaende: kommen aus HiveGrid").
Sieben Stellen in Doku und Oberflaeche, jetzt in Klammern.
- Pfade, denen ein Komma statt eines Doppelpunkts folgte.
- Ausgerichtete Kommentartabellen, in denen der Strich eine Spalte war.
Nicht angefasst: drei Geviertstriche, die keine Prosa sind, sondern
Tabellenplatzhalter fuer "kein Wert" (Trichter, Auftraege, Kunden). Dort ist
der Strich die Angabe selbst; ihn zu entfernen liesse leere Zellen zurueck.
tsc, lint, build, verify:carbon und verify:layout laufen sauber.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
import React from "react";
|
|
|
|
/**
|
|
* Inhaltsspalte einer Seite.
|
|
* 24 px Außenabstand, 16 px Rasterabstand: entspricht dem 8-px-System
|
|
* aus den UI-Guidelines (internal ≤ external).
|
|
*
|
|
* Unter `sm` sind 24 px Rand ein Achtel der Fensterbreite: Der Rand kostet
|
|
* dort mehr Platz, als er Ruhe bringt. Deshalb 16 px, der nächste Wert der
|
|
* Skala, nicht ein neuer.
|
|
*/
|
|
export function PageContainer({ children }: { children: React.ReactNode }) {
|
|
return <div className="flex flex-col gap-6 px-4 pb-10 sm:px-6">{children}</div>;
|
|
}
|
|
|
|
/** Standard-Raster für eine Kartenreihe. */
|
|
export function Raster({
|
|
spalten,
|
|
/**
|
|
* Karten oben ausrichten statt auf gleiche Hoehe strecken.
|
|
* Gleiche Hoehe ist richtig, wenn alle Karten dieselbe Struktur haben
|
|
* (KPI-Reihe). Sobald ein Chart mit fester Hoehe neben einer Tabelle steht,
|
|
* erzeugt Strecken nur Weissraum.
|
|
*/
|
|
obenBuendig = false,
|
|
children,
|
|
}: {
|
|
/** Spaltenzahl auf großen Bildschirmen. */
|
|
spalten: 2 | 3 | 4 | 5;
|
|
obenBuendig?: boolean;
|
|
children: React.ReactNode;
|
|
}) {
|
|
/**
|
|
* Jede Leiter beginnt einspaltig. Zwei Spalten sind bei 375 px rund 155 px
|
|
* je Karte: darin bricht ein Währungswert zwischen Betrag und Euro-Zeichen
|
|
* um, und die Karte wird höher statt schmaler.
|
|
*
|
|
* Wann die erste Verdopplung kommt, hängt am Inhalt, nicht an der Zielzahl:
|
|
* Die Leitern 4 und 5 tragen KPI-Karten (kurzer Wert, feste Höhe) und
|
|
* verdoppeln bei `sm`, wo die Seitenleiste noch ausgefahren ist und die
|
|
* volle Fensterbreite zur Verfügung steht. Die Leitern 2 und 3 tragen
|
|
* Diagramme und Tabellen, die halbiert erst ab `md` lesbar bleiben.
|
|
*
|
|
* Keine Leiter erhöht bei `md`: Dort kommt die Seitenleiste zurück und
|
|
* nimmt 240 px weg, die Karten würden schmaler statt breiter.
|
|
*
|
|
* Ab 1024 px ist jede Leiter identisch zum abgenommenen Stand.
|
|
*/
|
|
const klassen: Record<number, string> = {
|
|
2: "grid grid-cols-1 gap-4 md:grid-cols-2",
|
|
3: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
|
|
4: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
|
|
5: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
|
|
};
|
|
return (
|
|
<div className={`${klassen[spalten]} ${obenBuendig ? "items-start" : ""}`}>{children}</div>
|
|
);
|
|
}
|