Clean up D-D0b preview references

This commit is contained in:
david committed 2026-07-03 00:34:30 +02:00
1 parent a18acf4900
commit 91180a82bf
6 files changed
+968 -49

No files matched your search

@@ -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.
File diff suppressed because it is too large. Load diff
@@ -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>