mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 06:25:41 +00:00
fix(tracks): RC3 layout regressions + multi-artist links (#976)
* fix(tracks): RC3 layout regressions + multi-artist links - Restore vertical rhythm on the Tracks hub: the header/hero/rails/browse sections sat two wrapper divs below .tracks-page so its flex gap never reached them and they collapsed together. New .tracks-hub-stack re-applies the gap, fixing the tagline-touching-hero and Random-Pick-overlapping-hero spacing (the rail's nav buttons no longer ride into the box above). - Stop the sticky browse-table header going transparent on hover: its base background became opaque but the :hover rule still forced transparent, so rows bled through. Header now keeps its card background on hover. - Widen the Duration column (56px -> 72px; 56 -> 64 on mobile) so the "DURATION" header no longer clips/overruns. - Split multi-artist tracks into individually clickable artist links in both the "Track of the moment" hero and the browse list rows (OpenSubsonic artists[] with single-artist fallback), matching the album tracklist. * docs(changelog): Tracks RC3 spacing, Duration, header hover, multi-artist (#976)
This commit is contained in:
committed by
GitHub
parent
908c349cfd
commit
88df194808
@@ -9,6 +9,16 @@
|
||||
padding-bottom: var(--space-8, 2rem);
|
||||
}
|
||||
|
||||
/* The hub sections (header, hero, rails, browse list) live two wrapper divs
|
||||
deep inside .tracks-page, so the page-level flex gap never reached them and
|
||||
the sections collapsed together. This stack restores even vertical rhythm
|
||||
between them. */
|
||||
.tracks-hub-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
}
|
||||
|
||||
.tracks-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
@@ -18,11 +18,11 @@
|
||||
}
|
||||
|
||||
.song-list-row {
|
||||
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 56px;
|
||||
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 64px;
|
||||
}
|
||||
|
||||
.song-list-row--with-bpm {
|
||||
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 48px 56px;
|
||||
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 48px 64px;
|
||||
}
|
||||
|
||||
.song-list-row-cell:nth-child(4), /* album */
|
||||
|
||||
+6
-3
@@ -2,7 +2,7 @@
|
||||
|
||||
.song-list-row {
|
||||
display: grid;
|
||||
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 56px;
|
||||
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 72px;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
@@ -43,8 +43,11 @@
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
/* Header is sticky and opaque — keep its card background on hover so the
|
||||
generic .song-list-row:hover rule doesn't turn it transparent (which let
|
||||
rows scrolling underneath bleed through). */
|
||||
.song-list-row--header:hover {
|
||||
background: transparent;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.song-list-row-cell {
|
||||
@@ -75,7 +78,7 @@
|
||||
}
|
||||
|
||||
.song-list-row--with-bpm {
|
||||
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 48px 56px;
|
||||
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 48px 72px;
|
||||
}
|
||||
|
||||
.song-list-row-bpm {
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.virtual-song-list-title {
|
||||
|
||||
Reference in New Issue
Block a user