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>
228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Spec 4 — Gallery Cards · 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 4 specific */
|
||
.view-toggle{display:flex;gap:4px;background:#F0EDE5;padding:3px;border-radius:3px;margin-left:8px}
|
||
.view-toggle span{padding:5px 10px;font-size:11px;font-weight:700;color:#888;cursor:pointer;border-radius:2px}
|
||
.view-toggle span.on{background:#fff;color:var(--brand-navy);box-shadow:0 1px 2px rgba(0,0,0,.08)}
|
||
|
||
.year-band{font-family:'Merriweather',serif;font-size:28px;font-weight:900;color:var(--brand-navy);letter-spacing:-.5px;margin:24px 0 10px 2px;display:flex;align-items:baseline;gap:12px}
|
||
.year-band .n{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:#888;letter-spacing:0}
|
||
|
||
.grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px}
|
||
@media (max-width: 1280px){ .grid{grid-template-columns:repeat(3, 1fr)} }
|
||
@media (max-width: 900px){ .grid{grid-template-columns:repeat(2, 1fr)} }
|
||
|
||
.card-doc{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column}
|
||
.card-doc:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
|
||
.card-doc .thumb-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:#f5f2ea;border-bottom:1px solid var(--line)}
|
||
.card-doc .thumb{width:100%;height:100%}
|
||
.card-doc .dir-badge{position:absolute;top:8px;left:8px;background:rgba(0,40,80,.9);color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:10px;display:flex;align-items:center;gap:3px;letter-spacing:.3px}
|
||
.card-doc .dir-badge.in{background:rgba(47,158,149,.9)}
|
||
.card-doc .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
|
||
.card-doc .body h3{font-family:'Merriweather',serif;font-size:13px;font-weight:700;color:var(--brand-navy);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.card-doc .body .date{font-size:11px;color:var(--ink-3);font-weight:600}
|
||
.card-doc .body .party{font-size:11px;color:var(--ink-3);font-style:italic;margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
|
||
.card-doc .body .summary{font-size:11.5px;color:#666;font-family:'Merriweather',serif;font-style:italic;line-height:1.45;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
||
.card-doc .body .tags{margin-top:auto;padding-top:10px;display:flex;gap:4px;flex-wrap:wrap}
|
||
</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>Gallery Cards</div>
|
||
<div><strong>Spec</strong>4 / 5</div>
|
||
<div><strong>Effort</strong>Large — structural change + thumbnail service</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 href="03-master-detail.html">3 · Master-Detail Split</a>
|
||
<a class="on" 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 4 · Gallery Cards — grid of letter cards, album style</h2>
|
||
Replace the list with a 4-column (collapses to 3 → 2) grid. Each card is a miniature letter card with thumbnail, title, date, correspondent, and a 3-line summary. Year bands replace dividers. The page becomes a family-letter-album.
|
||
<div><span class="gain">✚ Beautiful browsing for archive overview</span><span class="gain">✚ Most "filled" of all concepts — no empty space</span><span class="cost">− Chronological scanning is worse than lists</span><span class="cost">− 851 letters → ~213 rows in grid, long page or needs paging</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="view-toggle"><span>☰ Liste</span><span class="on">▦ Galerie</span></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="year-band">1940 <span class="n">1 Brief</span></div>
|
||
<div class="grid">
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<div class="thumb"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
<span class="dir-badge in">← eingehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>Demo leserlicher Brief</h3>
|
||
<div class="date">31. Mai 1940 · Belgard</div>
|
||
<div class="party">von <b>Gertrud von Rofden</b></div>
|
||
<div class="summary">„letzte Lebenstage von W. Dörpfeld in Griechenland — ausführlicher Bericht"</div>
|
||
<div class="tags"><span class="tag">Dörpfeld</span><span class="tag">Griechenland</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="year-band">1923 <span class="n">5 Briefe</span></div>
|
||
<div class="grid">
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<div class="thumb handwritten"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
<span class="dir-badge">→ ausgehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>W-0397 – 2. September 1923 – B.Lichterfelde</h3>
|
||
<div class="date">2. September 1923 · B.Lichterfelde</div>
|
||
<div class="party">an <b>Herbert Cram</b></div>
|
||
<div class="summary">„von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte"</div>
|
||
<div class="tags"><span class="tag">Verlag</span><span class="tag">Familie</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<div class="thumb handwritten"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
<span class="dir-badge">→ ausgehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>W-0396 – 2. September 1923 – B.Lichterfelde</h3>
|
||
<div class="date">2. September 1923 · B.Lichterfelde</div>
|
||
<div class="party">an <b>Herbert Cram</b></div>
|
||
<div class="tags"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<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></div></div>
|
||
<span class="dir-badge">→ ausgehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>W-0524 – 31. Juli 1923 – Berlin</h3>
|
||
<div class="date">31. Juli 1923 · Berlin</div>
|
||
<div class="party">an <b>Walter Dieckmann</b></div>
|
||
<div class="summary">„Glückwunsch zum 60. Geburtstag, Bericht über den Verlag"</div>
|
||
<div class="tags"><span class="tag">Geburtstag</span><span class="tag">Verlag</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<div class="thumb handwritten"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
<span class="dir-badge">→ ausgehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>W-0523 – 12. Mai 1923 – Berlin</h3>
|
||
<div class="date">12. Mai 1923 · Berlin</div>
|
||
<div class="party">an <b>Walter Dieckmann</b></div>
|
||
<div class="summary">„Routinebericht des Verlagsgeschäfts, Rückfragen zu Auftragslage"</div>
|
||
<div class="tags"><span class="tag">Verlag</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="year-band">1922 <span class="n">37 Briefe</span></div>
|
||
<div class="grid">
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<div class="thumb handwritten"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
<span class="dir-badge">→ ausgehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>W-0521 – 24. Dezember 1922 – Berlin</h3>
|
||
<div class="date">24. Dezember 1922 · Berlin</div>
|
||
<div class="party">an <b>Walter Dieckmann</b></div>
|
||
<div class="summary">„Weihnachtsbrief, Erinnerungen an das Jahr und Bitte um ein Bild der Kinder"</div>
|
||
<div class="tags"><span class="tag">Weihnachten</span><span class="tag">Familie</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<div class="thumb handwritten"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
<span class="dir-badge">→ ausgehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>W-0392 – 23. Nov 1921 – Bad Kissingen</h3>
|
||
<div class="date">23. November 1921 · Bad Kissingen</div>
|
||
<div class="party">an <b>Herbert Cram</b></div>
|
||
<div class="summary">„Kurbericht, Gesundheitsupdate, Grüße an die Familie"</div>
|
||
<div class="tags"><span class="tag">Kuraufenthalt</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<div class="thumb"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
<span class="dir-badge">→ ausgehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>W-0501 – 13. Dez 1920 – Berlin</h3>
|
||
<div class="date">13. Dezember 1920 · Berlin</div>
|
||
<div class="party">an <b>Walter Dieckmann</b></div>
|
||
<div class="tags"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-doc">
|
||
<div class="thumb-wrap">
|
||
<div class="thumb handwritten"><div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
|
||
<span class="dir-badge">→ ausgehend</span>
|
||
</div>
|
||
<div class="body">
|
||
<h3>W-0484 – 27. Dez 1919 – Berlin</h3>
|
||
<div class="date">27. Dezember 1919 · Berlin</div>
|
||
<div class="party">an <b>Walter Dieckmann</b></div>
|
||
<div class="summary">„Jahreswechselgrüße, kurzer Bericht über den Zustand des Verlags"</div>
|
||
<div class="tags"><span class="tag">Neujahr</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|