diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-06-08 21:09:47 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-06-08 21:09:47 +0000 |
| commit | 7f6325fe213ed46ff5479ffd34b0e212426d48f2 (patch) | |
| tree | 46430a22dc791ce5c8018eeb7bce2c857fd17cd6 /public | |
| parent | 00f63c03b7c5de68aea6a2305886bc1953a722b6 (diff) | |
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 <noreply@anthropic.com>
Diffstat (limited to 'public')
| -rw-r--r-- | public/css/style.css | 32 |
1 files changed, 32 insertions, 0 deletions
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; } |