diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-06-08 19:11:51 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-06-08 19:11:51 +0000 |
| commit | 00f63c03b7c5de68aea6a2305886bc1953a722b6 (patch) | |
| tree | 054ff2f9029ea57c50da6e823982648f8766ec98 /public/css/style.css | |
| parent | 01f52565f460a0107679999588b73b770f01a98c (diff) | |
Add photo search with Boolean operators
- Server-side search index built from all album.json files + people.json,
cached in memory for 5 minutes. Each photo document includes filename,
album path words, title, caption, camera, date parts (year/month-name/
full date), and person names.
- Recursive-descent Boolean parser: AND (explicit or implicit between
consecutive terms), OR, NOT, with standard precedence.
- GET /search?q=... returns a photo grid (max 300 results) linking each
photo back to its album lightbox.
- Search box added to the site header; hidden on mobile.
- Results show filename, date, person names, and album path per photo.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'public/css/style.css')
| -rw-r--r-- | public/css/style.css | 27 |
1 files changed, 27 insertions, 0 deletions
diff --git a/public/css/style.css b/public/css/style.css index ba9b822..47147f4 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -366,6 +366,32 @@ legend { padding: 0 8px; color: var(--text-dim); font-size: .85rem; } .sub-album-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .sub-album-list a { padding: 4px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); font-size: .9rem; } +/* ── Header search ─────────────────────────────────────────────────────── */ +.header-search { flex: 1; display: flex; justify-content: center; padding: 0 20px; } +.header-search-input { + width: 200px; + background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); + color: var(--text); padding: 5px 12px; font-size: .85rem; + transition: width .2s, border-color .15s; +} +.header-search-input:focus { width: 300px; border-color: var(--accent); outline: none; } + +/* ── Search results page ────────────────────────────────────────────────── */ +.search-form { display: flex; gap: 8px; margin: 14px 0 8px; } +.search-input { + flex: 1; max-width: 540px; + background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); + color: var(--text); padding: 8px 12px; font-size: 1rem; +} +.search-input:focus { border-color: var(--accent); outline: none; } +.search-hint { font-size: .8rem; color: var(--text-dim); margin: 0 0 18px; } +.search-hint code { background: var(--bg3); padding: 1px 5px; border-radius: 3px; font-size: .85em; } +.search-card .card-meta { padding: 6px 8px 8px; } +.search-album-path { font-size: .72rem; color: var(--text-dim); margin-top: 3px; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.search-album-path a { color: var(--text-dim); } +.search-album-path a:hover { color: var(--accent); } + /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 600px) { :root { --thumb: 140px; --gap: 8px; } @@ -373,6 +399,7 @@ legend { padding: 0 8px; color: var(--text-dim); font-size: .85rem; } .lb-prev { left: 4px; } .lb-next { right: 4px; } .files-table { font-size: .78rem; } + .header-search { display: none; } } /* ── Unplayable originals (admin-only) ─────────────────────────────────── */ |
