refactor: Optimize now-playing modal and song detail page for mobile

- Reveal left panel in NP modal on mobile by stacking content vertically
- Hide record & creator info to preserve space; center sleeve image
- Update song detail layout: full-width cover, stacked metadata, centered controls
- Ensure buttons and share row wrap/center properly on narrow screens
This commit is contained in:
Brian Fertig 2026-04-13 23:24:06 -06:00
parent 5828b9c9f1
commit 5fd5ee6351
1 changed files with 55 additions and 5 deletions

View File

@ -1125,8 +1125,39 @@ a.detail-creator-card:hover {
#np-btn-repeat.active { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
@media (max-width: 600px) {
#np-left { display: none; }
#np-modal { width: 96vw; height: 90vh; }
#np-modal {
flex-direction: column;
width: 96vw;
height: 90vh;
}
/* Un-hide left panel, stack it above the track list */
#np-left {
display: flex;
width: 100%;
flex-shrink: 0;
flex-direction: column;
align-items: center;
padding: 1.25rem 1rem 0.75rem;
border-right: none;
border-bottom: 1px solid var(--border);
background: var(--bg-inset);
}
/* Reset desktop tilt/oversize — plain centered square */
#np-sleeve-scene {
width: min(55vw, 200px);
margin: 0;
transform: none;
}
#np-sleeve-scene:hover { transform: scale(1.03); cursor: pointer; }
/* Vinyl record and creator strip hidden on mobile to save space */
#np-record { display: none; }
#np-creator-info { display: none; }
/* Right panel takes remaining height */
#np-right { flex: 1; min-height: 0; }
}
/* ---------- Avatar ---------- */
@ -1869,9 +1900,28 @@ a.detail-creator-card:hover {
.player-now { width: auto; flex: 1; }
#player-viz { width: 56px; }
#player-audio { width: 100%; order: 3; }
.song-detail { flex-direction: column; align-items: flex-start; }
.song-detail-cover { width: 100%; height: auto; max-width: 300px; aspect-ratio: 1 / 1; object-fit: cover; }
.song-detail-info { flex-wrap: wrap; }
/* ── Song detail page ── */
.song-detail { flex-direction: column; align-items: center; }
.song-detail-cover {
width: min(72vw, 260px); height: auto; max-width: none;
aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto;
}
.song-detail-info { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
.song-detail-meta {
display: flex; flex-direction: column; align-items: center;
gap: 0.5rem; text-align: center; width: 100%;
}
.song-detail-meta h1 { font-size: 1.35rem; }
.song-detail-meta .social-row { justify-content: center; margin: 0; }
/* Play and Edit: full-width block buttons */
.song-detail-meta .btn-primary,
.song-detail-meta .btn-secondary { width: 100%; text-align: center; display: block; }
/* Now Playing button (shown while track plays) */
.song-detail-meta .btn-nowplaying { width: 100%; text-align: center; margin: 0; }
/* Share row: wrap and center on narrow screens */
.song-detail-meta .share-row { flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.share-label { width: 100%; text-align: center; }
/* Creator card */
.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; }