f5438c4c36
Brainstorming artifact: 5 HTML mockups comparing approaches to fill the sparse right-hand space on /briefwechsel rows (reported by users as "feels empty"): 1. Rich Rows — dense metadata, no images 2. Thumbnail Rows — PDF preview on the left 3. Master-Detail Split — list + persistent preview panel 4. Gallery Cards — grid of letter cards, album style 5. Person Dashboard — insights live on /persons/[id], not here Picked: #2 (Thumbnail Rows) + #5 (Person Dashboard), followed up by final specs in separate commit. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
223 lines
12 KiB
HTML
223 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Spec 3 — Master-Detail · Briefwechsel</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="_shared.css">
|
||
<style>
|
||
/* Spec 3 specific */
|
||
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start}
|
||
@media (max-width: 1100px){ .split{grid-template-columns:1fr} .preview-col{position:static !important} }
|
||
|
||
/* List (compact) */
|
||
.rlist{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
|
||
.row{display:grid;grid-template-columns:16px 1fr auto;column-gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-2);border-left:3px solid transparent;cursor:pointer}
|
||
.row:hover{background:var(--muted)}
|
||
.row.out{border-left-color:var(--primary)}
|
||
.row.in{border-left-color:var(--accent)}
|
||
.row.sel{background:#e7f4f3;border-left-color:var(--brand-mint);box-shadow:inset 2px 0 0 var(--accent)}
|
||
.row-arrow{font-size:13px;opacity:.55}
|
||
.row-body{min-width:0}
|
||
.row-title{font-family:'Merriweather',serif;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
|
||
.row-sub{font-size:11px;color:var(--ink-3);display:flex;gap:6px;align-items:center}
|
||
.row-sub .sep{color:#ccc}
|
||
.row-right{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
|
||
|
||
/* Preview panel */
|
||
.preview-col{position:sticky;top:20px}
|
||
.preview{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04)}
|
||
.prev-hdr{padding:16px 20px;background:#fafaf5;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
|
||
.prev-hdr-left .prev-kind{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:4px}
|
||
.prev-hdr-left h2{font-family:'Merriweather',serif;font-size:18px;color:var(--brand-navy);line-height:1.35}
|
||
.prev-hdr .close{font-size:18px;color:#999;cursor:pointer}
|
||
.prev-body{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:20px}
|
||
.prev-thumb{width:200px;height:260px;flex-shrink:0}
|
||
.prev-thumb .thumb{width:100%;height:100%}
|
||
.prev-meta{display:flex;flex-direction:column;gap:14px}
|
||
.mkv{display:grid;grid-template-columns:92px 1fr;row-gap:6px;column-gap:10px;font-size:12px;color:#444}
|
||
.mkv .k{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#888;padding-top:2px}
|
||
.mkv .v{color:var(--ink)}
|
||
.mkv .v b{color:var(--brand-navy)}
|
||
.prev-summary{background:#fbfaf5;border-left:3px solid var(--brand-mint);padding:10px 14px;font-family:'Merriweather',serif;font-size:13px;color:#333;line-height:1.65;font-style:italic}
|
||
.prev-tags{display:flex;flex-wrap:wrap;gap:5px}
|
||
.prev-excerpt{padding:0 20px 18px;font-family:'Merriweather',serif;font-size:13px;color:#444;line-height:1.75;border-top:1px dashed var(--line);padding-top:18px}
|
||
.prev-excerpt .lbl{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:8px;display:block;font-style:normal}
|
||
.prev-actions{border-top:1px solid var(--line);padding:12px 20px;background:#fafaf5;display:flex;gap:8px;justify-content:flex-end}
|
||
.prev-actions .btn.primary{background:var(--brand-navy);color:#fff;border-color:var(--brand-navy)}
|
||
.prev-hint{padding:14px 20px;background:#f7f5f2;color:#777;font-size:11.5px;border-top:1px dashed var(--line);font-style:italic}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="spec-meta">
|
||
<div class="spec-meta-inner">
|
||
<div>
|
||
<h1>Briefwechsel — <span>Fill the Empty Rows</span></h1>
|
||
<p>Five approaches to turning the empty right-hand space into information that helps users scan and decide.</p>
|
||
</div>
|
||
<div class="spec-meta-right">
|
||
<div><strong>Concept</strong>Master-Detail Split</div>
|
||
<div><strong>Spec</strong>3 / 5</div>
|
||
<div><strong>Effort</strong>Medium — requires selection state</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<nav class="spec-nav">
|
||
<div class="spec-nav-inner">
|
||
<span class="lbl">Specs</span>
|
||
<a href="index.html">Overview</a>
|
||
<a href="01-rich-rows.html">1 · Rich Rows</a>
|
||
<a href="02-thumbnail-rows.html">2 · Thumbnail Rows</a>
|
||
<a class="on" href="03-master-detail.html">3 · Master-Detail Split</a>
|
||
<a href="04-gallery-cards.html">4 · Gallery Cards</a>
|
||
<a href="05-person-dashboard.html">5 · Person Dashboard</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="page-wrap">
|
||
|
||
<div class="hdr">
|
||
<div class="hdr-logo">FAMILIENARCHIV</div>
|
||
<div class="hdr-nav"><a>Documents</a><a>Persons</a><a class="on">Letters</a><a>Admin</a></div>
|
||
<div class="hdr-right"><div class="hdr-upload">⬆ UPLOAD</div><span>DE · EN · ES</span><div class="hdr-avatar">MR</div></div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
|
||
<div class="concept-intro">
|
||
<h2>Concept 3 · Master-Detail Split — list on left, preview panel on right</h2>
|
||
Keep the list compact (it stays scannable). Add a persistent right-hand panel that fills the empty space with a preview of the selected letter — thumbnail, metadata, summary, and a transcription excerpt when available. Click a row to swap its content; "Open" button still navigates to the full document page.
|
||
<div><span class="gain">✚ Users browse 10× more letters per session (no back-nav)</span><span class="gain">✚ Right column is always doing work</span><span class="cost">− On narrow viewports collapses to stacked</span><span class="cost">− Mobile pattern differs — needs sheet/drawer</span></div>
|
||
</div>
|
||
|
||
<!-- Filter card -->
|
||
<div class="card">
|
||
<div class="filter-row">
|
||
<div><div class="fl">Person</div><div class="fi">Walter de Gruyter</div></div>
|
||
<div><div class="fl">Korrespondent — optional</div><div class="fi empty">Alle Korrespondenten</div></div>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<div class="btn">Newest ↓</div><div class="btn">▾ Filter</div>
|
||
<div class="count"><b>851</b> Briefe</div>
|
||
</div>
|
||
<div class="hintbar">📋 Alle Briefe von <b>Walter de Gruyter</b> — wähle einen Korrespondenten oben um einzugrenzen</div>
|
||
</div>
|
||
|
||
<div class="split">
|
||
<!-- Master list -->
|
||
<div class="rlist">
|
||
<div class="year-divider"><span class="y">1940</span><span class="n">1 Brief</span></div>
|
||
<div class="row in">
|
||
<div class="row-arrow">←</div>
|
||
<div class="row-body">
|
||
<div class="row-title">Demo leserlicher Brief</div>
|
||
<div class="row-sub"><span>31. Mai 1940</span><span class="sep">·</span><span>Belgard</span><span class="sep">·</span><span>Gertrud von Rofden</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="year-divider"><span class="y">1923</span><span class="n">5 Briefe</span></div>
|
||
|
||
<div class="row out sel">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0397 – 2. September 1923 – B.Lichterfelde</div>
|
||
<div class="row-sub"><span>2. Sep 1923</span><span class="sep">·</span><span>B.Lichterfelde</span><span class="sep">·</span><span>Herbert Cram</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="row out">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0396 – 2. September 1923 – B.Lichterfelde</div>
|
||
<div class="row-sub"><span>2. Sep 1923</span><span class="sep">·</span><span>B.Lichterfelde</span><span class="sep">·</span><span>Herbert Cram</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="row out">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0524 – 31. Juli 1923 – Berlin</div>
|
||
<div class="row-sub"><span>31. Juli 1923</span><span class="sep">·</span><span>Berlin</span><span class="sep">·</span><span>Walter Dieckmann</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="row out">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0523 – 12. Mai 1923 – Berlin</div>
|
||
<div class="row-sub"><span>12. Mai 1923</span><span class="sep">·</span><span>Berlin</span><span class="sep">·</span><span>Walter Dieckmann</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="row out">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0522 – 7. März 1923 – Lindau Bodensee</div>
|
||
<div class="row-sub"><span>7. März 1923</span><span class="sep">·</span><span>Lindau Bodensee</span><span class="sep">·</span><span>Walter Dieckmann</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="year-divider"><span class="y">1922</span><span class="n">37 Briefe</span></div>
|
||
|
||
<div class="row out">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0521 – 24. Dezember 1922 – Berlin</div>
|
||
<div class="row-sub"><span>24. Dez 1922</span><span class="sep">·</span><span>Berlin</span><span class="sep">·</span><span>Walter Dieckmann</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detail preview -->
|
||
<div class="preview-col">
|
||
<div class="preview">
|
||
<div class="prev-hdr">
|
||
<div class="prev-hdr-left">
|
||
<div class="prev-kind">→ Ausgehend · an Herbert Cram</div>
|
||
<h2>W-0397 – 2. September 1923 – B.Lichterfelde</h2>
|
||
</div>
|
||
<div class="close">✕</div>
|
||
</div>
|
||
<div class="prev-body">
|
||
<div class="prev-thumb">
|
||
<div class="thumb handwritten"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
</div>
|
||
<div class="prev-meta">
|
||
<div class="mkv">
|
||
<div class="k">Datum</div><div class="v"><b>2. September 1923</b></div>
|
||
<div class="k">Ort</div><div class="v">B.Lichterfelde</div>
|
||
<div class="k">Absender</div><div class="v"><b>Walter de Gruyter</b></div>
|
||
<div class="k">Empfänger</div><div class="v">Herbert Cram</div>
|
||
<div class="k">Archiv</div><div class="v">Kasten VI · Mappe 7</div>
|
||
</div>
|
||
<div class="prev-summary">„von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte — Notiz auf der Rückseite mit Korrekturen zur Publikationsliste."</div>
|
||
<div class="prev-tags"><span class="tag">Verlag</span><span class="tag">Familie</span><span class="tag muted">Korrespondenz</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="prev-excerpt">
|
||
<span class="lbl">Transkription (Auszug)</span>
|
||
„Lieber Herbert, heute erreichte mich Dein Brief vom 29. August, und ich danke Dir herzlich für die ausführliche Schilderung. Die Angelegenheit mit dem Verlag soll am Montag abschließend besprochen werden — ich werde Dir sogleich Bescheid geben. In Belgard waren wir alle wohl, und die Kinder grüßen …"
|
||
</div>
|
||
<div class="prev-actions">
|
||
<div class="btn">◎ In Briefwechsel öffnen</div>
|
||
<div class="btn primary">↗ Vollständiges Dokument</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:11px;color:#888;padding:0 4px">Tipp: Pfeiltasten ↑↓ zum Durchblättern, Enter zum Öffnen.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|