Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): standardize AlbumCard size and grid layout across all views

Browse Source 
- Use size="large" (180px) for all AlbumCard instances
- Change album grids from CSS grid with 1fr to flexbox
- Fix LocalLibrary gap issue by using consistent spacing
- Align VirtualizedAlbumList, ArtistDetailView, SearchView,
  FavoritesView, HomeView, and AlbumDetailView
This commit is contained in:
vicrodh committed 2026-01-25 04:51:29 -06:00
1 parent 75060305f3
commit 1407516b34
6 files changed
+34 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/VirtualizedAlbumList.svelte
+6 -7
View File
@@ -63,8 +63,8 @@
// Constants
const HEADER_HEIGHT = 44; // px
const LIST_ROW_HEIGHT = 76; // px (52px art + padding + gap)
const GRID_ROW_HEIGHT = 270; // px (card height + info + row gap)
const GRID_MIN_CARD_WIDTH = 180; // px
const GRID_ROW_HEIGHT = 290; // px (180px artwork + 8px margin + ~64px info + 24px gap + buffer)
const GRID_MIN_CARD_WIDTH = 180; // px - matches AlbumCard size="large"
const GRID_GAP = 14; // px (horizontal gap between cards)
const BUFFER_ITEMS = 5; // Extra items to render above/below viewport
@@ -312,6 +312,7 @@
title={album.title}
artist={album.artist}
quality={getQualityBadge(album)}
size="large"
showFavorite={true}
favoriteEnabled={false}
onPlay={() => onAlbumPlay(album)}
@@ -464,14 +465,12 @@
/* Album Grid Row (Grid Mode) */
.album-grid-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0 14px; /* row-gap column-gap - row gap handled by GRID_ROW_HEIGHT */
display: flex;
gap: 14px;
padding: 0;
}
.album-grid-row :global(.album-card) {
width: 100%;
/* No max-width - let cards fill their grid cells to eliminate right gap */
flex-shrink: 0;
}
</style>
src/lib/components/views/AlbumDetailView.svelte
+1
View File
@@ -470,6 +470,7 @@
artwork={relatedAlbum.artwork}
title={relatedAlbum.title}
artist={album.artist}
size="large"
quality={relatedAlbum.quality}
onclick={() => onRelatedAlbumClick?.(relatedAlbum.id)}
onPlay={onRelatedAlbumPlay ? () => onRelatedAlbumPlay(relatedAlbum.id) : undefined}
src/lib/components/views/ArtistDetailView.svelte
+9 -3
View File
@@ -1273,6 +1273,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1333,6 +1334,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1392,6 +1394,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1451,6 +1454,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1510,6 +1514,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1632,6 +1637,7 @@
artwork={album.artwork}
title={album.title}
artist={album.year || ''}
size="large"
quality={album.quality}
searchId={`album-${album.id}`}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -2351,9 +2357,9 @@
}
.albums-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 24px;
display: flex;
flex-wrap: wrap;
gap: 24px 14px;
}
.playlists-grid {
src/lib/components/views/FavoritesView.svelte
+5 -3
View File
@@ -1295,6 +1295,7 @@
artwork={album.image?.large || album.image?.thumbnail || ''}
title={album.title}
artist={album.artist.name}
size="large"
quality={getQualityLabel(album)}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -1366,6 +1367,7 @@
artwork={album.image?.large || album.image?.thumbnail || ''}
title={album.title}
artist={album.artist.name}
size="large"
quality={getQualityLabel(album)}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -2032,9 +2034,9 @@
}
.album-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 24px;
display: flex;
flex-wrap: wrap;
gap: 24px 14px;
}
.album-sections {
src/lib/components/views/HomeView.svelte
+7
View File
@@ -644,6 +644,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -673,6 +674,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -702,6 +704,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -731,6 +734,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -760,6 +764,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -789,6 +794,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -889,6 +895,7 @@
artwork={album.artwork}
title={album.title}
artist={album.artist}
size="large"
quality={album.quality}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
src/lib/components/views/SearchView.svelte
+6 -3
View File
@@ -640,6 +640,7 @@
artwork={getAlbumArtwork(allResults.albums.items[0])}
title={allResults.albums.items[0].title}
artist={allResults.albums.items[0].artist?.name || 'Unknown Artist'}
size="large"
quality={getQualityLabel(allResults.albums.items[0])}
onPlay={onAlbumPlay ? () => onAlbumPlay(allResults.albums.items[0].id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(allResults.albums.items[0].id) : undefined}
@@ -775,6 +776,7 @@
artwork={getAlbumArtwork(album)}
title={album.title}
artist={album.artist?.name || 'Unknown Artist'}
size="large"
quality={getQualityLabel(album)}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -913,6 +915,7 @@
artwork={getAlbumArtwork(album)}
title={album.title}
artist={album.artist?.name || 'Unknown Artist'}
size="large"
quality={getQualityLabel(album)}
onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -1249,9 +1252,9 @@
}
.albums-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 24px;
display: flex;
flex-wrap: wrap;
gap: 24px 14px;
}
.tracks-list {