From 7f6325fe213ed46ff5479ffd34b0e212426d48f2 Mon Sep 17 00:00:00 2001 From: Ken D'Ambrosio Date: Mon, 8 Jun 2026 21:09:47 +0000 Subject: Add people cluster detail page with face move/merge and hover preview Each cluster in /admin/people now links to a detail page showing all faces in a grid. From there you can rename the cluster, move individual faces to another named person (or spin off a new cluster), or merge the entire cluster into another. Hovering any face crop shows the original full photo for context. Co-Authored-By: Claude Sonnet 4.6 --- public/css/style.css | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'public/css/style.css') diff --git a/public/css/style.css b/public/css/style.css index 47147f4..7b0ce1a 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -477,6 +477,38 @@ tr.delete-marked td { background: rgba(192,57,43,.08); } } .name-input:focus { border-color: var(--accent); outline: none; } +/* ── People — detail page ──────────────────────────────────────────────── */ +.face-detail-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); + gap: 10px; + margin-top: 16px; +} +.face-detail-card { + background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); + padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; +} +.face-detail-thumb img { border-radius: 50%; object-fit: cover; display: block; } +.face-detail-thumb a { display: block; line-height: 0; cursor: zoom-in; } +.face-move-form { display: flex; flex-direction: column; gap: 4px; width: 100%; } +.face-move-select { + width: 100%; + background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); + color: var(--text); padding: 3px 6px; font-size: .75rem; cursor: pointer; +} +.face-move-select:focus { border-color: var(--accent); outline: none; } + +/* Shared hover preview (face crops) */ +#face-hover-preview { + display: none; position: fixed; z-index: 9999; pointer-events: none; + padding: 4px; border: 2px solid var(--border); border-radius: var(--radius); + background: var(--bg2); box-shadow: 0 8px 24px rgba(0,0,0,.6); +} +#face-hover-preview img { + display: block; width: 300px; height: 300px; object-fit: cover; + border-radius: calc(var(--radius) - 2px); +} + /* ── People — public ───────────────────────────────────────────────────── */ .people-grid { margin-top: 8px; } -- cgit v1.2.3