From 1f561321f71f5505aa8f82f95fe1e0a33538fd35 Mon Sep 17 00:00:00 2001 From: davetoolctrl Date: Fri, 3 Jul 2026 00:46:45 +0200 Subject: [PATCH] Improve D-D0b preview rule inspector --- .../D-D0b Layout Standards.md | 1 + .../D-D0b Layout Standards/Preview/index.html | 321 ++++++++++++++++++ .../Fertige Tickets/D-D0b Layout Standards.md | 3 + 3 files changed, 325 insertions(+) diff --git a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md index f13ba25b..52c39aea 100644 --- a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md +++ b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md @@ -24,6 +24,7 @@ HTML-Preview: - Separate Full-Page-Vorschau: [D-D0b Full Page Preview]() - Lokale Arbeitskopie fuer Self-Hosting: `99 Temp/D-D0b Layout Preview/index.html` - Die versionierte Preview liegt bewusst im D-D0b-Ordner, damit sie zusammen mit den Layout-Entscheidungen auffindbar bleibt. +- Die Preview enthaelt einen ausklappbaren Standards-Drawer und optionale Rule-Hints, damit sichtbar ist, welche Regel an welcher Stelle angewendet wird. - Die Preview ist visuelle Referenz, aber kein Source of Truth. - `99 Temp/` ist per `.gitignore` ausgeschlossen. - Wenn Regeln spaeter abweichen, gelten die Markdown-Standards, nicht die HTML-Preview. diff --git a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html index 0f51df3b..0807cadd 100644 --- a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html +++ b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html @@ -162,6 +162,187 @@ left: 3px; } + .rule-toggle-switch { + position: relative; + width: 32px; + height: 18px; + border-radius: 999px; + background: var(--primary); + } + + .rule-toggle-switch::after { + content: ""; + position: absolute; + top: 3px; + left: 17px; + width: 12px; + height: 12px; + border-radius: 999px; + background: #fff; + transition: left 160ms ease; + } + + body.hide-rule-markers .rule-toggle-switch { + background: var(--border-strong); + } + + body.hide-rule-markers .rule-toggle-switch::after { + left: 3px; + } + + .rule-badge { + position: relative; + display: inline-flex; + align-items: center; + gap: 6px; + width: max-content; + min-height: 24px; + padding: 0 8px; + border: 1px solid #b8c7ff; + border-radius: 999px; + background: #eef3ff; + color: #2443a8; + font-size: 12px; + font-weight: 800; + text-decoration: none; + white-space: nowrap; + } + + .rule-badge::before { + content: "->"; + font-size: 10px; + } + + .rule-badge::after { + content: attr(data-tooltip); + position: absolute; + right: 0; + bottom: calc(100% + 8px); + z-index: 40; + display: none; + width: min(280px, 72vw); + padding: 10px 12px; + border: 1px solid var(--border); + border-radius: 8px; + background: #fff; + box-shadow: var(--shadow); + color: var(--text); + font-size: 12px; + font-weight: 500; + line-height: 1.45; + white-space: normal; + } + + .rule-badge:hover::after, + .rule-badge:focus-visible::after { + display: block; + } + + .rule-row { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 10px; + } + + .rule-callout { + display: grid; + gap: 8px; + margin-top: 12px; + padding: 12px 14px; + border: 1px solid #c7d2fe; + border-radius: 8px; + background: #f7f9ff; + } + + .rule-callout p { + color: #294268; + font-size: 12px; + line-height: 1.5; + } + + body.hide-rule-markers .rule-badge, + body.hide-rule-markers .rule-row, + body.hide-rule-markers .rule-callout { + display: none; + } + + .standards-drawer { + position: fixed; + right: 20px; + bottom: 20px; + z-index: 30; + width: min(420px, calc(100vw - 40px)); + border: 1px solid var(--border); + border-radius: 10px; + background: #fff; + box-shadow: var(--shadow); + overflow: hidden; + } + + .standards-drawer summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + min-height: 48px; + padding: 0 16px; + cursor: pointer; + font-weight: 800; + list-style: none; + } + + .standards-drawer summary::-webkit-details-marker { + display: none; + } + + .standards-drawer summary::after { + content: "Auf/zu"; + color: var(--muted); + font-size: 12px; + font-weight: 650; + } + + .standards-drawer-body { + display: grid; + gap: 12px; + max-height: min(520px, calc(100vh - 120px)); + padding: 0 16px 16px; + overflow: auto; + } + + .standards-drawer-note { + color: var(--muted); + font-size: 12px; + line-height: 1.45; + } + + .standards-rule-list { + display: grid; + gap: 8px; + } + + .standards-rule { + display: grid; + gap: 3px; + padding: 10px 12px; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--surface-subtle); + color: var(--text); + text-decoration: none; + } + + .standards-rule strong { + font-size: 12px; + } + + .standards-rule span { + color: var(--muted); + font-size: 12px; + line-height: 1.35; + } + .legend { display: flex; align-items: center; @@ -1979,6 +2160,12 @@ display: none; } + .standards-drawer { + right: 12px; + bottom: 12px; + width: calc(100vw - 24px); + } + .rhythm-card-row { grid-template-columns: 1fr; } @@ -1996,6 +2183,10 @@ Spacing Tiles + Uebersicht Full Page D01 @@ -2028,6 +2219,53 @@ +
+ Aktive Layout-Standards +
+

+ Klick auf eine Regel springt zur passenden Stelle. Die Inline-Hinweise zeigen, wo diese Regel im Beispiel angewendet wird. +

+
+ + D01 Grundraster + Erlaubte Werte: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. + + + D02 Page/Card/Grid + Page 24px, Card/Surface 16px, Grid Gap 16px, kompakt lokal 12px. + + + D03 Text-Rhythmus + 0px / 24px / 0px / 12px mit 150%-Texttokens fuer Beschreibungen. + + + D04 Button Ownership + Button Default/Medium/36px; Button-Padding kommt aus der Komponente. + + + D05 Forms + Komplette Field-Komponenten stehen standardmaessig 16px auseinander. + + + D06 Table Ownership + Tabellen-Dichte kommt aus der Table-Komponente; Carbon nur als Referenz. + + + D07 Dialog Sizes + XS 420, S 560, M 720, L 1200; Fullscreen max 2512px. + + + D08 Dialog Internal Gaps + Title 8px, Field 16px, Section 24px, Footer Button 8px. + + + D09 States + Empty/Error/No-Permission sind inline Komponenten-Zustaende, keine Modale. + +
+
+
+
@@ -2097,6 +2335,9 @@
Entscheidung D01 +
+ D01 angewendet +

Was du festlegst

@@ -2123,6 +2364,10 @@
Entscheidung: Darf HiveGrid den 8px-Rhythmus mit 4px/12px-Ausnahmen nutzen?
+
+ D01 Spacing Scale +

Die Skala darunter zeigt die erlaubten Standardwerte visuell. Werte ausserhalb dieser Skala sollen nicht als neue Layout-Standards eingefuehrt werden.

+
@@ -2177,6 +2422,10 @@ dem Rand eines Containers und seinem Inhalt. Tuerkise Flaechen zeigen Gap: Abstand zwischen getrennten Elementen.

+
+ D02 sichtbar + D01 Werteskala +
@@ -2197,6 +2446,9 @@
Entscheidung D02 +
+ D02 angewendet +

Was du festlegst

@@ -2229,6 +2481,10 @@ Grosse Detail-/Editorflaechen starten ebenfalls mit 16px; 32px ist nur ueber die eigene Dialog-Variante erlaubt.
+
+ D02 Page/Card/Grid +

Die Beispiele darunter zeigen bewusst Vergleichswerte. Der blaue Rahmen markiert den validierten Standard; nicht jede gezeigte Variante ist automatisch freigegeben.

+
@@ -2641,6 +2897,9 @@
Entscheidung D03 +
+ D03 angewendet +

Was du festlegst

@@ -2679,6 +2938,12 @@ sowie 12px zwischen Section Beschreibung und Inhalt. Page-/Section- Beschreibungen muessen dafuer 150%-Texttokens nutzen.
+
+ D03 Text-Rhythmus: Die 0px-Gaps sind bewusst + definiert, weil 150%-Texttokens bereits optische Hoehe erzeugen. + Der stabile Abstand zum naechsten Inhalt bleibt 24px im Header und + 12px in Sections. +
@@ -2944,6 +3209,9 @@
Komponenten-Ownership +
+ D04 Ownership +

Was fuer Screens gilt

@@ -2970,6 +3238,11 @@
Keine eigene D04-Layoutentscheidung: Button Default/Medium 36px fuer Standardaktionen verwenden.
+
+ D04 Button Ownership: Screens verwenden fuer + Standardaktionen die Default/Medium-Buttonvariante. Button-Groesse + und Innenpadding werden nicht in Screen-Prompts nachgebaut. +
@@ -3011,6 +3284,9 @@
Entscheidung D05 +
+ D05 angewendet +

Was du festlegst

@@ -3038,6 +3314,11 @@
Entschieden: Form Field Gap 16px. Field-Anatomy selbst kommt aus der jeweiligen Komponente.
+
+ D05 Form Gap: Komplette Field-Komponenten stehen + standardmaessig 16px auseinander. Label, Help, Error und Control + bleiben Aufgabe der jeweiligen Komponente. +
@@ -3110,6 +3391,9 @@
Komponenten-Ownership +
+ D06 Ownership +

Carbon-Referenz

@@ -3139,6 +3423,11 @@
Keine eigene D06-Layoutentscheidung: Table-Komponente nutzen; Carbon als Referenz fuer passende Row-Size-Systematik.
+
+ D06 Table Ownership: Screens setzen Tabellen als + Komponente ein. Row-Height, Zellpadding und Tabellen-Dichte werden + dort gepflegt; Carbon dient nur als Referenz fuer die Systematik. +
@@ -3192,6 +3481,9 @@
Entscheidung D07 +
+ D07 angewendet +

Was du festlegst

@@ -3220,6 +3512,12 @@ Entschieden: XS 420px, S 560px, M 720px, L 1200px max. Fullscreen Dialog nutzt Fill mit 24px aeusserem Rand pro Seite und `max-width: 2512px`.
+
+ D07 Dialog Size: Normale Dialoge nutzen feste + Breitenklassen und wachsen auf grossen Monitoren nicht unendlich. + Fullscreen Dialoge fuellen die Flaeche, behalten aber 24px Rand und + eine maximale Breite von 2512px. +
@@ -3442,6 +3740,9 @@
Entscheidung D08 validiert +
+ D08 angewendet +

Was du festlegst

@@ -3471,6 +3772,11 @@
Entschieden: Balanced wird Standard. Title Gap 8px, Field Gap 16px, Section Gap 24px, Button Gap 8px.
+
+ D08 Dialog Internal Gaps: Balanced ist Standard: + 8px Title Gap, 16px Field Gap, 24px Section Gap und 8px Button Gap. + Dialog-Padding selbst kommt aus den Dialog-Varianten. +
@@ -3682,6 +3988,9 @@
Komponenten-Ownership +
+ D09 Ownership +

Was hier gemeint ist

@@ -3709,6 +4018,12 @@
Keine neue D09-Layout-Regel: Screens sollen die vorhandenen State-Komponenten verwenden. No-Permission muss bei Bedarf als Komponentenfrage validiert werden.
+
+ D09 States: Empty, Error und No-Permission sind + inline Inhaltszustaende. Sie werden ueber vorhandene Komponenten + abgebildet und sind nur dann ein eigener Screen, wenn daraus ein + echter Screen- oder Dialog-Zustand entsteht. +
@@ -3740,11 +4055,17 @@ diff --git a/Tickets/Fertige Tickets/D-D0b Layout Standards.md b/Tickets/Fertige Tickets/D-D0b Layout Standards.md index 2771c7de..28eba266 100644 --- a/Tickets/Fertige Tickets/D-D0b Layout Standards.md +++ b/Tickets/Fertige Tickets/D-D0b Layout Standards.md @@ -26,6 +26,8 @@ Full-Page-Preview: [D-D0b Full Page Preview](../../02%20Wireframes/D0%20Foundati Lokale Arbeitskopie der Preview: `99 Temp/D-D0b Layout Preview/index.html` +Hinweis: Die HTML-Preview hat einen ausklappbaren Standards-Drawer und optionale Rule-Hints, damit die angewendeten Regeln direkt im Beispiel auffindbar sind. + ## Kurzfassung Fuer `D-D0b` wurden die grundlegenden Layout- und Composition-Standards fuer HiveGrid validiert, dokumentiert und in die dauerhaften Subframe UI Standards uebertragen. @@ -45,6 +47,7 @@ Eine bereinigte Kopie der Preview liegt versioniert im D-D0b-Ordner, damit sie z - Backlog-Punkte in eigene Backlog-Datei ausgelagert. - Lokale Preview behalten und als lokale Referenzhilfe markiert. - HTML-Preview und Full-Page-Preview als versionierte Referenzdateien im D-D0b-Ordner abgelegt. +- Regel-Inspector in der HTML-Preview ergaenzt, damit D01-D09 im Beispiel sichtbar und anspringbar sind. ## Validiert