feat: Add faceted search & trending strip to songs page + mobile nav toggle
- Add genre and uploader filters to /songs with persistent query params in pagination - Implement site-wide "Trending" strip showing recently liked songs - Introduce responsive hamburger nav for mobile with animated icon & ARIA support - Refactor song row layout: move duration into separate `.song-duration` element - Update CSS for mobile grid (2 columns), optimized song rows, and facet selects
This commit is contained in:
parent
c71538b45d
commit
5828b9c9f1
|
|
@ -122,6 +122,8 @@ a:hover { color: #fff; text-shadow: var(--glow-cyan); text-decoration: none; }
|
|||
-webkit-backdrop-filter: blur(6px);
|
||||
position: sticky; top: 0;
|
||||
z-index: 20;
|
||||
/* Establishes containing block for the mobile nav dropdown */
|
||||
overflow: visible;
|
||||
}
|
||||
.header-inner {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
|
|
@ -135,6 +137,30 @@ a:hover { color: #fff; text-shadow: var(--glow-cyan); text-decoration: none; }
|
|||
}
|
||||
.brand:hover { color: #fff; text-shadow: var(--glow-cyan); }
|
||||
.nav { display: flex; gap: 1.1rem; align-items: center; }
|
||||
|
||||
/* Hamburger toggle — hidden on desktop, shown on mobile */
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.4rem;
|
||||
z-index: 21;
|
||||
}
|
||||
.nav-toggle-bar {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: var(--fg);
|
||||
border-radius: 2px;
|
||||
transition: transform .2s, opacity .15s;
|
||||
}
|
||||
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
||||
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
|
||||
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
||||
.nav a {
|
||||
color: var(--muted);
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
|
|
@ -400,7 +426,8 @@ button.linklike.danger:hover { color: #fff; text-shadow: 0 0 6px var(--danger);
|
|||
.song-main { flex: 1; min-width: 0; }
|
||||
.song-title { display: block; color: var(--fg); font-weight: 600; }
|
||||
.song-row:hover .song-title { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
|
||||
.song-meta { width: 60px; text-align: right; font-family: 'Orbitron', monospace; font-size: 0.75rem; color: var(--muted); }
|
||||
.song-subtitle { display: flex; align-items: center; gap: 0.4rem; }
|
||||
.song-duration { font-family: 'Orbitron', monospace; font-size: 0.75rem; flex-shrink: 0; }
|
||||
|
||||
/* ── Now-playing highlight ── */
|
||||
@keyframes now-playing-pulse {
|
||||
|
|
@ -515,6 +542,49 @@ a.detail-creator-card:hover {
|
|||
}
|
||||
.appears-in-title { font-size: 0.85rem; font-weight: 600; }
|
||||
|
||||
/* ---------- Recently liked strip (/songs page) ---------- */
|
||||
.liked-strip { margin-bottom: 1.75rem; }
|
||||
.liked-strip-heading {
|
||||
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
|
||||
color: var(--muted); margin: 0 0 0.65rem;
|
||||
}
|
||||
.liked-strip-scroll {
|
||||
display: flex; gap: 0.75rem; overflow-x: auto;
|
||||
padding-bottom: 0.4rem; scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
.liked-card {
|
||||
flex: 0 0 auto; display: flex; align-items: center; gap: 0.55rem;
|
||||
background: var(--bg-panel); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 0.4rem 0.65rem 0.4rem 0.4rem;
|
||||
text-decoration: none; color: var(--fg);
|
||||
min-width: 150px; max-width: 210px;
|
||||
transition: border-color .15s, background .15s;
|
||||
}
|
||||
.liked-card:hover { border-color: var(--neon-cyan); background: var(--bg-inset); color: var(--fg); text-decoration: none; }
|
||||
.liked-card-cover {
|
||||
width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
|
||||
}
|
||||
.liked-card-cover--fallback {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--bg-inset); font-size: 1.1rem;
|
||||
}
|
||||
.liked-card-info { min-width: 0; }
|
||||
.liked-card-title { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
|
||||
.liked-card-artist { font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
|
||||
|
||||
/* ---------- Search facets (/songs page) ---------- */
|
||||
.search-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
|
||||
.facet-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
|
||||
.facet-select {
|
||||
background: var(--bg-panel); color: var(--fg);
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 0.35rem 0.65rem; font-size: 0.82rem; cursor: pointer;
|
||||
transition: border-color .15s;
|
||||
}
|
||||
.facet-select:hover { border-color: var(--muted); }
|
||||
.facet-select:focus { outline: none; border-color: var(--neon-cyan); }
|
||||
|
||||
/* ---------- Forms ---------- */
|
||||
.form-card {
|
||||
background: var(--bg-panel);
|
||||
|
|
@ -1805,6 +1875,65 @@ a.detail-creator-card:hover {
|
|||
.detail-creator-card { flex-direction: row; align-items: center; gap: 0.6rem; text-align: left; width: 100%; }
|
||||
.detail-creator-avatar { width: 48px; height: 48px; }
|
||||
.hero h1 { font-size: 1.6rem; }
|
||||
|
||||
/* ── Playlist card grid: 2 per row on mobile ── */
|
||||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.card-body { padding: 0.5rem 0.6rem; }
|
||||
.card-title { font-size: 0.78rem; }
|
||||
.card-creator { display: none; }
|
||||
|
||||
/* ── Mobile song row (Option A) ── */
|
||||
.song-row {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr auto;
|
||||
grid-template-areas:
|
||||
"cover main play"
|
||||
"cover social play";
|
||||
column-gap: 0.75rem;
|
||||
row-gap: 0.2rem;
|
||||
align-items: start;
|
||||
padding: 0.65rem 0;
|
||||
}
|
||||
.song-row .song-cover { grid-area: cover; align-self: center; width: 52px; height: 52px; }
|
||||
.song-row .song-main { grid-area: main; align-self: center; }
|
||||
.song-row .song-social { grid-area: social; align-self: center; }
|
||||
.song-row .btn-play { grid-area: play; align-self: center; padding: 0.35rem 0.5rem; font-size: 0.72rem; }
|
||||
.song-row .eq-bars { display: none; }
|
||||
.song-row .song-subtitle { justify-content: space-between; }
|
||||
|
||||
/* ── Mobile nav ── */
|
||||
.nav-toggle { display: flex; }
|
||||
|
||||
.nav {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(5, 6, 13, 0.97);
|
||||
border-bottom: 1px solid var(--border-strong);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
padding: 0.5rem 1.25rem 1rem;
|
||||
z-index: 19;
|
||||
}
|
||||
.nav.nav--open { display: flex; }
|
||||
|
||||
.nav a, .nav button.linklike {
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.85rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.nav > *:last-child, .nav .inline-form:last-child a,
|
||||
.nav .inline-form:last-child button { border-bottom: none; }
|
||||
.nav .inline-form { width: 100%; }
|
||||
.nav .btn-small { display: block; width: 100%; text-align: center; margin: 0.25rem 0; }
|
||||
}
|
||||
|
||||
/* ---------- Reduced motion ---------- */
|
||||
|
|
|
|||
|
|
@ -51,21 +51,23 @@ router.get('/songs', (req, res) => {
|
|||
const userId = req.session.user?.id || null;
|
||||
const page = Math.max(1, Number(req.query.page) || 1);
|
||||
const pageSize = 25;
|
||||
const { rows, total } = songs.list({
|
||||
q: req.query.q || '',
|
||||
limit: pageSize,
|
||||
offset: (page - 1) * pageSize,
|
||||
loggedIn,
|
||||
});
|
||||
const q = req.query.q || '';
|
||||
const genre = req.query.genre || '';
|
||||
const uploadedBy = req.query.uploader || '';
|
||||
|
||||
const { rows, total } = songs.list({ q, genre, uploadedBy, limit: pageSize, offset: (page - 1) * pageSize, loggedIn });
|
||||
social.enrichSongs(rows, userId);
|
||||
|
||||
const genres = songs.listGenres();
|
||||
const uploaders = songs.listUploaders(loggedIn);
|
||||
|
||||
const recentlyLiked = social.getRecentlyLikedSongs(5, loggedIn).map(songs.toView);
|
||||
social.enrichSongs(recentlyLiked, userId);
|
||||
|
||||
res.render('public/songs', {
|
||||
title: 'Songs',
|
||||
songs: rows,
|
||||
q: req.query.q || '',
|
||||
page,
|
||||
pageSize,
|
||||
total,
|
||||
totalPages: Math.max(1, Math.ceil(total / pageSize)),
|
||||
title: 'Songs', songs: rows, q, genre, uploadedBy,
|
||||
page, pageSize, total, totalPages: Math.max(1, Math.ceil(total / pageSize)),
|
||||
genres, uploaders, recentlyLiked,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -145,9 +145,30 @@ function getLikedPlaylists(userId, loggedIn = false) {
|
|||
return (loggedIn ? likedPlaylistsUserStmt : likedPlaylistsGuestStmt).all(userId);
|
||||
}
|
||||
|
||||
// Site-wide recently liked songs (distinct songs, ordered by most recent like from any user).
|
||||
const recentlyLikedGuestStmt = db.prepare(`
|
||||
SELECT s.* FROM songs s
|
||||
WHERE s.visibility = 'public'
|
||||
AND EXISTS (SELECT 1 FROM song_likes sl WHERE sl.song_id = s.id)
|
||||
ORDER BY (SELECT MAX(sl2.created_at) FROM song_likes sl2 WHERE sl2.song_id = s.id) DESC
|
||||
LIMIT ?
|
||||
`);
|
||||
const recentlyLikedUserStmt = db.prepare(`
|
||||
SELECT s.* FROM songs s
|
||||
WHERE s.visibility IN ('public', 'logged_in')
|
||||
AND EXISTS (SELECT 1 FROM song_likes sl WHERE sl.song_id = s.id)
|
||||
ORDER BY (SELECT MAX(sl2.created_at) FROM song_likes sl2 WHERE sl2.song_id = s.id) DESC
|
||||
LIMIT ?
|
||||
`);
|
||||
|
||||
function getRecentlyLikedSongs(n = 5, loggedIn = false) {
|
||||
return (loggedIn ? recentlyLikedUserStmt : recentlyLikedGuestStmt).all(n);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
toggleSongLike, toggleSongFavorite,
|
||||
togglePlaylistLike, togglePlaylistFavorite,
|
||||
enrichSongs, enrichPlaylists,
|
||||
getLikedSongs, getLikedPlaylists,
|
||||
getRecentlyLikedSongs,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -146,18 +146,31 @@ function findById(id) {
|
|||
}
|
||||
|
||||
// loggedIn=true means the viewer is authenticated (sees public + logged_in).
|
||||
function list({ q, limit = 25, offset = 0, loggedIn = false }) {
|
||||
// Supports optional genre and uploadedBy filters for faceted browsing.
|
||||
function list({ q, genre, uploadedBy, limit = 25, offset = 0, loggedIn = false }) {
|
||||
const vis = loggedIn
|
||||
? `visibility IN ('public', 'logged_in')`
|
||||
: `visibility = 'public'`;
|
||||
const conds = [vis];
|
||||
const params = { limit, offset };
|
||||
|
||||
if (q && q.trim()) {
|
||||
const like = `%${q.trim()}%`;
|
||||
if (loggedIn) {
|
||||
return { rows: searchUserStmt.all({ q: like, limit, offset }).map(toView), total: countSearchUserStmt.get({ q: like }).c };
|
||||
conds.push(`(title LIKE @q OR artist LIKE @q OR album LIKE @q)`);
|
||||
params.q = `%${q.trim()}%`;
|
||||
}
|
||||
return { rows: searchGuestStmt.all({ q: like, limit, offset }).map(toView), total: countSearchGuestStmt.get({ q: like }).c };
|
||||
if (genre) {
|
||||
conds.push(`genre = @genre`);
|
||||
params.genre = genre;
|
||||
}
|
||||
if (loggedIn) {
|
||||
return { rows: listUserStmt.all(limit, offset).map(toView), total: countUserStmt.get().c };
|
||||
if (uploadedBy) {
|
||||
conds.push(`uploaded_by = @uploadedBy`);
|
||||
params.uploadedBy = Number(uploadedBy);
|
||||
}
|
||||
return { rows: listGuestStmt.all(limit, offset).map(toView), total: countGuestStmt.get().c };
|
||||
|
||||
const where = `WHERE ${conds.join(' AND ')}`;
|
||||
const rows = db.prepare(`SELECT * FROM songs ${where} ORDER BY created_at DESC LIMIT @limit OFFSET @offset`).all(params);
|
||||
const total = db.prepare(`SELECT COUNT(*) AS c FROM songs ${where}`).get(params).c;
|
||||
return { rows: rows.map(toView), total };
|
||||
}
|
||||
|
||||
function listAll() {
|
||||
|
|
@ -187,4 +200,14 @@ function listGenres() {
|
|||
return listGenresStmt.all().map(r => r.genre);
|
||||
}
|
||||
|
||||
module.exports = { create, update, setCover, remove, findById, findBySlug, list, listAll, listByUser, listPublicByUser, listForManagement, recent, listGenres };
|
||||
function listUploaders(loggedIn = false) {
|
||||
const vis = loggedIn ? `IN ('public', 'logged_in')` : `= 'public'`;
|
||||
return db.prepare(`
|
||||
SELECT DISTINCT u.id, u.display_name
|
||||
FROM songs s JOIN users u ON u.id = s.uploaded_by
|
||||
WHERE s.visibility ${vis} AND s.uploaded_by IS NOT NULL
|
||||
ORDER BY u.display_name ASC
|
||||
`).all();
|
||||
}
|
||||
|
||||
module.exports = { create, update, setCover, remove, findById, findBySlug, toView, list, listAll, listByUser, listPublicByUser, listForManagement, recent, listGenres, listUploaders };
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
<header class="site-header">
|
||||
<div class="container header-inner">
|
||||
<a class="brand" href="/">🎵 <%= siteName %></a>
|
||||
<nav class="nav">
|
||||
<button class="nav-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="main-nav">
|
||||
<span class="nav-toggle-bar"></span>
|
||||
<span class="nav-toggle-bar"></span>
|
||||
<span class="nav-toggle-bar"></span>
|
||||
</button>
|
||||
<nav class="nav" id="main-nav">
|
||||
<a href="/songs" class="<%= currentPath && currentPath.startsWith('/songs') ? 'active' : '' %>">Songs</a>
|
||||
<a href="/playlists" class="<%= currentPath && currentPath.startsWith('/playlists') ? 'active' : '' %>">Playlists</a>
|
||||
<a href="/profiles" class="<%= currentPath && currentPath.startsWith('/profiles') ? 'active' : '' %>">Profiles</a>
|
||||
|
|
@ -27,3 +32,23 @@
|
|||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<script>
|
||||
(function () {
|
||||
var btn = document.querySelector('.nav-toggle');
|
||||
var nav = document.getElementById('main-nav');
|
||||
if (!btn || !nav) return;
|
||||
btn.addEventListener('click', function () {
|
||||
var open = nav.classList.toggle('nav--open');
|
||||
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
btn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
|
||||
});
|
||||
// Close on any nav link click (covers SPA navigation)
|
||||
nav.addEventListener('click', function (e) {
|
||||
if (e.target.closest('a') || e.target.closest('button[type="submit"]')) {
|
||||
nav.classList.remove('nav--open');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
btn.setAttribute('aria-label', 'Open menu');
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
<a class="song-title" href="/songs/<%= s.slug %>"><%= s.title %></a>
|
||||
<% if (s.visibility === 'logged_in') { %><span class="badge badge-logged-in">Members</span><% } %>
|
||||
<% if (s.visibility === 'private') { %><span class="badge badge-private">Private</span><% } %>
|
||||
<div class="muted small"><%= s.artist %><% if (s.album) { %> · <%= s.album %><% } %></div>
|
||||
<div class="song-subtitle">
|
||||
<span class="muted small"><%= s.artist %><% if (s.album) { %> · <%= s.album %><% } %></span>
|
||||
<% if (s.durationSeconds) { %><span class="song-duration muted small"><%= Math.floor(s.durationSeconds/60) %>:<%= String(s.durationSeconds % 60).padStart(2,'0') %></span><% } %>
|
||||
</div>
|
||||
<div class="song-meta muted small">
|
||||
<% if (s.durationSeconds) { %><%= Math.floor(s.durationSeconds/60) %>:<%= String(s.durationSeconds % 60).padStart(2,'0') %><% } %>
|
||||
</div>
|
||||
<span class="eq-bars" aria-hidden="true"><span></span><span></span><span></span></span>
|
||||
<div class="song-social">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,55 @@
|
|||
<h1>Songs</h1>
|
||||
|
||||
<% if (recentlyLiked && recentlyLiked.length > 0) { %>
|
||||
<section class="liked-strip">
|
||||
<h2 class="liked-strip-heading">Trending</h2>
|
||||
<div class="liked-strip-scroll">
|
||||
<% recentlyLiked.forEach((s) => { %>
|
||||
<a href="/songs/<%= s.slug %>" class="liked-card">
|
||||
<% if (s.coverPath) { %>
|
||||
<img src="/media/<%= s.coverPath %>" alt="" class="liked-card-cover">
|
||||
<% } else { %>
|
||||
<div class="liked-card-cover liked-card-cover--fallback">♪</div>
|
||||
<% } %>
|
||||
<span class="liked-card-info">
|
||||
<span class="liked-card-title"><%= s.title %></span>
|
||||
<span class="liked-card-artist"><%= s.artist %></span>
|
||||
</span>
|
||||
</a>
|
||||
<% }) %>
|
||||
</div>
|
||||
</section>
|
||||
<% } %>
|
||||
|
||||
<form method="get" action="/songs" class="search-form">
|
||||
<div class="search-row">
|
||||
<input type="search" name="q" value="<%= q %>" placeholder="Search title, artist, album…" />
|
||||
<button type="submit">Search</button>
|
||||
<% if (q) { %><a href="/songs" class="muted small">clear</a><% } %>
|
||||
<% if (q || genre || uploadedBy) { %><a href="/songs" class="muted small">clear</a><% } %>
|
||||
</div>
|
||||
<% if (genres.length > 0 || uploaders.length > 0) { %>
|
||||
<div class="facet-row">
|
||||
<% if (genres.length > 0) { %>
|
||||
<select name="genre" onchange="this.form.submit()" class="facet-select">
|
||||
<option value="">All genres</option>
|
||||
<% genres.forEach((g) => { %>
|
||||
<option value="<%= g %>"<%= genre === g ? ' selected' : '' %>><%= g %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
<% } %>
|
||||
<% if (uploaders.length > 0) { %>
|
||||
<select name="uploader" onchange="this.form.submit()" class="facet-select">
|
||||
<option value="">All profiles</option>
|
||||
<% uploaders.forEach((u) => { %>
|
||||
<option value="<%= u.id %>"<%= uploadedBy == u.id ? ' selected' : '' %>><%= u.display_name %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
</form>
|
||||
|
||||
<p class="muted small"><%= total %> song<%= total === 1 ? '' : 's' %><% if (q) { %> matching “<%= q %>”<% } %></p>
|
||||
<p class="muted small"><%= total %> song<%= total === 1 ? '' : 's' %><% if (q) { %> matching "<%= q %>"<% } %></p>
|
||||
|
||||
<% if (songs.length === 0) { %>
|
||||
<p class="muted">No songs found.</p>
|
||||
|
|
@ -15,9 +58,17 @@
|
|||
<% } %>
|
||||
|
||||
<% if (totalPages > 1) { %>
|
||||
<%
|
||||
const qs = [
|
||||
q ? 'q=' + encodeURIComponent(q) : '',
|
||||
genre ? 'genre=' + encodeURIComponent(genre) : '',
|
||||
uploadedBy ? 'uploader=' + encodeURIComponent(uploadedBy) : '',
|
||||
].filter(Boolean).join('&');
|
||||
const pref = qs ? qs + '&' : '';
|
||||
%>
|
||||
<nav class="pagination">
|
||||
<% if (page > 1) { %><a href="?<%= q ? 'q=' + encodeURIComponent(q) + '&' : '' %>page=<%= page - 1 %>">← Prev</a><% } %>
|
||||
<% if (page > 1) { %><a href="?<%= pref %>page=<%= page - 1 %>">← Prev</a><% } %>
|
||||
<span class="muted">Page <%= page %> / <%= totalPages %></span>
|
||||
<% if (page < totalPages) { %><a href="?<%= q ? 'q=' + encodeURIComponent(q) + '&' : '' %>page=<%= page + 1 %>">Next →</a><% } %>
|
||||
<% if (page < totalPages) { %><a href="?<%= pref %>page=<%= page + 1 %>">Next →</a><% } %>
|
||||
</nav>
|
||||
<% } %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue