Clean up D-D0b preview references
This commit is contained in:
1 parent
a18acf4900
commit
91180a82bf
6 files changed
+968
-49
No files matched your search
+7
-5
@@ -3,7 +3,7 @@ kind: final-planning
|
||||
ticket: D-D0b
|
||||
area: Layout Standards
|
||||
status: Abgeschlossen
|
||||
stand: 2026-07-02
|
||||
stand: 2026-07-03
|
||||
---
|
||||
|
||||
# D-D0b Layout Standards
|
||||
@@ -18,11 +18,13 @@ Source of Truth fuer spaetere Screen-Arbeit:
|
||||
- [Subframe UI Standards / Entscheidungen](<../../../04 Standards/Subframe UI Standards/02_Entscheidungen.md>)
|
||||
- [D-D0b Backlog](<D-D0b Backlog.md>)
|
||||
|
||||
Lokale Vorschau:
|
||||
HTML-Preview:
|
||||
|
||||
- Versioniertes Ticket-Artefakt: [D-D0b Layout Preview](<../../../Tickets/Fertige Tickets/Assets/D-D0b-Layout-Preview.html>)
|
||||
- `99 Temp/D-D0b Layout Preview/index.html`
|
||||
- Die Preview bleibt als lokale Arbeitskopie erhalten, ist aber kein Source of Truth.
|
||||
- Versionierte Referenz: [D-D0b Layout Preview](<Preview/index.html>)
|
||||
- Separate Full-Page-Vorschau: [D-D0b Full Page Preview](<Preview/preview.html>)
|
||||
- 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 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.
|
||||
|
||||
+26
-21
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>D-D0b Layout Preview Lab</title>
|
||||
<title>D-D0b Layout Preview</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f6f8fa;
|
||||
@@ -1988,29 +1988,32 @@
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<div class="mark">D0</div>
|
||||
<span>D-D0b Layout Preview Lab</span>
|
||||
<div class="mark">D0b</div>
|
||||
<span>D-D0b Layout Preview</span>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<button class="marker-toggle" id="gapToggle" type="button" aria-pressed="true">
|
||||
<span>Spacing Tiles</span>
|
||||
<span class="marker-toggle-switch" aria-hidden="true"></span>
|
||||
</button>
|
||||
<a class="button sm secondary" href="preview.html">Preview</a>
|
||||
<a class="button sm secondary" href="#overview">Uebersicht</a>
|
||||
<a class="button sm secondary" href="preview.html">Full Page</a>
|
||||
<a class="button sm secondary" href="#d01">D01</a>
|
||||
<a class="button sm secondary" href="#d02">D02</a>
|
||||
<a class="button sm secondary" href="#d03">D03</a>
|
||||
<a class="button sm secondary" href="#d04">D04</a>
|
||||
<a class="button sm secondary" href="#d05">D05</a>
|
||||
<a class="button sm secondary" href="#d06">D06</a>
|
||||
<a class="button sm secondary" href="#d07">D07</a>
|
||||
<a class="button sm secondary" href="#d08">D08</a>
|
||||
<a class="button sm secondary" href="#d09">D09</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<section id="overview" class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Local reference preview</p>
|
||||
<p class="eyebrow">Versioned reference preview</p>
|
||||
<h1>Layout, spacing and sizing decisions</h1>
|
||||
<p class="subtitle">
|
||||
This page preserves the visual examples used for D-D0b. It helps
|
||||
@@ -2019,9 +2022,9 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="note">
|
||||
Kept intentionally: this local HTML preview remains available for
|
||||
visual review. Final rules live in the Obsidian Markdown files and in
|
||||
the Subframe UI Standards.
|
||||
Kept intentionally: this HTML preview is stored with the D-D0b
|
||||
planning files for visual review. Final rules live in the Obsidian
|
||||
Markdown files and in the Subframe UI Standards.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -2038,7 +2041,7 @@
|
||||
</div>
|
||||
<div class="decision-map">
|
||||
<a class="decision-link" href="preview.html">
|
||||
<strong>Preview Page</strong>
|
||||
<strong>Full Page Preview</strong>
|
||||
<span>Oeffnet eine eigene Full-Page-Dummyseite mit App Shell und Layout-Umschaltern.</span>
|
||||
</a>
|
||||
<a class="decision-link" href="#d01">
|
||||
@@ -2075,7 +2078,7 @@
|
||||
</a>
|
||||
<a class="decision-link" href="#d09">
|
||||
<strong>D09 States</strong>
|
||||
<span>Wie viel Platz bekommen Empty, Error und No-Permission?</span>
|
||||
<span>States sind inline Komponenten-Zustaende, keine eigenen Layout-Screens.</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -2085,8 +2088,9 @@
|
||||
<div class="section-copy">
|
||||
<h2>D01 Grundraster / Spacing Scale</h2>
|
||||
<p class="section-desc">
|
||||
Candidate rhythm based on 4/8px multiples. Use this to decide
|
||||
which gaps feel too tight, balanced or too loose.
|
||||
Validierter 8px-Rhythmus mit erlaubten Zwischenwerten. Nutze
|
||||
diese Ansicht als visuelle Referenz fuer die freigegebenen
|
||||
Layout-Abstaende.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2642,10 +2646,10 @@
|
||||
<p class="decision-kicker">Was du festlegst</p>
|
||||
<h3>Wie eng stehen Textbloecke und der erste Inhalt zusammen?</h3>
|
||||
<p>
|
||||
Diese Entscheidung ist noch nicht final. D03 betrifft nur die
|
||||
vertikalen Gaps zwischen gerenderten Textbloecken und Inhalt.
|
||||
Die Text-Token bleiben eigene Token-Regeln, beeinflussen aber die
|
||||
optische Hoehe des Blocks.
|
||||
D03 ist validiert. Die Regel betrifft die vertikalen Gaps
|
||||
zwischen gerenderten Textbloecken und Inhalt. Beschreibende
|
||||
Page- und Section-Texte muessen 150%-Texttokens nutzen, weil
|
||||
die Line-height die optische Hoehe des Blocks beeinflusst.
|
||||
</p>
|
||||
<div class="rhythm-legend">
|
||||
<span class="value-chip">Title -> Description</span>
|
||||
@@ -2996,7 +3000,7 @@
|
||||
<section id="d05" class="section">
|
||||
<div class="section-head">
|
||||
<div class="section-copy">
|
||||
<h2>D05 Form composition</h2>
|
||||
<h2>D05 Form Layout Gap</h2>
|
||||
<p class="section-desc">
|
||||
Formular-Layout meint hier nur den Abstand zwischen kompletten
|
||||
Field-Komponenten. Label, Beschreibung, Control und Message
|
||||
@@ -3177,10 +3181,11 @@
|
||||
<section id="d07" class="section">
|
||||
<div class="section-head">
|
||||
<div class="section-copy">
|
||||
<h2>D07 Dialog width candidates</h2>
|
||||
<h2>D07 Dialog Sizes</h2>
|
||||
<p class="section-desc">
|
||||
These are static width previews. In Subframe this must still be
|
||||
built with real Dialog layouts.
|
||||
Validierte Breiten fuer zentrierte Dialoge und Fullscreen
|
||||
Dialoge. In Subframe muessen diese Beispiele mit echten Dialog
|
||||
Layouts gebaut werden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,885 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>D-D0b Full Page Preview</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f6f8fa;
|
||||
--surface: #ffffff;
|
||||
--surface-subtle: #f1f4f7;
|
||||
--border: #dce3ea;
|
||||
--border-strong: #b8c4cf;
|
||||
--text: #172635;
|
||||
--muted: #5c6f82;
|
||||
--muted-2: #74879a;
|
||||
--primary: #2458d3;
|
||||
--danger: #b42318;
|
||||
--success: #147a46;
|
||||
--warning: #9a5b00;
|
||||
--radius: 8px;
|
||||
--control-h: 40px;
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.preview-page {
|
||||
--preview-page-pad: 24px;
|
||||
--preview-card-pad: 16px;
|
||||
--preview-gap: 16px;
|
||||
--preview-section-gap: 24px;
|
||||
--preview-editor-pad: 16px;
|
||||
--preview-shell-sidebar: 232px;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-page:has(#density-compact:checked) {
|
||||
--preview-page-pad: 24px;
|
||||
--preview-card-pad: 16px;
|
||||
--preview-gap: 12px;
|
||||
--preview-section-gap: 24px;
|
||||
--preview-editor-pad: 16px;
|
||||
}
|
||||
|
||||
.preview-page:has(#density-standard:checked) {
|
||||
--preview-page-pad: 24px;
|
||||
--preview-card-pad: 16px;
|
||||
--preview-gap: 16px;
|
||||
--preview-section-gap: 24px;
|
||||
--preview-editor-pad: 16px;
|
||||
}
|
||||
|
||||
.preview-page:has(#density-editor:checked) {
|
||||
--preview-page-pad: 24px;
|
||||
--preview-card-pad: 16px;
|
||||
--preview-gap: 16px;
|
||||
--preview-section-gap: 24px;
|
||||
--preview-editor-pad: 32px;
|
||||
}
|
||||
|
||||
.preview-config {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.preview-config-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.preview-config-copy {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--muted-2);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.preview-config h1 {
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
margin-top: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.preview-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.control-group legend {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.segmented-option {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.segmented-option input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.segmented-option:has(input:checked) {
|
||||
background: var(--text);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 16px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
border-color: var(--border-strong);
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.button.sm {
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.preview-values {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.preview-values-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.small {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.value-set {
|
||||
display: none;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preview-page:has(#shell-on:checked) .values-shell-on,
|
||||
.preview-page:has(#shell-off:checked) .values-shell-off,
|
||||
.preview-page:has(#density-standard:checked) .values-density-standard,
|
||||
.preview-page:has(#density-compact:checked) .values-density-compact,
|
||||
.preview-page:has(#density-editor:checked) .values-density-editor {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.value-cell {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-height: 56px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.value-cell span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.value-cell strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app-preview {
|
||||
display: grid;
|
||||
grid-template-columns: var(--preview-shell-sidebar) minmax(0, 1fr);
|
||||
min-height: calc(100vh - 260px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-page:has(#shell-off:checked) .app-preview {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.preview-page:has(#shell-off:checked) .preview-sidebar,
|
||||
.preview-page:has(#shell-off:checked) .preview-app-topbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border-right: 1px solid var(--border);
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.workspace-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.workspace-mark {
|
||||
display: grid;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: var(--text);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.workspace-copy {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.workspace-copy strong,
|
||||
.workspace-copy span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.workspace-copy span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.preview-nav {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.preview-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.preview-nav a.active {
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
box-shadow: 0 0 0 1px var(--border);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 4px;
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.preview-app-main {
|
||||
min-width: 0;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.preview-app-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
min-height: 56px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-search {
|
||||
width: min(420px, 100%);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.preview-user-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.avatar-dot {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #dbe4ff, #bdd8ff);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.preview-page-content {
|
||||
display: grid;
|
||||
gap: var(--preview-gap);
|
||||
padding: var(--preview-page-pad);
|
||||
}
|
||||
|
||||
.preview-page-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.preview-page-head h2 {
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.preview-page-actions,
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preview-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--preview-gap);
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
padding: var(--preview-card-pad);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-card h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.preview-editor-card {
|
||||
padding: var(--preview-editor-pad);
|
||||
}
|
||||
|
||||
.preview-meta {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
font-weight: 750;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.preview-workspace-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
|
||||
gap: var(--preview-gap);
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.preview-list-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
min-height: 48px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-list-row strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #e8f6ee;
|
||||
color: var(--success);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pill.warning {
|
||||
background: #fff2d6;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.preview-table {
|
||||
overflow: hidden;
|
||||
margin-top: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 52px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.preview-editor-body {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr);
|
||||
gap: var(--preview-gap);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.preview-editor-side {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.preview-editor-side span {
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.preview-editor-side span.active {
|
||||
background: var(--surface-subtle);
|
||||
color: var(--text);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 88px;
|
||||
padding-top: 10px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.preview-config-head,
|
||||
.value-set,
|
||||
.preview-stat-grid,
|
||||
.preview-workspace-grid,
|
||||
.preview-editor-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.preview-config-head {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="preview-page">
|
||||
<section class="preview-config">
|
||||
<div class="preview-config-head">
|
||||
<div class="preview-config-copy">
|
||||
<p class="eyebrow">Full-page preview</p>
|
||||
<h1>D-D0b Preview Page</h1>
|
||||
<p class="section-desc">
|
||||
Eigene Full-Page-Vorschau fuer App-Shell-Breite, Page Padding,
|
||||
Card Padding und Grid-Gaps. Diese Seite ist bewusst von der
|
||||
D-Entscheidungsseite getrennt.
|
||||
</p>
|
||||
</div>
|
||||
<a class="button sm secondary" href="index.html#d02">Zurueck zu D02</a>
|
||||
</div>
|
||||
|
||||
<div class="preview-controls">
|
||||
<fieldset class="control-group">
|
||||
<legend>App Shell</legend>
|
||||
<label class="segmented-option">
|
||||
<input id="shell-on" type="radio" name="shell" checked />
|
||||
Mit App Shell
|
||||
</label>
|
||||
<label class="segmented-option">
|
||||
<input id="shell-off" type="radio" name="shell" />
|
||||
Ohne App Shell
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="control-group">
|
||||
<legend>Layout-Dichte</legend>
|
||||
<label class="segmented-option">
|
||||
<input id="density-standard" type="radio" name="density" checked />
|
||||
Admin Standard
|
||||
</label>
|
||||
<label class="segmented-option">
|
||||
<input id="density-compact" type="radio" name="density" />
|
||||
Kompakt
|
||||
</label>
|
||||
<label class="segmented-option">
|
||||
<input id="density-editor" type="radio" name="density" />
|
||||
Dialog 32px
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="preview-values">
|
||||
<div class="preview-values-head">
|
||||
<strong>Aktive Layout-Daten</strong>
|
||||
<span class="small">Diese Werte aendern sich durch die Umschalter.</span>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-shell-on">
|
||||
<div class="value-cell"><span>Shell</span><strong>An</strong></div>
|
||||
<div class="value-cell"><span>Sidebar</span><strong>232px</strong></div>
|
||||
<div class="value-cell"><span>Topbar</span><strong>56px sichtbar</strong></div>
|
||||
<div class="value-cell"><span>Content-Breite</span><strong>Viewport minus 232px</strong></div>
|
||||
<div class="value-cell"><span>Bewertung</span><strong>Produktansicht</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-shell-off">
|
||||
<div class="value-cell"><span>Shell</span><strong>Aus</strong></div>
|
||||
<div class="value-cell"><span>Sidebar</span><strong>0px</strong></div>
|
||||
<div class="value-cell"><span>Topbar</span><strong>ausgeblendet</strong></div>
|
||||
<div class="value-cell"><span>Content-Breite</span><strong>volle Preview-Breite</strong></div>
|
||||
<div class="value-cell"><span>Bewertung</span><strong>Canvas/Modal-Kontext</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-density-standard">
|
||||
<div class="value-cell"><span>Modus</span><strong>Admin Standard</strong></div>
|
||||
<div class="value-cell"><span>Page Padding</span><strong>24px</strong></div>
|
||||
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Grid/Card Gap</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Detail-/Editor Padding</span><strong>16px</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-density-compact">
|
||||
<div class="value-cell"><span>Modus</span><strong>Kompakt</strong></div>
|
||||
<div class="value-cell"><span>Page Padding</span><strong>24px min</strong></div>
|
||||
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Grid/Card Gap</span><strong>12px</strong></div>
|
||||
<div class="value-cell"><span>Detail-/Editor Padding</span><strong>16px</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-density-editor">
|
||||
<div class="value-cell"><span>Modus</span><strong>Dialog 32px</strong></div>
|
||||
<div class="value-cell"><span>Page Padding</span><strong>24px</strong></div>
|
||||
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Grid/Card Gap</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Dialog Padding</span><strong>32px Variante</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="app-preview">
|
||||
<aside class="preview-sidebar">
|
||||
<div class="workspace-switcher">
|
||||
<div class="workspace-mark">HG</div>
|
||||
<div class="workspace-copy">
|
||||
<strong>HiveGrid Demo</strong>
|
||||
<span>Workspace</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="preview-nav" aria-label="Preview navigation">
|
||||
<a href="#" class="active"><span class="nav-icon"></span>Overview</a>
|
||||
<a href="#"><span class="nav-icon"></span>Customers</a>
|
||||
<a href="#"><span class="nav-icon"></span>Projects</a>
|
||||
<a href="#"><span class="nav-icon"></span>Tasks</a>
|
||||
<a href="#"><span class="nav-icon"></span>Reports</a>
|
||||
<a href="#"><span class="nav-icon"></span>Settings</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="preview-app-main">
|
||||
<header class="preview-app-topbar">
|
||||
<input class="preview-search" value="Search anything" aria-label="Search anything" />
|
||||
<div class="preview-user-area">
|
||||
<span class="button sm secondary">New</span>
|
||||
<span class="button sm secondary">Export</span>
|
||||
<div class="avatar-dot" aria-hidden="true"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="preview-page-content">
|
||||
<div class="preview-page-head">
|
||||
<div>
|
||||
<p class="eyebrow">Workspace overview</p>
|
||||
<h2>Operations dashboard</h2>
|
||||
<p class="section-desc">
|
||||
Beispielseite fuer App-Shell-Breite, Page Padding,
|
||||
Card-Padding und Grid-Gaps im laufenden Produktkontext.
|
||||
</p>
|
||||
</div>
|
||||
<div class="preview-page-actions">
|
||||
<span class="button secondary">Filter</span>
|
||||
<span class="button">Create task</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-stat-grid">
|
||||
<div class="preview-card">
|
||||
<p class="small">Open leads</p>
|
||||
<div class="stat-value">128</div>
|
||||
<p class="preview-meta">+12 this week</p>
|
||||
</div>
|
||||
<div class="preview-card">
|
||||
<p class="small">Active projects</p>
|
||||
<div class="stat-value">42</div>
|
||||
<p class="preview-meta">8 need review</p>
|
||||
</div>
|
||||
<div class="preview-card">
|
||||
<p class="small">Team workload</p>
|
||||
<div class="stat-value">76%</div>
|
||||
<p class="preview-meta">Balanced</p>
|
||||
</div>
|
||||
<div class="preview-card">
|
||||
<p class="small">Pending approvals</p>
|
||||
<div class="stat-value">9</div>
|
||||
<p class="preview-meta">3 overdue</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-workspace-grid">
|
||||
<section class="preview-card">
|
||||
<h3>Recent work</h3>
|
||||
<p class="preview-meta">Tasks, customers and approvals in one dense page area.</p>
|
||||
<div class="preview-list">
|
||||
<div class="preview-list-row">
|
||||
<div>
|
||||
<strong>Review onboarding workspace</strong>
|
||||
<span class="preview-meta">Assigned to Admin Team</span>
|
||||
</div>
|
||||
<span class="pill warning">Due today</span>
|
||||
</div>
|
||||
<div class="preview-list-row">
|
||||
<div>
|
||||
<strong>Prepare customer import</strong>
|
||||
<span class="preview-meta">CRM setup</span>
|
||||
</div>
|
||||
<span class="pill">Active</span>
|
||||
</div>
|
||||
<div class="preview-list-row">
|
||||
<div>
|
||||
<strong>Approve role changes</strong>
|
||||
<span class="preview-meta">Security settings</span>
|
||||
</div>
|
||||
<span class="pill warning">Review</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="preview-card">
|
||||
<h3>Workspace health</h3>
|
||||
<p class="preview-meta">
|
||||
Kompakte Settings- und Statusflaeche mit denselben
|
||||
D02-Basiswerten wie die Standardseite.
|
||||
</p>
|
||||
<div class="preview-list">
|
||||
<div class="preview-list-row"><span>Members</span><strong>24</strong></div>
|
||||
<div class="preview-list-row"><span>2FA coverage</span><strong>91%</strong></div>
|
||||
<div class="preview-list-row"><span>Open invites</span><strong>3</strong></div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section class="preview-card">
|
||||
<div class="preview-page-head">
|
||||
<div>
|
||||
<h3>Employee access</h3>
|
||||
<p class="preview-meta">Table area for judging page width inside and outside the shell.</p>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<input style="width: 220px" value="Search employees" />
|
||||
<span class="button sm secondary">Role</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th>Department</th>
|
||||
<th>Status</th>
|
||||
<th style="text-align: right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>David Bertram</td>
|
||||
<td>Admin</td>
|
||||
<td>Operations</td>
|
||||
<td><span class="pill">Active</span></td>
|
||||
<td style="text-align: right">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anna Keller</td>
|
||||
<td>Finance Lead</td>
|
||||
<td>Finance</td>
|
||||
<td><span class="pill">Active</span></td>
|
||||
<td style="text-align: right">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Max Hoffmann</td>
|
||||
<td>Employee</td>
|
||||
<td>Support</td>
|
||||
<td><span class="pill warning">Pending</span></td>
|
||||
<td style="text-align: right">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="preview-card preview-editor-card">
|
||||
<h3>Dialog 32px Variante</h3>
|
||||
<p class="preview-meta">
|
||||
Dieser Modus macht nur diese grosse Arbeitsflaeche innen
|
||||
groesser. Das steht fuer die groessere Subframe-Dialog-Variante,
|
||||
nicht fuer frei gesetztes Padding auf normalen Surfaces.
|
||||
</p>
|
||||
<div class="preview-editor-body">
|
||||
<div class="preview-editor-side">
|
||||
<span class="active">Role</span>
|
||||
<span>Contacts</span>
|
||||
<span>Projects</span>
|
||||
<span>Reports</span>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="field">
|
||||
<label>Role name</label>
|
||||
<input value="Operations Lead" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Description</label>
|
||||
<textarea>Can review operations, assign team tasks and manage project handoffs.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -51,6 +51,32 @@ Offen:
|
||||
|
||||
## Verlauf
|
||||
|
||||
### 2026-07-03 00:32:55 Europe/Berlin - D-D0b Preview und Abschlussstruktur bereinigt
|
||||
|
||||
Kontext:
|
||||
- David hat kritisiert, dass die HTML-Preview nicht sauber auffindbar war und in der Navigation D04/D09 fehlten.
|
||||
- Die finale D-D0b-Datei sollte nicht mehr als Brainstorming-Datei erscheinen.
|
||||
- Backlog, Entscheidungen und Preview-Referenzen sollten eindeutiger sortiert sein.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Backlog.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/preview.html`
|
||||
- `Tickets/Fertige Tickets/D-D0b Layout Standards.md`
|
||||
- [[AI/08_AI-Change-History]]
|
||||
|
||||
Aenderungen:
|
||||
- D-D0b-Hauptdatei von Brainstorming auf finalen Standards-Dateinamen umgestellt.
|
||||
- Preview-Dateien in den D-D0b-Ordner verschoben, damit sie zusammen mit den Layout-Entscheidungen auffindbar sind.
|
||||
- Top-Navigation der HTML-Preview auf D01 bis D09 vervollstaendigt.
|
||||
- Alte nicht-finale Preview-Texte bereinigt.
|
||||
- D09 in der Preview als State-/Component-Ownership statt als Padding-Frage beschrieben.
|
||||
- Ticket-Handoff auf die neuen Preview- und Standards-Pfade aktualisiert.
|
||||
|
||||
Offen:
|
||||
- Keine.
|
||||
|
||||
### 2026-07-03 00:20:15 Europe/Berlin - Subframe-MCP Nutzung der Layout-Standards festgeschrieben
|
||||
|
||||
Kontext:
|
||||
@@ -59,12 +85,12 @@ Kontext:
|
||||
|
||||
Betroffene Dateien:
|
||||
- `AI README.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `04 Standards/Subframe UI Standards/Layout/README.md`
|
||||
- [[AI/07_AI-References]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
- `Tickets/Fertige Tickets/D-D0b Layout Standards.md`
|
||||
- `Tickets/Fertige Tickets/Assets/D-D0b-Layout-Preview.html`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html`
|
||||
|
||||
Aenderungen:
|
||||
- Pflichtregel ergaenzt, dass Subframe-MCP-Prompts und Edits die validierten Layout-Standards als aktive Referenz nutzen muessen.
|
||||
@@ -83,7 +109,7 @@ Kontext:
|
||||
- Backlog-Punkte sollten aus der Abschlussdoku in eine eigene Seite ausgelagert werden.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Backlog.md`
|
||||
- `04 Standards/Subframe UI Standards/Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
@@ -112,7 +138,7 @@ Kontext:
|
||||
- Die Preview sollte 0px sichtbar machen, ohne selbst Abstand zu erzeugen.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -136,7 +162,7 @@ Kontext:
|
||||
- D03 Text-Rhythmus musste in der Preview sichtbarer und verstaendlicher werden.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -160,7 +186,7 @@ Kontext:
|
||||
- Blockierende Error-/Result-Dialoge sollen spaeter separat als Overlay-/Feedback-Komponenten betrachtet werden.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- [[06_Backlog]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
|
||||
@@ -181,7 +207,7 @@ Kontext:
|
||||
- Mehrzeilige Texte nutzen die 150%-Texttoken, wodurch Textbloecke selbst hoeher werden.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[06_Backlog]]
|
||||
@@ -205,7 +231,7 @@ Kontext:
|
||||
- Als obere Grenze wurde die Breite eines 2K-Monitors abzüglich des validierten aeusseren Dialogrands verwendet.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -226,7 +252,7 @@ Kontext:
|
||||
- Fullscreen Dialog soll Fill in Breite und Hoehe nutzen, aber mit sichtbarem aeusserem Rand.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -267,7 +293,7 @@ Kontext:
|
||||
- Die Definition ist Voraussetzung, bevor Dialogbreiten sinnvoll validiert werden koennen.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -291,7 +317,7 @@ Kontext:
|
||||
- Stattdessen bekommt die Subframe-`Dialog`-Komponente zwei Varianten: 16px Default und 32px groesser/ruhiger.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -314,7 +340,7 @@ Kontext:
|
||||
- 32px Innenabstand sollte zu diesem Zeitpunkt nicht frei als Standard gelten. Kurz danach wurde er als eigene Subframe-`Dialog`-Variante validiert.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -338,7 +364,7 @@ Kontext:
|
||||
- Detail-/Editor-Surface Padding wurde zu diesem Zeitpunkt noch als offener Sonderfall notiert und am 2026-07-02 auf 16px als Standard praezisiert.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -364,7 +390,7 @@ Kontext:
|
||||
- Mobile soll aus der aktiven Preview entfernt bleiben und grosse Detail-/Editorflaechen sind noch unklar.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -389,7 +415,7 @@ Kontext:
|
||||
- David hat entschieden, Mobile vorerst nicht in D02 zu validieren, sondern in den Backlog zu legen.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- [[06_Backlog]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
- `99 Temp/D-D0b Layout Preview/index.html`
|
||||
@@ -410,7 +436,7 @@ Kontext:
|
||||
- Gleichzeitig wurde geklaert, dass Layout-Standards nicht gegen bestehende Subframe-Komponenten-Defaults arbeiten sollen.
|
||||
|
||||
Betroffene Dateien:
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
- `Layout/README.md`
|
||||
- [[02_Entscheidungen]]
|
||||
- [[AI/08_AI-Change-History]]
|
||||
@@ -471,7 +497,7 @@ Betroffene Dateien:
|
||||
- `AI README.md`
|
||||
- `01 Regeln/Obsidian Struktur.md`
|
||||
- `01 Regeln/Screen Agent Workflow.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
|
||||
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
|
||||
|
||||
Aenderungen:
|
||||
- HiveGrid-Kontext, Zweck, Abgrenzung und Aenderungsschutz fuer das Subframe UI Standards dokumentiert.
|
||||
|
||||
@@ -5,14 +5,14 @@ ticket: D-D0b
|
||||
area: Foundation / Layout Standards
|
||||
status: Fertig / Review
|
||||
repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes
|
||||
stand: 2026-07-02
|
||||
stand: 2026-07-03
|
||||
---
|
||||
|
||||
# D-D0b Layout Standards
|
||||
|
||||
Repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes
|
||||
|
||||
Arbeitsbereich im Repo: [D-D0b Layout Standards](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Layout%20Brainstorming.md)
|
||||
Arbeitsbereich im Repo: [D-D0b Layout Standards](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Layout%20Standards.md)
|
||||
|
||||
Backlog: [D-D0b Backlog](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Backlog.md)
|
||||
|
||||
@@ -20,7 +20,9 @@ Dauerhafte Standards: [Subframe UI Standards / Layout](../../04%20Standards/Subf
|
||||
|
||||
Entscheidungslog: [Subframe UI Standards / Entscheidungen](../../04%20Standards/Subframe%20UI%20Standards/02_Entscheidungen.md)
|
||||
|
||||
HTML-Preview-Artefakt: [D-D0b Layout Preview](<Assets/D-D0b-Layout-Preview.html>)
|
||||
HTML-Preview: [D-D0b Layout Preview](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/Preview/index.html)
|
||||
|
||||
Full-Page-Preview: [D-D0b Full Page Preview](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/Preview/preview.html)
|
||||
|
||||
Lokale Arbeitskopie der Preview: `99 Temp/D-D0b Layout Preview/index.html`
|
||||
|
||||
@@ -30,7 +32,7 @@ Fuer `D-D0b` wurden die grundlegenden Layout- und Composition-Standards fuer Hiv
|
||||
|
||||
Die HTML-Preview bleibt lokal erhalten, ist aber nicht Source of Truth. Die verbindlichen Regeln stehen in den Markdown-Dateien.
|
||||
|
||||
Eine bereinigte Kopie der Preview liegt als Ticket-Artefakt im Repo, damit sie spaeter direkt aus dem fertigen Ticket heraus referenziert werden kann.
|
||||
Eine bereinigte Kopie der Preview liegt versioniert im D-D0b-Ordner, damit sie zusammen mit den Layout-Entscheidungen auffindbar bleibt und aus diesem Ticket heraus referenziert werden kann.
|
||||
|
||||
## Gemacht
|
||||
|
||||
@@ -42,7 +44,7 @@ Eine bereinigte Kopie der Preview liegt als Ticket-Artefakt im Repo, damit sie s
|
||||
- Dialog-interne Gaps validiert.
|
||||
- Backlog-Punkte in eigene Backlog-Datei ausgelagert.
|
||||
- Lokale Preview behalten und als lokale Referenzhilfe markiert.
|
||||
- HTML-Preview als versioniertes Ticket-Artefakt abgelegt.
|
||||
- HTML-Preview und Full-Page-Preview als versionierte Referenzdateien im D-D0b-Ordner abgelegt.
|
||||
|
||||
## Validiert
|
||||
|
||||
|
||||
@@ -7,7 +7,6 @@ Dieser Bereich ist der Handoff-Index fuer Ticket-Zusammenfassungen.
|
||||
| Pfad | Zweck |
|
||||
|---|---|
|
||||
| `Fertige Tickets/` | fertige oder handofffaehige Ticket-Zusammenfassungen |
|
||||
| `Fertige Tickets/Assets/` | referenzierbare Zusatzartefakte fuer fertige Tickets, z. B. HTML-Previews |
|
||||
|
||||
## Regel
|
||||
|
||||
|
||||
Reference in new issue
Block a user