docs(specs): add briefwechsel-fill — 5 concepts exploring empty-row problem
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>
This commit is contained in:
Marcel
195
docs/specs/briefwechsel-fill/01-rich-rows.html
Normal file
195
docs/specs/briefwechsel-fill/01-rich-rows.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!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>
|
||||
391
docs/specs/briefwechsel-fill/02-thumbnail-rows.html
Normal file
391
docs/specs/briefwechsel-fill/02-thumbnail-rows.html
Normal file
@@ -0,0 +1,391 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Spec 2 — Thumbnail 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 2 v2 — bigger thumbnails, postcard support, bilateral distribution bar */
|
||||
.rlist{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
|
||||
|
||||
.row{display:grid;grid-template-columns:104px 1fr auto;column-gap:20px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line-2);border-left:3px solid transparent;cursor:pointer;transition:background .12s,box-shadow .12s}
|
||||
.row:hover{background:var(--muted)}
|
||||
.row:hover .row-thumb .thumb{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1),inset 0 0 0 1px #fff}
|
||||
.row:last-child{border-bottom:0}
|
||||
.row.out{border-left-color:var(--primary)}
|
||||
.row.in{border-left-color:var(--accent)}
|
||||
|
||||
/* Thumbnail wrapper — fixed 104×104 cell, thumb centered */
|
||||
.row-thumb{width:104px;height:120px;display:flex;align-items:center;justify-content:center;position:relative}
|
||||
.thumb{transition:transform .12s,box-shadow .12s;box-shadow:0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px #fff}
|
||||
.thumb.portrait{width:82px;height:106px}
|
||||
.thumb.landscape{width:104px;height:72px}
|
||||
.thumb.postcard{width:104px;height:66px}
|
||||
.thumb-badge{position:absolute;top:2px;right:0;background:var(--brand-navy);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:10px;box-shadow:0 0 0 2px #fff}
|
||||
|
||||
/* Subtle paper variations for natural feel */
|
||||
.thumb.paper-1{background:linear-gradient(180deg,#fdfcf7 0%,#f4efdf 100%)}
|
||||
.thumb.paper-2{background:linear-gradient(180deg,#fefdf8 0%,#eee8d3 100%)}
|
||||
.thumb.paper-3{background:linear-gradient(180deg,#fbf8ed 0%,#efe7cb 100%)}
|
||||
.thumb.paper-4{background:linear-gradient(180deg,#fdfcf5 0%,#f0e9d5 100%)}
|
||||
|
||||
/* Kurrent-style handwriting — denser, angled */
|
||||
.thumb.kurrent .thumb-lines{padding:14% 9%;gap:3.5px}
|
||||
.thumb.kurrent .thumb-lines i{height:1.3px;background:rgba(24,40,70,.45);transform:rotate(-.5deg)}
|
||||
.thumb.kurrent .thumb-lines i:nth-child(3n){width:65%}
|
||||
.thumb.kurrent .thumb-lines i:nth-child(4n){width:92%}
|
||||
.thumb.kurrent .thumb-lines i:nth-child(5n){width:48%;transform:rotate(.4deg)}
|
||||
|
||||
/* Typewriter — regular, crisp */
|
||||
.thumb.typed .thumb-lines{padding:16% 12%;gap:2.5px}
|
||||
.thumb.typed .thumb-lines i{height:1px;background:rgba(40,40,40,.45)}
|
||||
.thumb.typed .thumb-lines i:nth-child(odd){width:93%}
|
||||
.thumb.typed .thumb-lines i:nth-child(even){width:88%}
|
||||
.thumb.typed .thumb-lines i:nth-child(7n){width:45%}
|
||||
|
||||
/* Postcard — stamp corner + postmark + short address lines */
|
||||
.thumb.postcard .thumb-lines{padding:10% 10% 14% 10%;gap:4px}
|
||||
.thumb.postcard .thumb-lines i{height:1.1px;background:rgba(24,40,70,.45)}
|
||||
.thumb.postcard .thumb-lines i:nth-child(1){width:60%}
|
||||
.thumb.postcard .thumb-lines i:nth-child(2){width:45%}
|
||||
.thumb.postcard .thumb-lines i:nth-child(3){width:70%}
|
||||
.thumb.postcard .thumb-lines i:nth-child(4){width:40%}
|
||||
.thumb.postcard::after{content:'';position:absolute;top:6px;right:6px;width:16px;height:18px;background:linear-gradient(135deg,#b6c9d3,#8ba9b6);border:1px dashed rgba(0,0,0,.15);box-shadow:0 0 0 1px #fff}
|
||||
.thumb.postcard::before{content:'';position:absolute;top:10px;right:26px;width:14px;height:14px;border:1.5px solid rgba(150,30,30,.4);border-radius:50%;background:radial-gradient(circle,rgba(150,30,30,.1) 40%,transparent 60%)}
|
||||
|
||||
/* Letter heading (typed with date/address at top) */
|
||||
.thumb.typed::before{content:'';position:absolute;top:10%;left:12%;right:12%;height:2px;background:transparent;border-bottom:1.5px solid rgba(40,40,40,.35)}
|
||||
|
||||
.row-body{min-width:0;display:flex;flex-direction:column;gap:4px}
|
||||
.row-title{font-family:'Merriweather',serif;font-size:16px;font-weight:700;color:var(--ink);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.row-summary{font-family:'Merriweather',serif;font-size:14px;color:#444;line-height:1.55;font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||||
.row-summary::before{content:'„';color:var(--brand-mint);font-size:22px;font-weight:700;line-height:0;position:relative;top:6px;margin-right:2px}
|
||||
.row-summary::after{content:'”';color:var(--brand-mint);font-size:22px;font-weight:700;line-height:0;position:relative;top:6px;margin-left:2px}
|
||||
.row-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink-3);align-items:center;margin-top:2px}
|
||||
.row-meta .sep{color:#ccc}
|
||||
.row-meta .dir-ch{color:var(--primary);font-weight:800;font-size:13px}
|
||||
.row-meta .dir-ch.in{color:var(--accent)}
|
||||
.row-meta .kind-chip{display:inline-flex;align-items:center;gap:3px;background:#F4F1EA;color:#666;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.3px;text-transform:uppercase}
|
||||
.row-tags{display:flex;gap:4px;flex-wrap:wrap}
|
||||
|
||||
.row-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
|
||||
.row-date{font-family:'Merriweather',serif;font-size:14px;color:#444;white-space:nowrap;font-weight:700}
|
||||
.row-date-rel{font-size:10.5px;color:#aaa;font-weight:600;letter-spacing:.3px}
|
||||
|
||||
/* Bilateral distribution bar — lifted from production ConversationTimeline */
|
||||
.distbar{display:flex;flex-direction:column;gap:6px;background:var(--muted);border:1px solid var(--line);border-bottom:0;padding:12px 20px}
|
||||
.distbar-labels{display:flex;justify-content:space-between;font-size:13px;font-weight:700}
|
||||
.distbar-labels .out{color:var(--primary);display:inline-flex;align-items:center;gap:6px}
|
||||
.distbar-labels .in{color:var(--accent);display:inline-flex;align-items:center;gap:6px}
|
||||
.distbar-labels .cnt{font-variant-numeric:tabular-nums}
|
||||
.distbar-bar{height:6px;display:flex;border-radius:3px;overflow:hidden;background:var(--line)}
|
||||
.distbar-bar .out{background:var(--primary)}
|
||||
.distbar-bar .in{background:var(--accent)}
|
||||
.distbar + .rlist{border-radius:0 0 2px 2px}
|
||||
|
||||
/* Section headings within the spec */
|
||||
.example-h{font-family:'Merriweather',serif;font-size:18px;color:var(--brand-navy);margin:36px 0 10px;padding-top:24px;border-top:1px dashed var(--line);font-weight:700;display:flex;align-items:baseline;gap:10px}
|
||||
.example-h .lbl{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;color:#888;letter-spacing:1px;text-transform:uppercase}
|
||||
.example-h:first-of-type{border-top:0;padding-top:0;margin-top:20px}
|
||||
.example-sub{font-size:12px;color:#777;margin-bottom:14px;line-height:1.55}
|
||||
|
||||
/* Swap-buttons and filter chrome for bilateral filter card */
|
||||
.swap-inline{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #C8C4BE;border-radius:50%;background:#F0EDE8;font-size:13px;color:var(--brand-navy);margin:0 -12px;position:relative;z-index:1}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.row{grid-template-columns:82px 1fr;column-gap:14px}
|
||||
.row-right{grid-column:2;align-items:flex-start;margin-top:4px}
|
||||
.thumb.portrait{width:72px;height:94px}
|
||||
.thumb.landscape, .thumb.postcard{width:82px;height:58px}
|
||||
}
|
||||
</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>Thumbnail Rows <span style="color:var(--brand-mint);margin-left:6px">v2</span></div>
|
||||
<div><strong>Spec</strong>2 / 5</div>
|
||||
<div><strong>Effort</strong>Medium — needs PDF 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 class="on" 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">
|
||||
|
||||
<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 2 · Thumbnail Rows — discovery through visual + summary</h2>
|
||||
/briefwechsel is for fun discovery, not dense scanning. The row gets a bigger first-page thumbnail (portrait for letters, landscape for postcards); the <b>summary</b> reads like a quote next to it; the right column stays calm — just the date. Rows without a summary remain clean and uncrowded.
|
||||
<div><span class="gain">✚ Visual recognition — letters and postcards look like what they are</span><span class="gain">✚ Summary reads as a quote, invites opening the letter</span><span class="gain">✚ Distribution bar gives the bilateral pair its own identity</span><span class="cost">− Depends on the PDF-thumbnail service (open issue)</span></div>
|
||||
</div>
|
||||
|
||||
<!-- ───────── Example 1 · single person ───────── -->
|
||||
<div class="example-h">Beispiel 1 <span class="lbl">alle Briefe von Walter de Gruyter · 851</span></div>
|
||||
<div class="example-sub">Single-sender case: sender is filled, correspondent is open. Direction arrows tell sent vs received.</div>
|
||||
|
||||
<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-thumb">
|
||||
<div class="thumb portrait typed paper-1">
|
||||
<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></div>
|
||||
</div>
|
||||
</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 — ausführlicher Bericht aus Belgard mit persönlichen Anmerkungen</div>
|
||||
<div class="row-meta"><span class="dir-ch in">← eingehend</span><span>Gertrud von Rofden</span><span class="sep">·</span><span>📍 Belgard</span><span class="sep">·</span><span class="row-tags"><span class="tag">Dörpfeld</span><span class="tag">Griechenland</span></span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">31. Mai 1940</div>
|
||||
<div class="row-date-rel">vor 85 Jahren</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-thumb">
|
||||
<div class="thumb portrait kurrent paper-2">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</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 — Notiz auf der Rückseite mit Korrekturen</div>
|
||||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Herbert Cram</span><span class="sep">·</span><span>📍 B.Lichterfelde</span><span class="sep">·</span><span class="row-tags"><span class="tag">Verlag</span><span class="tag">Familie</span></span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">2. September 1923</div>
|
||||
<div class="row-date-rel">vor 102 Jahren</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Postcard example -->
|
||||
<div class="row out">
|
||||
<div class="row-thumb">
|
||||
<div class="thumb postcard kurrent paper-4">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-body">
|
||||
<div class="row-title">Ansichtskarte – 2. September 1923 – B.Lichterfelde</div>
|
||||
<div class="row-summary">kurze Grüße aus B.Lichterfelde, Hinweis auf den kommenden Besuch</div>
|
||||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Herbert Cram</span><span class="sep">·</span><span>📍 B.Lichterfelde</span><span class="sep">·</span><span class="kind-chip">✉ Postkarte</span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">2. September 1923</div>
|
||||
<div class="row-date-rel">vor 102 Jahren</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multi-page letter -->
|
||||
<div class="row out">
|
||||
<div class="row-thumb">
|
||||
<div class="thumb portrait kurrent paper-3">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
<span class="thumb-badge">4 S.</span>
|
||||
</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 und den anstehenden Umzug nach B.Lichterfelde im kommenden Herbst</div>
|
||||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Walter Dieckmann</span><span class="sep">·</span><span>📍 Berlin</span><span class="sep">·</span><span class="row-tags"><span class="tag">Geburtstag</span><span class="tag">Verlag</span></span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">31. Juli 1923</div>
|
||||
<div class="row-date-rel">vor 102 Jahren</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Without summary — still clean -->
|
||||
<div class="row out">
|
||||
<div class="row-thumb">
|
||||
<div class="thumb portrait kurrent paper-1">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-body">
|
||||
<div class="row-title">W-0396 – 2. September 1923 – B.Lichterfelde</div>
|
||||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Herbert Cram</span><span class="sep">·</span><span>📍 B.Lichterfelde</span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">2. September 1923</div>
|
||||
<div class="row-date-rel">vor 102 Jahren</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-thumb">
|
||||
<div class="thumb portrait kurrent paper-2">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</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 zum Christfest</div>
|
||||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Walter Dieckmann</span><span class="sep">·</span><span>📍 Berlin</span><span class="sep">·</span><span class="row-tags"><span class="tag">Weihnachten</span><span class="tag">Familie</span></span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">24. Dezember 1922</div>
|
||||
<div class="row-date-rel">vor 103 Jahren</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ───────── Example 2 · bilateral ───────── -->
|
||||
<div class="example-h">Beispiel 2 <span class="lbl">Briefwechsel Walter ↔ Herbert · 143</span></div>
|
||||
<div class="example-sub">Bilateral case: both filters are set. The distribution bar above the list shows how the correspondence is split — instantly visible who wrote more.</div>
|
||||
|
||||
<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</div><div class="fi">Herbert Cram</div></div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<div class="btn">⇄ Tauschen</div>
|
||||
<div class="btn">Newest ↓</div><div class="btn">▾ Filter</div>
|
||||
<div class="count"><b>143</b> Briefe im Zeitraum</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="distbar" role="img" aria-label="Briefverteilung: 87 von Walter de Gruyter, 56 von Herbert Cram">
|
||||
<div class="distbar-labels">
|
||||
<span class="out"><span class="cnt">87</span> von Walter de Gruyter →</span>
|
||||
<span class="in">← <span class="cnt">56</span> von Herbert Cram</span>
|
||||
</div>
|
||||
<div class="distbar-bar">
|
||||
<span class="out" style="width:60.8%"></span>
|
||||
<span class="in" style="width:39.2%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rlist" style="border-radius:0 0 2px 2px">
|
||||
<div class="year-divider"><span class="y">1923</span><span class="n">12 Briefe</span></div>
|
||||
|
||||
<div class="row out">
|
||||
<div class="row-thumb">
|
||||
<div class="thumb portrait kurrent paper-2">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</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 class="dir-ch">→</span><span>Walter an Herbert</span><span class="sep">·</span><span>📍 B.Lichterfelde</span><span class="sep">·</span><span class="row-tags"><span class="tag">Verlag</span></span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">2. September 1923</div>
|
||||
<div class="row-date-rel">vor 102 Jahren</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row in">
|
||||
<div class="row-thumb">
|
||||
<div class="thumb portrait kurrent paper-3">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-body">
|
||||
<div class="row-title">H-0213 – 29. August 1923 – Leipzig</div>
|
||||
<div class="row-summary">Antwort auf Walters Anfrage zur Herbstauslieferung, Bitte um Rückmeldung bis Monatsende</div>
|
||||
<div class="row-meta"><span class="dir-ch in">←</span><span>Herbert an Walter</span><span class="sep">·</span><span>📍 Leipzig</span><span class="sep">·</span><span class="row-tags"><span class="tag">Verlag</span></span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">29. August 1923</div>
|
||||
<div class="row-date-rel">vor 102 Jahren</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row in">
|
||||
<div class="row-thumb">
|
||||
<div class="thumb postcard kurrent paper-4">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-body">
|
||||
<div class="row-title">Ansichtskarte – 20. August 1923 – Thüringer Wald</div>
|
||||
<div class="row-summary">Urlaubsgruß, kurze Notiz über Wetter und geplante Rückkehr</div>
|
||||
<div class="row-meta"><span class="dir-ch in">←</span><span>Herbert an Walter</span><span class="sep">·</span><span>📍 Thüringer Wald</span><span class="sep">·</span><span class="kind-chip">✉ Postkarte</span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">20. August 1923</div>
|
||||
<div class="row-date-rel">vor 102 Jahren</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row out">
|
||||
<div class="row-thumb">
|
||||
<div class="thumb portrait kurrent paper-1">
|
||||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
<span class="thumb-badge">3 S.</span>
|
||||
</div>
|
||||
<div class="row-body">
|
||||
<div class="row-title">W-0392 – 23. November 1921 – Bad Kissingen</div>
|
||||
<div class="row-summary">Kurbericht aus Bad Kissingen, Gesundheitsupdate nach der ersten Woche, Grüße an die Familie Cram</div>
|
||||
<div class="row-meta"><span class="dir-ch">→</span><span>Walter an Herbert</span><span class="sep">·</span><span>📍 Bad Kissingen</span><span class="sep">·</span><span class="row-tags"><span class="tag">Kuraufenthalt</span></span></div>
|
||||
</div>
|
||||
<div class="row-right">
|
||||
<div class="row-date">23. November 1921</div>
|
||||
<div class="row-date-rel">vor 104 Jahren</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes footer -->
|
||||
<div style="margin-top:32px;padding:16px 20px;background:#fff;border-left:4px solid var(--brand-navy);font-size:13px;color:#333;line-height:1.7">
|
||||
<b style="color:var(--brand-navy)">Details:</b>
|
||||
<ul style="margin:8px 0 0 20px;padding:0">
|
||||
<li><b>Thumbnail</b> — 82×106 for portrait, 104×72 for landscape/postcards. Postcards also get a stamp + postmark corner. Kurrent handwriting rendered with slight line skew; typewriter rendered with clean parallel lines. Multi-page letters get a "<code>4 S.</code>" badge.</li>
|
||||
<li><b>Summary</b> — shown in serif italic with colored quote marks. Reads like a quote from the letter. If empty, the row simply omits the line — no apologetic placeholder.</li>
|
||||
<li><b>Right column</b> — date only, in serif. We dropped archive box (only meaningful for one family archive) and any lookup metadata. The right column stays calm on purpose.</li>
|
||||
<li><b>Distribution bar</b> — appears only in bilateral mode (both sender and receiver set). Pattern lifted from the existing <code>ConversationTimeline</code> so it's familiar.</li>
|
||||
<li><b>Mobile</b> — thumbnail shrinks (72×94 portrait / 82×58 landscape) and the right column wraps under the body.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
222
docs/specs/briefwechsel-fill/03-master-detail.html
Normal file
222
docs/specs/briefwechsel-fill/03-master-detail.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!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>
|
||||
227
docs/specs/briefwechsel-fill/04-gallery-cards.html
Normal file
227
docs/specs/briefwechsel-fill/04-gallery-cards.html
Normal file
@@ -0,0 +1,227 @@
|
||||
<!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>
|
||||
303
docs/specs/briefwechsel-fill/05-person-dashboard.html
Normal file
303
docs/specs/briefwechsel-fill/05-person-dashboard.html
Normal file
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Spec 5 — Person Dashboard · Briefwechsel Insights</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 5 specific */
|
||||
.person-grid{display:grid;grid-template-columns:35% 1fr;gap:32px;align-items:start}
|
||||
@media (max-width: 1100px){ .person-grid{grid-template-columns:1fr} }
|
||||
|
||||
/* Person card (left) */
|
||||
.pcard{background:#fff;border:1px solid var(--line);border-radius:2px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:14px}
|
||||
.pavatar{width:100px;height:100px;border-radius:50%;background:var(--brand-mint);color:var(--brand-navy);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:900;font-family:'Merriweather',serif}
|
||||
.pname{font-family:'Merriweather',serif;font-size:22px;font-weight:700;color:var(--brand-navy);text-align:center;line-height:1.3}
|
||||
.pdates{font-size:12px;color:#888;font-weight:600;letter-spacing:.5px}
|
||||
.pnotes{font-size:13px;color:#555;line-height:1.6;margin-top:6px;padding-top:14px;border-top:1px dashed var(--line);width:100%;font-family:'Merriweather',serif;font-style:italic}
|
||||
.pactions{margin-top:14px;display:flex;gap:8px;width:100%}
|
||||
.pactions .btn{flex:1;justify-content:center;font-size:10px}
|
||||
.pactions .btn.primary{background:var(--brand-navy);color:#fff;border-color:var(--brand-navy)}
|
||||
|
||||
/* Name history card */
|
||||
.ncard{background:#fff;border:1px solid var(--line);border-radius:2px;padding:18px 20px;margin-top:20px}
|
||||
.ncard h3{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;margin-bottom:10px}
|
||||
.ncard ul{list-style:none}
|
||||
.ncard li{padding:5px 0;font-size:12.5px;color:#444;border-top:1px dashed var(--line);display:flex;justify-content:space-between}
|
||||
.ncard li:first-child{border-top:0}
|
||||
|
||||
/* Right column */
|
||||
.dash{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
|
||||
.dash-hdr{background:var(--brand-navy);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
|
||||
.dash-hdr h2{font-family:'Merriweather',serif;font-size:16px;font-weight:700}
|
||||
.dash-hdr .open-conv{background:var(--brand-mint);color:var(--brand-navy);font-size:11px;font-weight:800;padding:6px 14px;border-radius:2px;text-transform:uppercase;letter-spacing:.6px;text-decoration:none}
|
||||
|
||||
/* Stat strip */
|
||||
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border-bottom:1px solid var(--line)}
|
||||
.stats div{background:#fafaf5;padding:14px 18px;text-align:center}
|
||||
.stats .v{font-family:'Merriweather',serif;font-size:22px;font-weight:900;color:var(--brand-navy);letter-spacing:-.5px}
|
||||
.stats .k{font-size:10px;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
|
||||
.stats .out{color:var(--primary)}
|
||||
.stats .in{color:var(--accent)}
|
||||
|
||||
/* Sections */
|
||||
.dsec{padding:18px 22px;border-top:1px solid var(--line-2)}
|
||||
.dsec:first-of-type{border-top:0}
|
||||
.dsec h3{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline}
|
||||
.dsec h3 .note{font-size:11px;color:#555;text-transform:none;letter-spacing:0;font-weight:600}
|
||||
|
||||
/* Activity histogram */
|
||||
.hist{display:flex;align-items:flex-end;gap:2px;height:90px;padding:4px 0 0}
|
||||
.hist .bar{flex:1;background:var(--brand-mint);opacity:.55;border-radius:1px 1px 0 0;position:relative;cursor:pointer;transition:opacity .12s}
|
||||
.hist .bar:hover{opacity:1}
|
||||
.hist .bar.peak{background:var(--brand-navy);opacity:.85}
|
||||
.hist-labels{display:flex;justify-content:space-between;font-size:10px;color:#888;margin-top:6px;font-weight:700}
|
||||
|
||||
/* Split bar direction */
|
||||
.dsplit{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:8px}
|
||||
.dsplit .out{color:var(--primary)}
|
||||
.dsplit .in{color:var(--accent)}
|
||||
.dbar{height:10px;display:flex;border-radius:5px;overflow:hidden;background:#F0EDE5}
|
||||
.dbar .out{background:var(--brand-navy)}
|
||||
.dbar .in{background:var(--accent)}
|
||||
|
||||
/* Top list */
|
||||
.toplist{display:flex;flex-direction:column;gap:8px}
|
||||
.toplist .ti{display:flex;align-items:center;gap:10px;font-size:13px;padding:4px 6px;border-radius:2px;cursor:pointer}
|
||||
.toplist .ti:hover{background:var(--muted)}
|
||||
.toplist .ti .name{flex:1;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.toplist .ti .bar-wrap{width:120px;height:7px;background:#F0EDE5;border-radius:4px;overflow:hidden;flex-shrink:0}
|
||||
.toplist .ti .bar{height:100%;background:var(--brand-navy);border-radius:4px}
|
||||
.toplist .ti .val{width:38px;text-align:right;font-size:12px;color:#888;font-weight:700;font-variant-numeric:tabular-nums}
|
||||
.toplist .ti .dir{font-size:13px;width:16px;font-weight:800}
|
||||
.toplist .ti .dir.out{color:var(--primary)}
|
||||
.toplist .ti .dir.in{color:var(--accent)}
|
||||
.toplist .ti .dir.both{color:#888}
|
||||
|
||||
/* Cloud */
|
||||
.cloud{display:flex;flex-wrap:wrap;gap:6px}
|
||||
.cloud .tag{cursor:pointer;padding:3px 10px;border-radius:12px;font-weight:700;transition:transform .1s}
|
||||
.cloud .tag:hover{transform:translateY(-1px)}
|
||||
.cloud .tag.s-xl{font-size:15px;padding:4px 12px}
|
||||
.cloud .tag.s-l{font-size:13px}
|
||||
.cloud .tag.s-m{font-size:12px}
|
||||
.cloud .tag.s-s{font-size:11px}
|
||||
|
||||
/* Two-col arrangement */
|
||||
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:32px}
|
||||
@media (max-width: 900px){ .twocol{grid-template-columns:1fr} }
|
||||
|
||||
/* Existing doc lists below (compressed) */
|
||||
.doclist-card{background:#fff;border:1px solid var(--line);border-radius:2px;margin-top:20px;overflow:hidden}
|
||||
.doclist-card .dh{padding:14px 20px;border-bottom:1px solid var(--line-2);font-size:13px;font-weight:700;color:var(--brand-navy);display:flex;justify-content:space-between;align-items:center}
|
||||
.doclist-card .dh .cnt{font-size:11px;color:#888;font-weight:600}
|
||||
.doclist-card .di{padding:10px 20px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
|
||||
.doclist-card .di:last-child{border-bottom:0}
|
||||
.doclist-card .di .t{font-family:'Merriweather',serif;font-weight:700;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:10px}
|
||||
.doclist-card .di .m{color:#888;font-size:11px;white-space:nowrap}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="spec-meta">
|
||||
<div class="spec-meta-inner">
|
||||
<div>
|
||||
<h1>Briefwechsel — <span>Fill the Empty Rows</span></h1>
|
||||
<p>Insights belong on the person detail page, not on the letter list. This spec mocks the dashboard that replaces the "empty feeling" problem at its proper home.</p>
|
||||
</div>
|
||||
<div class="spec-meta-right">
|
||||
<div><strong>Concept</strong>Person Dashboard</div>
|
||||
<div><strong>Spec</strong>5 / 5</div>
|
||||
<div><strong>Page</strong>/persons/[id] (not /briefwechsel)</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 href="04-gallery-cards.html">4 · Gallery Cards</a>
|
||||
<a class="on" 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 class="on">Persons</a><a>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 5 · Person Dashboard — insights live on /persons/[id], not on /briefwechsel</h2>
|
||||
The /briefwechsel page stays focused on reading letters. The archive-level understanding (how much, with whom, when, about what) is moved to the person detail page, where it's useful in all contexts — not only when a correspondent is selected. A "Briefwechsel öffnen" button ties the two pages together.
|
||||
<div><span class="gain">✚ /briefwechsel stays calm and focused</span><span class="gain">✚ Dashboard is useful on every visit to a person, not just during letter review</span><span class="gain">✚ Each dashboard element links back into /briefwechsel with filters</span><span class="cost">− Separates the work over two pages — needs a clear handoff button</span></div>
|
||||
</div>
|
||||
|
||||
<div style="font-size:12px;color:#888;margin-bottom:18px"><a href="#" style="color:#888;text-decoration:none">← Zurück</a></div>
|
||||
|
||||
<div class="person-grid">
|
||||
<!-- Left column: person identity -->
|
||||
<div>
|
||||
<div class="pcard">
|
||||
<div class="pavatar">WG</div>
|
||||
<div class="pname">Walter de Gruyter</div>
|
||||
<div class="pdates">1862 – 1923</div>
|
||||
<div class="pnotes">Verleger und Namensgeber des Verlags Walter de Gruyter. Langjährige Korrespondenz mit Familie Dieckmann und Herbert Cram rund um Verlag, Familie und Kuraufenthalte.</div>
|
||||
<div class="pactions">
|
||||
<a class="btn">◎ Bearbeiten</a>
|
||||
<a class="btn primary">↗ Briefwechsel öffnen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ncard">
|
||||
<h3>Namensvarianten</h3>
|
||||
<ul>
|
||||
<li><span>Walter de Gruyter</span><span style="color:#888">Hauptname</span></li>
|
||||
<li><span>W. de Gruyter</span><span style="color:#888">Abkürzung</span></li>
|
||||
<li><span>Dr. Walter de Gruyter</span><span style="color:#888">mit Titel</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right column: dashboard -->
|
||||
<div>
|
||||
<div class="dash">
|
||||
<div class="dash-hdr">
|
||||
<h2>Korrespondenz-Überblick</h2>
|
||||
<a class="open-conv" href="#">↗ Briefwechsel öffnen</a>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div><div class="v">851</div><div class="k">Briefe gesamt</div></div>
|
||||
<div><div class="v out">612</div><div class="k out">ausgehend</div></div>
|
||||
<div><div class="v in">239</div><div class="k in">eingehend</div></div>
|
||||
<div><div class="v">42</div><div class="k">Jahre</div></div>
|
||||
</div>
|
||||
|
||||
<div class="dsec">
|
||||
<h3>Aktivität über die Jahre <span class="note">Spitzenjahr <b style="color:var(--brand-navy)">1922 · 78 Briefe</b></span></h3>
|
||||
<div class="hist">
|
||||
<div class="bar" style="height:12%" title="1898 · 8"></div>
|
||||
<div class="bar" style="height:18%" title="1899 · 12"></div>
|
||||
<div class="bar" style="height:26%" title="1900 · 18"></div>
|
||||
<div class="bar" style="height:38%" title="1901 · 26"></div>
|
||||
<div class="bar" style="height:44%" title="1902 · 30"></div>
|
||||
<div class="bar" style="height:52%" title="1903 · 36"></div>
|
||||
<div class="bar" style="height:60%" title="1904 · 42"></div>
|
||||
<div class="bar" style="height:68%" title="1905 · 48"></div>
|
||||
<div class="bar" style="height:80%" title="1920 · 62"></div>
|
||||
<div class="bar" style="height:88%" title="1921 · 68"></div>
|
||||
<div class="bar peak" style="height:100%" title="1922 · 78"></div>
|
||||
<div class="bar" style="height:72%" title="1923 · 54"></div>
|
||||
<div class="bar" style="height:58%" title="1924 · 42"></div>
|
||||
<div class="bar" style="height:48%" title="1925 · 34"></div>
|
||||
<div class="bar" style="height:38%" title="1926 · 27"></div>
|
||||
<div class="bar" style="height:28%" title="1927 · 20"></div>
|
||||
<div class="bar" style="height:22%" title="1928 · 16"></div>
|
||||
<div class="bar" style="height:18%" title="1929 · 13"></div>
|
||||
<div class="bar" style="height:14%" title="1930 · 10"></div>
|
||||
<div class="bar" style="height:10%" title="1932 · 7"></div>
|
||||
<div class="bar" style="height:6%" title="1935 · 4"></div>
|
||||
<div class="bar" style="height:4%" title="1938 · 3"></div>
|
||||
<div class="bar" style="height:2%" title="1940 · 1"></div>
|
||||
</div>
|
||||
<div class="hist-labels"><span>1898</span><span>1922 ▲</span><span>1940</span></div>
|
||||
</div>
|
||||
|
||||
<div class="dsec">
|
||||
<h3>Richtungsverteilung</h3>
|
||||
<div class="dsplit">
|
||||
<span class="out">→ 612 ausgehend · 72%</span>
|
||||
<span class="in">← 239 eingehend · 28%</span>
|
||||
</div>
|
||||
<div class="dbar">
|
||||
<span class="out" style="width:72%"></span>
|
||||
<span class="in" style="width:28%"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="twocol">
|
||||
<div class="dsec" style="border-top:1px solid var(--line-2)">
|
||||
<h3>Häufigste Korrespondenten <span class="note">Top 6 von 87</span></h3>
|
||||
<div class="toplist">
|
||||
<div class="ti"><span class="dir both">⇄</span><span class="name">Walter Dieckmann</span><span class="bar-wrap"><span class="bar" style="width:100%"></span></span><span class="val">184</span></div>
|
||||
<div class="ti"><span class="dir both">⇄</span><span class="name">Herbert Cram</span><span class="bar-wrap"><span class="bar" style="width:78%"></span></span><span class="val">143</span></div>
|
||||
<div class="ti"><span class="dir both">⇄</span><span class="name">Ella Dieckmann</span><span class="bar-wrap"><span class="bar" style="width:48%"></span></span><span class="val">88</span></div>
|
||||
<div class="ti"><span class="dir both">⇄</span><span class="name">Eugenie de Gruyter</span><span class="bar-wrap"><span class="bar" style="width:42%"></span></span><span class="val">77</span></div>
|
||||
<div class="ti"><span class="dir both">⇄</span><span class="name">Gertrud von Rofden</span><span class="bar-wrap"><span class="bar" style="width:32%"></span></span><span class="val">58</span></div>
|
||||
<div class="ti"><span class="dir both">⇄</span><span class="name">Käthe Dieckmann</span><span class="bar-wrap"><span class="bar" style="width:26%"></span></span><span class="val">47</span></div>
|
||||
</div>
|
||||
<div style="margin-top:10px"><a style="font-size:11px;color:var(--primary);font-weight:700;text-decoration:none;border-bottom:1px dashed var(--primary)">Alle 87 Korrespondenten →</a></div>
|
||||
</div>
|
||||
|
||||
<div class="dsec" style="border-top:1px solid var(--line-2)">
|
||||
<h3>Häufigste Orte <span class="note">Top 5 von 42</span></h3>
|
||||
<div class="toplist">
|
||||
<div class="ti"><span class="name">📍 Berlin</span><span class="bar-wrap"><span class="bar" style="width:100%"></span></span><span class="val">412</span></div>
|
||||
<div class="ti"><span class="name">📍 B.Lichterfelde</span><span class="bar-wrap"><span class="bar" style="width:44%"></span></span><span class="val">180</span></div>
|
||||
<div class="ti"><span class="name">📍 Bad Kissingen</span><span class="bar-wrap"><span class="bar" style="width:14%"></span></span><span class="val">58</span></div>
|
||||
<div class="ti"><span class="name">📍 Cöln</span><span class="bar-wrap"><span class="bar" style="width:9%"></span></span><span class="val">37</span></div>
|
||||
<div class="ti"><span class="name">📍 Belgard</span><span class="bar-wrap"><span class="bar" style="width:6%"></span></span><span class="val">26</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dsec">
|
||||
<h3>Beliebte Schlagwörter <span class="note">Klick filtert den Briefwechsel</span></h3>
|
||||
<div class="cloud">
|
||||
<span class="tag s-xl">Verlag</span>
|
||||
<span class="tag s-xl">Familie</span>
|
||||
<span class="tag s-l">Geburtstag</span>
|
||||
<span class="tag s-l">Weihnachten</span>
|
||||
<span class="tag s-m">Kuraufenthalt</span>
|
||||
<span class="tag s-m">Reise</span>
|
||||
<span class="tag s-m">Geschäft</span>
|
||||
<span class="tag s-s">Krieg</span>
|
||||
<span class="tag s-s muted">Krankheit</span>
|
||||
<span class="tag s-s muted">Schule</span>
|
||||
<span class="tag s-s muted">Hochzeit</span>
|
||||
<span class="tag s-s muted">Tod</span>
|
||||
<span class="tag s-s muted">Namenstag</span>
|
||||
<span class="tag s-s muted">Neujahr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Existing doc lists stay below the dashboard -->
|
||||
<div class="doclist-card">
|
||||
<div class="dh">Geschriebene Briefe <span class="cnt">612 Briefe · <a style="color:var(--primary);text-decoration:none;border-bottom:1px dashed">Alle anzeigen →</a></span></div>
|
||||
<div class="di"><span class="t">W-0397 – 2. September 1923 – B.Lichterfelde</span><span class="m">an Herbert Cram</span></div>
|
||||
<div class="di"><span class="t">W-0521 – 24. Dezember 1922 – Berlin</span><span class="m">an Walter Dieckmann</span></div>
|
||||
<div class="di"><span class="t">W-0392 – 23. November 1921 – Bad Kissingen</span><span class="m">an Herbert Cram</span></div>
|
||||
</div>
|
||||
|
||||
<div class="doclist-card">
|
||||
<div class="dh">Empfangene Briefe <span class="cnt">239 Briefe · <a style="color:var(--primary);text-decoration:none;border-bottom:1px dashed">Alle anzeigen →</a></span></div>
|
||||
<div class="di"><span class="t">Demo leserlicher Brief</span><span class="m">von Gertrud von Rofden</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:36px;padding:16px 20px;background:#fff;border-left:4px solid var(--brand-navy);font-size:13px;color:#333;line-height:1.65">
|
||||
<b style="color:var(--brand-navy)">How this ties back to /briefwechsel:</b>
|
||||
<ul style="margin:8px 0 0 18px;padding:0">
|
||||
<li>Every correspondent row → <code>/briefwechsel?senderId=<person>&receiverId=<other></code> (bilateral view)</li>
|
||||
<li>Every location → <code>/briefwechsel?senderId=<person>&location=<x></code></li>
|
||||
<li>Every tag → <code>/briefwechsel?senderId=<person>&tag=<x></code></li>
|
||||
<li>Every histogram year → <code>/briefwechsel?…&from=YYYY-01-01&to=YYYY-12-31</code></li>
|
||||
</ul>
|
||||
The dashboard is the discovery surface; /briefwechsel is the reading surface.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
102
docs/specs/briefwechsel-fill/_shared.css
Normal file
102
docs/specs/briefwechsel-fill/_shared.css
Normal file
@@ -0,0 +1,102 @@
|
||||
/* Shared CSS for briefwechsel-fill specs */
|
||||
:root {
|
||||
--brand-navy: #002850;
|
||||
--brand-mint: #A6DAD8;
|
||||
--brand-sand: #E4E2D7;
|
||||
--bg: #ECEAE4;
|
||||
--surface: #ffffff;
|
||||
--line: #E4E2D7;
|
||||
--line-2: #EFEDE6;
|
||||
--muted: #F7F5F2;
|
||||
--ink: #1A1A1A;
|
||||
--ink-3: #666;
|
||||
--primary: #002850;
|
||||
--accent: #2F9E95;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
|
||||
.font-serif{font-family:'Merriweather',Georgia,serif}
|
||||
|
||||
/* ── Spec meta header ─── */
|
||||
.spec-meta{background:var(--brand-navy);color:#fff;padding:18px 28px;border-bottom:3px solid var(--brand-mint)}
|
||||
.spec-meta-inner{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
|
||||
.spec-meta h1{font-size:18px;font-weight:800;letter-spacing:.4px}
|
||||
.spec-meta h1 span{opacity:.5;font-weight:400}
|
||||
.spec-meta p{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;max-width:600px}
|
||||
.spec-meta-right{font-size:11px;display:flex;gap:20px;flex-wrap:wrap}
|
||||
.spec-meta-right div strong{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.45);font-weight:800;margin-bottom:2px}
|
||||
.spec-nav{background:#0a1e36;padding:10px 28px;border-bottom:1px solid rgba(255,255,255,.08)}
|
||||
.spec-nav-inner{max-width:1440px;margin:0 auto;display:flex;gap:4px;font-size:11px;flex-wrap:wrap;align-items:center}
|
||||
.spec-nav a{color:rgba(255,255,255,.55);text-decoration:none;padding:4px 10px;border-radius:3px;font-weight:600}
|
||||
.spec-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
|
||||
.spec-nav a.on{color:var(--brand-navy);background:var(--brand-mint)}
|
||||
.spec-nav .lbl{color:rgba(255,255,255,.3);font-size:9px;text-transform:uppercase;letter-spacing:1px;margin-right:8px}
|
||||
|
||||
/* ── Real page chrome ─── */
|
||||
.page-wrap{background:var(--bg);min-height:calc(100vh - 120px)}
|
||||
.hdr{background:var(--brand-navy);color:#fff;padding:0 32px;height:64px;display:flex;align-items:center;gap:40px}
|
||||
.hdr-logo{font-size:16px;font-weight:900;letter-spacing:1.5px}
|
||||
.hdr-nav{display:flex;gap:28px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
|
||||
.hdr-nav a{color:rgba(255,255,255,.7);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
|
||||
.hdr-nav a.on{color:#fff;border-color:var(--brand-mint)}
|
||||
.hdr-right{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:11px;color:rgba(255,255,255,.65)}
|
||||
.hdr-upload{border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:6px 12px;font-weight:700;letter-spacing:.5px}
|
||||
.hdr-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-mint);color:var(--brand-navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
|
||||
|
||||
.page{max-width:1440px;margin:0 auto;padding:28px 32px}
|
||||
|
||||
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.02);padding:20px 24px;margin-bottom:24px}
|
||||
.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:14px}
|
||||
.fl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:6px}
|
||||
.fi{height:40px;border:1px solid #D1D5DB;border-radius:2px;background:#fff;padding:0 12px;font-size:13px;display:flex;align-items:center;font-family:'Merriweather',serif}
|
||||
.fi.empty{color:#bbb;font-style:italic}
|
||||
.filter-actions{display:flex;gap:8px;align-items:center}
|
||||
.btn{height:34px;border:1px solid #D1D5DB;background:#F7F5F2;border-radius:2px;padding:0 12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#444;display:inline-flex;align-items:center;gap:6px}
|
||||
.count{margin-left:auto;font-size:13px;color:#555}
|
||||
.count b{color:var(--brand-navy)}
|
||||
|
||||
.hintbar{margin-top:14px;background:#e9f5f4;border:1px solid #c8e6e4;border-radius:2px;padding:10px 14px;font-size:12px;color:#1a3e3c;display:flex;align-items:center;gap:8px}
|
||||
.hintbar b{color:var(--brand-navy)}
|
||||
|
||||
/* ── Year divider ─── */
|
||||
.year-divider{display:flex;align-items:baseline;gap:12px;background:var(--muted);border-top:2px solid var(--line);border-bottom:1px solid var(--line);padding:8px 14px}
|
||||
.year-divider .y{font-size:22px;font-weight:900;color:var(--brand-navy);letter-spacing:-.5px}
|
||||
.year-divider .n{font-size:12px;font-weight:700;color:#888}
|
||||
|
||||
/* ── Status dots ─── */
|
||||
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
|
||||
.dot.uploaded{background:var(--brand-mint)}
|
||||
.dot.transcribed{background:var(--brand-mint)}
|
||||
.dot.reviewed{background:rgba(0,40,80,.55)}
|
||||
.dot.archived{background:var(--brand-navy)}
|
||||
|
||||
/* ── Direction indicator ─── */
|
||||
.dir{width:16px;height:16px;flex-shrink:0;opacity:.6}
|
||||
.dir-out{color:var(--primary)}
|
||||
.dir-in{color:var(--accent)}
|
||||
|
||||
/* ── Concept intro banner ─── */
|
||||
.concept-intro{background:#fff;border-left:4px solid var(--brand-mint);padding:14px 20px;margin-bottom:24px;font-size:13px;color:#333;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
|
||||
.concept-intro h2{font-size:14px;font-weight:800;color:var(--brand-navy);margin-bottom:4px}
|
||||
.concept-intro .gain,.concept-intro .cost{display:inline-block;font-size:11px;margin-right:14px;margin-top:6px}
|
||||
.concept-intro .gain{color:#166534}
|
||||
.concept-intro .cost{color:#92400E}
|
||||
|
||||
/* ── Mock letter thumbnail ─── */
|
||||
.thumb{background:linear-gradient(180deg,#fdfcf7 0%,#f6f3ea 100%);border:1px solid #d9d4c6;box-shadow:inset 0 0 0 1px #fff,0 1px 2px rgba(0,0,0,.05);position:relative;overflow:hidden;flex-shrink:0;border-radius:1px}
|
||||
.thumb::before{content:'';position:absolute;top:0;left:0;right:0;height:28%;background:linear-gradient(135deg,rgba(166,218,216,.25) 0%,transparent 60%)}
|
||||
.thumb-lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:20% 12% 20% 12%}
|
||||
.thumb-lines i{display:block;height:1px;background:rgba(0,40,80,.2)}
|
||||
.thumb-lines i:nth-child(odd){width:95%}
|
||||
.thumb-lines i:nth-child(3n){width:70%}
|
||||
.thumb-lines i:nth-child(5n){width:80%}
|
||||
.thumb.handwritten .thumb-lines{padding:15% 10%;gap:4px}
|
||||
.thumb.handwritten .thumb-lines i{height:1.2px;background:rgba(0,40,80,.35);transform:rotate(-.6deg)}
|
||||
|
||||
/* ── Tag chip ─── */
|
||||
.tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;background:var(--brand-mint);color:var(--brand-navy);padding:2px 7px;border-radius:10px;letter-spacing:.3px}
|
||||
.tag.muted{background:#EEE8DC;color:#666}
|
||||
|
||||
/* ── Links & generic ─── */
|
||||
a{color:inherit}
|
||||
.hide{display:none}
|
||||
290
docs/specs/briefwechsel-fill/index.html
Normal file
290
docs/specs/briefwechsel-fill/index.html
Normal file
@@ -0,0 +1,290 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Briefwechsel — Fill the Empty Rows · Overview</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>
|
||||
.ov{max-width:1440px;margin:0 auto;padding:36px 32px 80px}
|
||||
.lead{display:grid;grid-template-columns:1fr 320px;gap:40px;margin-bottom:36px;align-items:start}
|
||||
@media (max-width: 900px){ .lead{grid-template-columns:1fr} }
|
||||
.lead h2{font-family:'Merriweather',serif;font-size:24px;font-weight:700;color:var(--brand-navy);margin-bottom:10px;line-height:1.3}
|
||||
.lead p{color:#444;font-size:14px;line-height:1.65}
|
||||
.lead .kit{background:#fff;border:1px solid var(--line);border-radius:2px;padding:16px 18px}
|
||||
.lead .kit h3{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;margin-bottom:10px}
|
||||
.lead .kit li{font-size:12px;padding:5px 0;border-top:1px dashed var(--line);display:flex;justify-content:space-between}
|
||||
.lead .kit li:first-child{border-top:0}
|
||||
.lead .kit li b{color:var(--brand-navy);font-weight:700}
|
||||
|
||||
.section-h{font-family:'Merriweather',serif;font-size:16px;font-weight:700;color:var(--brand-navy);margin:28px 0 12px;padding-top:20px;border-top:1px dashed var(--line)}
|
||||
.section-h .sub{font-family:'Montserrat',sans-serif;font-size:12px;color:#888;font-weight:400;margin-left:10px}
|
||||
|
||||
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
||||
@media (max-width: 1200px){ .grid4{grid-template-columns:repeat(2,1fr)} }
|
||||
.grid1{display:grid;grid-template-columns:1fr;gap:16px}
|
||||
.spec-card{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
|
||||
.spec-card:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,0,0,.1)}
|
||||
.spec-card.wide{flex-direction:row}
|
||||
.spec-card.wide .mini{width:45%;aspect-ratio:auto;min-height:280px;border-right:1px solid var(--line);border-bottom:0}
|
||||
.spec-card.wide .sc-body{flex:1}
|
||||
.spec-card .sc-num{background:var(--brand-navy);color:#fff;padding:3px 8px;font-size:10px;font-weight:800;letter-spacing:.8px;display:inline-block;border-radius:0 0 3px 0;width:max-content}
|
||||
.spec-card .sc-body{padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:8px}
|
||||
.spec-card h3{font-family:'Merriweather',serif;font-size:16px;font-weight:700;color:var(--brand-navy);line-height:1.35}
|
||||
.spec-card p{font-size:12px;color:#555;line-height:1.55}
|
||||
.spec-card .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
|
||||
.spec-card .tag{font-size:9.5px;letter-spacing:.3px}
|
||||
|
||||
/* Mini previews */
|
||||
.mini{aspect-ratio:16/10;border-bottom:1px solid var(--line);background:#fafaf5;display:flex;padding:8px;gap:4px}
|
||||
.mini.col{flex-direction:column}
|
||||
.mini .minirow{background:#fff;border:1px solid var(--line-2);border-left:2px solid var(--primary);padding:4px 6px;display:flex;flex-direction:column;gap:2px;flex:1;font-size:7px;color:#888}
|
||||
.mini .minirow b{color:var(--brand-navy);font-size:8px;font-weight:700}
|
||||
.mini .minirow.in{border-left-color:var(--accent)}
|
||||
|
||||
.mini-1{display:flex;flex-direction:column;gap:3px;padding:8px}
|
||||
.mini-1 .r{background:#fff;border:1px solid var(--line-2);border-left:2px solid var(--primary);padding:4px 6px;display:grid;grid-template-columns:1fr 48px;gap:4px;flex:1;font-size:7px;color:#888;align-items:center}
|
||||
.mini-1 .r b{color:var(--brand-navy);font-size:8px;font-weight:700;font-family:'Merriweather',serif}
|
||||
.mini-1 .r .ar{font-size:6.5px;color:#888;background:#F4F1EA;padding:2px 4px;text-align:center}
|
||||
.mini-1 .r .tg{display:flex;gap:2px;margin-top:1px}
|
||||
.mini-1 .r .tg span{background:var(--brand-mint);padding:0 3px;font-size:6px;border-radius:3px;color:var(--brand-navy)}
|
||||
|
||||
.mini-2{display:flex;flex-direction:column;gap:3px;padding:8px}
|
||||
.mini-2 .r2{background:#fff;border:1px solid var(--line-2);border-left:2px solid var(--primary);padding:4px;display:flex;gap:4px;align-items:center;flex:1}
|
||||
.mini-2 .th2{width:22px;height:28px;background:linear-gradient(#fdfcf7,#f1eadb);border:1px solid #d9d4c6;flex-shrink:0;position:relative}
|
||||
.mini-2 .th2::before{content:'';position:absolute;inset:2px 3px;border-top:1px solid rgba(0,40,80,.25);border-bottom:1px solid rgba(0,40,80,.25);opacity:.6}
|
||||
.mini-2 .content{flex:1;display:flex;flex-direction:column;gap:2px;font-size:7px;color:#888}
|
||||
.mini-2 .content b{color:var(--brand-navy);font-size:8px;font-family:'Merriweather',serif}
|
||||
.mini-2 .content i{color:#555;font-style:italic}
|
||||
.mini-2 .content .dt{font-size:7px;color:#888;align-self:flex-end;font-family:'Merriweather',serif}
|
||||
|
||||
.mini-3{display:grid;grid-template-columns:1fr 1.1fr;gap:4px;padding:8px}
|
||||
.mini-3 .left-list{display:flex;flex-direction:column;gap:2px}
|
||||
.mini-3 .left-list .r{background:#fff;border:1px solid var(--line-2);border-left:2px solid var(--primary);padding:2px 4px;font-size:6.5px;color:#888}
|
||||
.mini-3 .left-list .r.sel{background:#e7f4f3;border-left-color:var(--accent)}
|
||||
.mini-3 .left-list .r b{color:var(--brand-navy);font-size:7px}
|
||||
.mini-3 .preview-mini{background:#fff;border:1px solid var(--line-2);padding:5px;display:flex;gap:4px}
|
||||
.mini-3 .pv-th{width:28px;height:38px;background:linear-gradient(#fdfcf7,#f1eadb);border:1px solid #d9d4c6;flex-shrink:0}
|
||||
.mini-3 .pv-meta{font-size:6px;color:#888;line-height:1.4}
|
||||
.mini-3 .pv-meta b{color:var(--brand-navy);font-size:7px;display:block;font-family:'Merriweather',serif}
|
||||
|
||||
.mini-4{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:8px}
|
||||
.mini-4 .card-s{background:#fff;border:1px solid var(--line-2);overflow:hidden;display:flex;flex-direction:column}
|
||||
.mini-4 .card-s .th{aspect-ratio:3/4;background:linear-gradient(#fdfcf7,#f1eadb);border-bottom:1px solid var(--line-2)}
|
||||
.mini-4 .card-s .t{font-size:5.5px;color:var(--brand-navy);font-weight:700;padding:3px 4px;font-family:'Merriweather',serif}
|
||||
|
||||
.mini-5{display:grid;grid-template-columns:32% 1fr;gap:6px;padding:10px;align-items:start;min-height:260px}
|
||||
.mini-5 .person-left{background:#fff;border:1px solid var(--line-2);padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px}
|
||||
.mini-5 .person-left .av{width:28px;height:28px;border-radius:50%;background:var(--brand-mint);color:var(--brand-navy);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;font-family:'Merriweather',serif}
|
||||
.mini-5 .person-left .nm{font-family:'Merriweather',serif;font-size:7.5px;font-weight:700;color:var(--brand-navy);text-align:center}
|
||||
.mini-5 .person-left .dt{font-size:6px;color:#888}
|
||||
.mini-5 .dash-mini{background:#fff;border:1px solid var(--line-2);display:flex;flex-direction:column}
|
||||
.mini-5 .dh{background:var(--brand-navy);color:#fff;font-family:'Merriweather',serif;font-size:6.5px;padding:4px 6px;display:flex;justify-content:space-between;align-items:center}
|
||||
.mini-5 .dh span{background:var(--brand-mint);color:var(--brand-navy);font-size:5.5px;padding:1px 4px;border-radius:2px;font-weight:800}
|
||||
.mini-5 .stats-m{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border-bottom:1px solid var(--line-2)}
|
||||
.mini-5 .stats-m div{background:#fafaf5;padding:3px;text-align:center}
|
||||
.mini-5 .stats-m .v{font-family:'Merriweather',serif;font-size:8px;font-weight:900;color:var(--brand-navy)}
|
||||
.mini-5 .stats-m .k{font-size:5px;color:#888;font-weight:700}
|
||||
.mini-5 .hist-m{display:flex;align-items:flex-end;gap:1px;height:22px;padding:4px 5px 0}
|
||||
.mini-5 .hist-m i{flex:1;background:var(--brand-mint);opacity:.6}
|
||||
.mini-5 .hist-m i.p{background:var(--brand-navy);opacity:.9}
|
||||
.mini-5 .bars-m{display:flex;flex-direction:column;gap:1.5px;padding:4px 5px}
|
||||
.mini-5 .bars-m span{display:flex;align-items:center;gap:2px;font-size:5.5px;color:#555}
|
||||
.mini-5 .bars-m span .bar{flex:1;height:2px;background:var(--brand-navy);border-radius:1px}
|
||||
.mini-5 .cloud-m{padding:4px 5px;display:flex;flex-wrap:wrap;gap:2px}
|
||||
.mini-5 .cloud-m span{background:var(--brand-mint);padding:0 3px;border-radius:3px;font-size:5.5px;color:var(--brand-navy);font-weight:700}
|
||||
|
||||
/* Comparison table */
|
||||
.cmp{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:36px}
|
||||
.cmp table{width:100%;border-collapse:collapse}
|
||||
.cmp th,.cmp td{padding:10px 14px;text-align:left;font-size:12px;border-bottom:1px solid var(--line-2);vertical-align:top}
|
||||
.cmp th{background:#fafaf5;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#888;font-weight:800}
|
||||
.cmp td:first-child{font-weight:700;color:var(--brand-navy);font-family:'Merriweather',serif}
|
||||
.cmp .yes{color:#166534}
|
||||
.cmp .no{color:#B91C1C}
|
||||
.cmp .mid{color:#92400E}
|
||||
</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. The first four change the <b>/briefwechsel</b> row itself; the fifth puts insights where they belong — on the person detail page.</p>
|
||||
</div>
|
||||
<div class="spec-meta-right">
|
||||
<div><strong>Page</strong>/briefwechsel · /persons/[id]</div>
|
||||
<div><strong>Brief</strong>Rows feel sparse — ~60% of row width is empty</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="spec-nav">
|
||||
<div class="spec-nav-inner">
|
||||
<span class="lbl">Specs</span>
|
||||
<a class="on" 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 href="04-gallery-cards.html">4 · Gallery Cards</a>
|
||||
<a href="05-person-dashboard.html">5 · Person Dashboard</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="ov">
|
||||
|
||||
<div class="lead">
|
||||
<div>
|
||||
<h2>The situation</h2>
|
||||
<p>On <code>/briefwechsel?senderId=…</code> (e.g. 851 letters for Walter de Gruyter), each row shows only title, date, location and counterpart — leaving the right half empty. The question is: what belongs there?</p>
|
||||
<p style="margin-top:10px">The five specs answer differently. Specs 1–4 rework the row itself. <b>Spec 5</b> argues the archive-level view (top correspondents, activity, tag cloud) belongs on <code>/persons/[id]</code>, not here — and mocks the dashboard that lives there instead.</p>
|
||||
</div>
|
||||
<div class="kit">
|
||||
<h3>Data we can use today</h3>
|
||||
<ul style="list-style:none">
|
||||
<li>Title / Filename <b>✓</b></li>
|
||||
<li>Document date <b>✓</b></li>
|
||||
<li>Location <b>✓</b></li>
|
||||
<li>Sender / receivers <b>✓</b></li>
|
||||
<li>Summary text <b>✓</b></li>
|
||||
<li>Tags <b>✓</b></li>
|
||||
<li>Archive box & folder <b>✓</b></li>
|
||||
<li>PDF thumbnail <b>open issue</b></li>
|
||||
</ul>
|
||||
<p style="font-size:11px;color:#888;margin-top:10px;font-style:italic">Removed from earlier drafts: status lifecycle (will be dropped from the product) and script type (only set after OCR, unreliable).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-h">Concepts that rework /briefwechsel <span class="sub">Specs 1–4</span></div>
|
||||
|
||||
<div class="grid4">
|
||||
<a class="spec-card" href="01-rich-rows.html">
|
||||
<span class="sc-num">01</span>
|
||||
<div class="mini mini-1">
|
||||
<div class="r"><span><b>Demo leserlicher Brief</b><br>31. Mai 1940 · Belgard<br>„letzte Lebenstage…"<div class="tg"><span>Dörpfeld</span></div></span><div class="ar">VII · 5</div></div>
|
||||
<div class="r"><span><b>W-0397 – 2. Sep 1923</b><br>B.Lichterfelde · H. Cram<br>„von Elsbeth…"<div class="tg"><span>Verlag</span></div></span><div class="ar">VI · 7</div></div>
|
||||
<div class="r"><span><b>W-0521 – 24. Dez 1922</b><br>Berlin · W. Dieckmann<br>„Weihnachtsbrief…"<div class="tg"><span>Weihn.</span></div></span><div class="ar">V · 3</div></div>
|
||||
</div>
|
||||
<div class="sc-body">
|
||||
<h3>Rich Rows</h3>
|
||||
<p>Pack summary, tags and archive box into each row. No images, no structural change. Fastest to ship.</p>
|
||||
<div class="tags"><span class="tag">Scanning</span><span class="tag muted">Small effort</span></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="spec-card" href="02-thumbnail-rows.html">
|
||||
<span class="sc-num">02</span>
|
||||
<div class="mini mini-2">
|
||||
<div class="r2"><div class="th2"></div><div class="content"><b>Demo leserlicher Brief</b><i>„letzte Lebenstage von W. Dörpfeld…"</i><span>← Gertrud · Belgard</span><span class="dt">31. Mai 1940</span></div></div>
|
||||
<div class="r2"><div class="th2"></div><div class="content"><b>W-0397 – 2. Sep 1923</b><i>„von Elsbeth geschriebener Kommentar…"</i><span>→ H. Cram · B.Lichterfelde</span><span class="dt">2. Sep 1923</span></div></div>
|
||||
<div class="r2"><div class="th2"></div><div class="content"><b>W-0521 – 24. Dez 1922</b><i>„Weihnachtsbrief, Bitte um Bild…"</i><span>→ W. Dieckmann · Berlin</span><span class="dt">24. Dez 1922</span></div></div>
|
||||
</div>
|
||||
<div class="sc-body">
|
||||
<h3>Thumbnail Rows</h3>
|
||||
<p>PDF preview on the left anchors each row. Summary (when filled) becomes the readable context line.</p>
|
||||
<div class="tags"><span class="tag">Recognition</span><span class="tag muted">Needs thumbnails</span></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="spec-card" href="03-master-detail.html">
|
||||
<span class="sc-num">03</span>
|
||||
<div class="mini mini-3">
|
||||
<div class="left-list">
|
||||
<div class="r"><b>Demo Brief</b></div>
|
||||
<div class="r sel"><b>W-0397</b></div>
|
||||
<div class="r"><b>W-0396</b></div>
|
||||
<div class="r"><b>W-0524</b></div>
|
||||
<div class="r"><b>W-0523</b></div>
|
||||
</div>
|
||||
<div class="preview-mini">
|
||||
<div class="pv-th"></div>
|
||||
<div class="pv-meta"><b>W-0397</b>2. Sep 1923<br>B.Lichterfelde<br>→ H. Cram<br><br>„von Elsbeth…"</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-body">
|
||||
<h3>Master-Detail Split</h3>
|
||||
<p>Compact list left, sticky preview right. Click a row → thumbnail, metadata, summary, excerpt. Browse without losing context.</p>
|
||||
<div class="tags"><span class="tag">Reading flow</span><span class="tag muted">Mobile pattern needed</span></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="spec-card" href="04-gallery-cards.html">
|
||||
<span class="sc-num">04</span>
|
||||
<div class="mini mini-4">
|
||||
<div class="card-s"><div class="th"></div><div class="t">Demo Brief</div></div>
|
||||
<div class="card-s"><div class="th"></div><div class="t">W-0397 · 2 Sep</div></div>
|
||||
<div class="card-s"><div class="th"></div><div class="t">W-0396 · 2 Sep</div></div>
|
||||
<div class="card-s"><div class="th"></div><div class="t">W-0524 · 31 Jul</div></div>
|
||||
<div class="card-s"><div class="th"></div><div class="t">W-0523 · 12 Mai</div></div>
|
||||
<div class="card-s"><div class="th"></div><div class="t">W-0522 · 7 Mär</div></div>
|
||||
</div>
|
||||
<div class="sc-body">
|
||||
<h3>Gallery Cards</h3>
|
||||
<p>Abandon the list for a 4-column grid. Thumbnail-first, family-album feel. Biggest visual change.</p>
|
||||
<div class="tags"><span class="tag">Browsing</span><span class="tag muted">Poor date-scanning</span></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="section-h">The archive-level view moves to /persons/[id] <span class="sub">Spec 5 · separate page</span></div>
|
||||
|
||||
<div class="grid1">
|
||||
<a class="spec-card wide" href="05-person-dashboard.html">
|
||||
<span class="sc-num" style="position:absolute">05</span>
|
||||
<div class="mini mini-5">
|
||||
<div class="person-left">
|
||||
<div class="av">WG</div>
|
||||
<div class="nm">Walter de Gruyter</div>
|
||||
<div class="dt">1862–1923</div>
|
||||
</div>
|
||||
<div class="dash-mini">
|
||||
<div class="dh">Korrespondenz-Überblick <span>↗ Briefwechsel</span></div>
|
||||
<div class="stats-m">
|
||||
<div><div class="v">851</div><div class="k">gesamt</div></div>
|
||||
<div><div class="v" style="color:var(--primary)">612</div><div class="k">→</div></div>
|
||||
<div><div class="v" style="color:var(--accent)">239</div><div class="k">←</div></div>
|
||||
<div><div class="v">42J</div><div class="k">Jahre</div></div>
|
||||
</div>
|
||||
<div class="hist-m"><i style="height:15%"></i><i style="height:30%"></i><i style="height:45%"></i><i style="height:60%"></i><i style="height:80%"></i><i class="p" style="height:100%"></i><i style="height:75%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:25%"></i><i style="height:15%"></i><i style="height:8%"></i></div>
|
||||
<div class="bars-m"><span>W. Dieckmann<span class="bar" style="flex:1"></span>184</span><span>H. Cram<span class="bar" style="flex:.78"></span>143</span><span>E. Dieckmann<span class="bar" style="flex:.48"></span>88</span></div>
|
||||
<div class="cloud-m"><span>Verlag</span><span>Familie</span><span>Weihn.</span><span>Kur</span><span>Reise</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-body">
|
||||
<h3>Person Dashboard (/persons/[id])</h3>
|
||||
<p>The /briefwechsel list stays calm and reading-focused; the archive-level view — activity over years, top correspondents, top locations, tag cloud — lives on the person detail page, where it's useful <i>every time</i> you open a person, not only during letter review.</p>
|
||||
<p>Every correspondent, location, tag and year on the dashboard links into <code>/briefwechsel</code> with pre-filled filters, so the dashboard is the discovery surface and /briefwechsel is the reading surface.</p>
|
||||
<div class="tags"><span class="tag">Discovery</span><span class="tag">Works for bilateral too (always scoped to the person)</span><span class="tag muted">Needs aggregation endpoints</span></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="cmp">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>Concept</th><th>Best for user who wants to…</th><th>Visual change</th><th>New backend</th><th>Effort</th><th>Mobile</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>1 · Rich Rows</td><td>Scan quickly, see summary + tags on every letter</td><td>Row height 2× current</td><td>None</td><td class="yes">Small</td><td class="yes">Right column collapses</td></tr>
|
||||
<tr><td>2 · Thumbnail Rows</td><td>Recognise letters visually, pick up where they left off</td><td>Thumbnail on the left</td><td>PDF thumbnail service (open issue)</td><td class="mid">Medium</td><td class="yes">Fine</td></tr>
|
||||
<tr><td>3 · Master-Detail</td><td>Flip through letters in a reading session</td><td>Two-column split</td><td>None mandatory</td><td class="mid">Medium</td><td class="no">Drawer / sheet needed</td></tr>
|
||||
<tr><td>4 · Gallery Cards</td><td>Browse the collection as an album</td><td>Full structural change (list → grid)</td><td>PDF thumbnail service</td><td class="no">Large</td><td class="yes">Grid reflows 4 → 2</td></tr>
|
||||
<tr><td>5 · Person Dashboard</td><td>Understand a person's correspondence at a glance</td><td>New section on /persons/[id]</td><td>Aggregation endpoints (per-year, per-correspondent, per-location, per-tag)</td><td class="mid">Medium</td><td class="yes">Stacks naturally</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:28px;padding:16px 20px;background:#fff;border-left:4px solid var(--brand-navy);font-size:13px;color:#333;line-height:1.65">
|
||||
<b style="color:var(--brand-navy)">Proposed path forward:</b>
|
||||
<ol style="margin:8px 0 0 20px;padding:0">
|
||||
<li><b>Ship Spec 1 (Rich Rows)</b> now — it uses data we already have and tests whether "empty rows" is really the problem, or whether it's "not enough context to decide which letter to open".</li>
|
||||
<li><b>Build Spec 5 (Person Dashboard)</b> next — it's independent of /briefwechsel and turns the person page into a real archive overview.</li>
|
||||
<li><b>Upgrade to Spec 2 (Thumbnail Rows)</b> once the thumbnail service lands — it layers cleanly on top of Spec 1 without throwing work away.</li>
|
||||
</ol>
|
||||
<div style="margin-top:10px">Specs 3 and 4 remain on the table but are bigger re-architectures — revisit after watching how users behave with 1 + 5 + 2.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user