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:
parent
5828b9c9f1
commit
5fd5ee6351
|
|
@ -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; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue