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>
196 lines
9.7 KiB
HTML
196 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Spec 1 — Rich Rows · 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 1 specific */
|
||
.rlist{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
|
||
.row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:12px;align-items:stretch;padding:14px 18px;border-bottom:1px solid var(--line-2);border-left:3px solid transparent;cursor:pointer;transition:background .1s}
|
||
.row:hover{background:var(--muted)}
|
||
.row:last-child{border-bottom:0}
|
||
.row.out{border-left-color:var(--primary)}
|
||
.row.in{border-left-color:var(--accent)}
|
||
.row-arrow{align-self:center;font-size:14px;opacity:.55;display:flex;justify-content:center}
|
||
.row-body{min-width:0;display:flex;flex-direction:column;gap:4px}
|
||
.row-title{font-family:'Merriweather',serif;font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.row-summary{font-size:12.5px;color:#555;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%}
|
||
.row-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--ink-3);align-items:center}
|
||
.row-meta .sep{color:#bbb}
|
||
.row-meta .ico{width:12px;height:12px;opacity:.55;display:inline-flex;align-items:center;justify-content:center}
|
||
.row-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
|
||
.row-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;min-width:130px;padding-left:16px;border-left:1px dashed var(--line)}
|
||
.row-archive{font-size:10px;font-weight:800;letter-spacing:.8px;color:#888;text-transform:uppercase;background:#F4F1EA;padding:3px 8px;border-radius:2px}
|
||
.row-archive small{display:block;font-weight:600;color:#aaa;margin-top:1px;text-transform:none;letter-spacing:0;font-size:9.5px}
|
||
@media (max-width: 900px){ .row-right{display:none} }
|
||
</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>Rich Rows</div>
|
||
<div><strong>Spec</strong>1 / 5</div>
|
||
<div><strong>Effort</strong>Small — no new backend data</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 class="on" href="01-rich-rows.html">1 · Rich Rows</a>
|
||
<a href="02-thumbnail-rows.html">2 · Thumbnail Rows</a>
|
||
<a 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">
|
||
|
||
<!-- Real Familienarchiv chrome -->
|
||
<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 1 · Rich Rows — pack more metadata into each row</h2>
|
||
No visuals, no structural change. Each row grows from a single line to a layered block: title (serif), summary (italic), meta row with icons, tag chips, and a right-hand column with archive box, script type and status.
|
||
<div><span class="gain">✚ Zero backend changes</span><span class="gain">✚ Still one scrollable list</span><span class="cost">− Heavier rows; 10-row view becomes ~6–7 rows</span><span class="cost">− Empty-looking when a doc has no summary/tags</span></div>
|
||
</div>
|
||
|
||
<!-- Filter card (same as production) -->
|
||
<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="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-summary">„letzte Lebenstage von W. Dörpfeld in Griechenland"</div>
|
||
<div class="row-meta"><span>31. Mai 1940</span><span class="sep">·</span><span>📍 Belgard</span><span class="sep">·</span><span>von <b>Gertrud von Rofden</b></span></div>
|
||
<div class="row-tags"><span class="tag">Dörpfeld</span><span class="tag">Griechenland</span><span class="tag muted">privat</span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-archive">Kasten VII · Mappe 5</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="year-divider"><span class="y">1923</span><span class="n">5 Briefe</span></div>
|
||
|
||
<div class="row out">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0397 – 2. September 1923 – B.Lichterfelde</div>
|
||
<div class="row-summary">„von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte"</div>
|
||
<div class="row-meta"><span>2. September 1923</span><span class="sep">·</span><span>📍 B.Lichterfelde</span><span class="sep">·</span><span>an <b>Herbert Cram</b></span></div>
|
||
<div class="row-tags"><span class="tag">Verlag</span><span class="tag">Familie</span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-archive">Kasten VI · Mappe 7</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-summary">—</div>
|
||
<div class="row-meta"><span>2. September 1923</span><span class="sep">·</span><span>📍 B.Lichterfelde</span><span class="sep">·</span><span>an <b>Herbert Cram</b></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-archive">Kasten VI · Mappe 7</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-summary">„Glückwunsch zum 60. Geburtstag, Bericht über den Verlag"</div>
|
||
<div class="row-meta"><span>31. Juli 1923</span><span class="sep">·</span><span>📍 Berlin</span><span class="sep">·</span><span>an <b>Walter Dieckmann</b></span></div>
|
||
<div class="row-tags"><span class="tag">Geburtstag</span><span class="tag">Verlag</span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-archive">Kasten VI · Mappe 7</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-summary">„Weihnachtsbrief, Erinnerungen an das Jahr und Bitte um ein Bild der Kinder"</div>
|
||
<div class="row-meta"><span>24. Dezember 1922</span><span class="sep">·</span><span>📍 Berlin</span><span class="sep">·</span><span>an <b>Walter Dieckmann</b></span></div>
|
||
<div class="row-tags"><span class="tag">Weihnachten</span><span class="tag">Familie</span><span class="tag muted">persönlich</span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-archive">Kasten V · Mappe 3</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row out">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0392 – 23. November 1921 – Bad Kissingen</div>
|
||
<div class="row-summary">„Kurbericht, Gesundheitsupdate, Grüße an die Familie Cram"</div>
|
||
<div class="row-meta"><span>23. November 1921</span><span class="sep">·</span><span>📍 Bad Kissingen</span><span class="sep">·</span><span>an <b>Herbert Cram</b></span></div>
|
||
<div class="row-tags"><span class="tag">Kuraufenthalt</span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-archive">Kasten V · Mappe 1</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row out">
|
||
<div class="row-arrow">→</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0501 – 13. Dezember 1920 – Berlin</div>
|
||
<div class="row-summary">—</div>
|
||
<div class="row-meta"><span>13. Dezember 1920</span><span class="sep">·</span><span>📍 Berlin</span><span class="sep">·</span><span>an <b>Walter Dieckmann</b></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-archive">Kasten IV · Mappe 8</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|