diff options
| -rw-r--r-- | public/css/style.css | 1 | ||||
| -rw-r--r-- | public/js/album.js | 13 | ||||
| -rw-r--r-- | views/album.erb | 5 |
3 files changed, 18 insertions, 1 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; diff --git a/views/album.erb b/views/album.erb index 077e119..03eb3bb 100644 --- a/views/album.erb +++ b/views/album.erb @@ -20,7 +20,10 @@ <% unless @albums.empty? %> <section class="grid-section"> <% if @entries.any? %><h2 class="section-label">Albums</h2><% end %> - <div class="grid"> + <% if @albums.length > 4 %> + <input type="search" id="album-search" placeholder="Filter albums…" autocomplete="off"> + <% end %> + <div class="grid" id="album-grid"> <% @albums.each do |a| %> <% href = @rel.empty? ? "/browse/#{a[:name]}" : "/browse/#{@rel}/#{a[:name]}" %> <a href="<%= href %>" class="card album-card"> |