diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/css/style.css | 1 | ||||
| -rw-r--r-- | public/js/album.js | 13 |
2 files changed, 14 insertions, 0 deletions
diff --git a/public/css/style.css b/public/css/style.css index 61462a4..037b115 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -148,6 +148,7 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; } } .album-label { padding: 6px 8px; font-size: .88rem; font-weight: 500; color: var(--text); } +#album-search { display: block; width: 100%; max-width: 280px; margin-bottom: 14px; padding: 5px 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .9rem; } .card-meta { padding: 6px 8px; } .card-caption { font-size: .8rem; color: var(--text-dim); } diff --git a/public/js/album.js b/public/js/album.js index 74d524c..d3a563a 100644 --- a/public/js/album.js +++ b/public/js/album.js @@ -96,6 +96,19 @@ window.addEventListener('DOMContentLoaded', () => { } }); +// Album search filter +(function () { + const input = document.getElementById('album-search'); + if (!input) return; + input.addEventListener('input', () => { + const q = input.value.trim().toLowerCase(); + document.querySelectorAll('#album-grid .album-card').forEach(card => { + const label = (card.querySelector('.album-label')?.textContent || '').toLowerCase(); + card.style.display = !q || label.includes(q) ? '' : 'none'; + }); + }); +})(); + // Touch swipe (function () { let startX = null; |