fix: top releases height synced to track list via shared CSS grid row
The parent is now a 2-column CSS grid with grid-template-rows: auto 1fr. Headers go in row 1 (auto). Track list and releases grid go in row 2 (1fr). The track list's natural height defines row 2's height. The releases grid stretches to match via align-self:stretch. Inside the releases grid, cards use flex:1 on the art container so album art fills available height (with object-fit:cover for non-square crops). The art is no longer aspect-ratio:1 — it adapts to whatever height the track list provides. This guarantees both columns are always the same height regardless of track count or release count.
This commit is contained in:
@@ -334,18 +334,39 @@ export class ExploreArtistDetails extends LitElement {
|
|||||||
.top-section-columns {
|
.top-section-columns {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 24px;
|
grid-template-rows: auto 1fr;
|
||||||
|
gap: 0 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-section-column {
|
.top-section-column {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header-tracks {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header-releases {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list-container {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-releases-grid {
|
.top-releases-grid {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
justify-items: center;
|
align-self: stretch;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-release-card {
|
.top-release-card {
|
||||||
@@ -358,7 +379,8 @@ export class ExploreArtistDetails extends LitElement {
|
|||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 100%;
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-release-card:hover {
|
.top-release-card:hover {
|
||||||
@@ -374,7 +396,8 @@ export class ExploreArtistDetails extends LitElement {
|
|||||||
|
|
||||||
.top-release-art {
|
.top-release-art {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 1;
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
@@ -1292,57 +1315,51 @@ export class ExploreArtistDetails extends LitElement {
|
|||||||
<div class="top-section-columns">
|
<div class="top-section-columns">
|
||||||
${hasTracks
|
${hasTracks
|
||||||
? html`
|
? html`
|
||||||
<div class="top-section-column">
|
<h3 class="section-header section-header-tracks">Top Tracks</h3>
|
||||||
<h3 class="section-header">Top Tracks</h3>
|
<div class="track-list track-list-container">
|
||||||
<div class="track-list">
|
${tracks.map(
|
||||||
${tracks.map(
|
(t, i) => html`
|
||||||
(t, i) => html`
|
<div class="track-item">
|
||||||
<div class="track-item">
|
<span class="track-rank"
|
||||||
<span class="track-rank"
|
>${i + 1}</span
|
||||||
>${i + 1}</span
|
>
|
||||||
|
<div class="track-info">
|
||||||
|
<div
|
||||||
|
class="track-title"
|
||||||
>
|
>
|
||||||
<div class="track-info">
|
${t.trackName}
|
||||||
<div
|
</div>
|
||||||
class="track-title"
|
<div
|
||||||
>
|
class="track-artist"
|
||||||
${t.trackName}
|
>
|
||||||
</div>
|
${t.artistName}
|
||||||
<div
|
|
||||||
class="track-artist"
|
|
||||||
>
|
|
||||||
${t.artistName}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="track-listens">
|
|
||||||
${formatListenCount(
|
|
||||||
t.totalListenCount,
|
|
||||||
)}
|
|
||||||
plays
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
`,
|
<span class="track-listens">
|
||||||
)}
|
${formatListenCount(
|
||||||
</div>
|
t.totalListenCount,
|
||||||
|
)}
|
||||||
|
plays
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: nothing}
|
: nothing}
|
||||||
${hasReleases
|
${hasReleases
|
||||||
? html`
|
? html`
|
||||||
<div class="top-section-column">
|
<h3 class="section-header section-header-releases">Top Releases</h3>
|
||||||
<h3 class="section-header">Top Releases</h3>
|
<div class="top-releases-grid">
|
||||||
<div class="top-releases-grid">
|
${releases.map((rg) =>
|
||||||
${releases.map((rg) =>
|
this.renderTopReleaseCard(rg),
|
||||||
this.renderTopReleaseCard(rg),
|
)}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: releasesLoading
|
: releasesLoading
|
||||||
? html`
|
? html`
|
||||||
<div class="top-section-column">
|
<h3 class="section-header section-header-releases">Top Releases</h3>
|
||||||
<h3 class="section-header">Top Releases</h3>
|
<div class="section-loading" style="grid-column:2;grid-row:2">Loading\u2026</div>
|
||||||
<div class="section-loading">Loading\u2026</div>
|
|
||||||
</div>
|
|
||||||
`
|
`
|
||||||
: nothing}
|
: nothing}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user