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

style(qbz-slint): album + playlist cards to 200px, fonts -2/-1

Browse Source 
AlbumCard and PlaylistCard are now 200x246 (was 220x266), with the larger
texts -2px and the smaller ones -1px. All album/playlist carousels and grids
follow (card-width/height 200/246) so nothing reflows: Carousel,
PlaylistCarousel, AlbumCollectionView/AlbumGrid, ReleaseGrid, Spotlight,
HomeSkeleton, DiscoverBrowseView, SearchResultsView, FavoritesView. Artist /
radio cards are untouched.

cc
This commit is contained in:
vicrodh committed 2026-06-04 12:32:47 -06:00
1 parent 14e3e3689c
commit cdb5aa0072
11 files changed
+41 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

crates/qbz-slint/ui/artist/ReleaseGrid.slint
+2 -2
View File
@@ -17,8 +17,8 @@ export component ReleaseGrid inherits VerticalLayout {
callback album-clicked(string); callback album-clicked(string);
callback media-action(string, string, string); callback media-action(string, string, string);
property <length> card-width: 220px; property <length> card-width: 200px;
property <length> card-height: 266px; property <length> card-height: 246px;
property <length> gap: 24px; property <length> gap: 24px;
property <int> count: root.section.albums.length; property <int> count: root.section.albums.length;
crates/qbz-slint/ui/discover/AlbumCard.slint
+13 -13
View File
@@ -1,6 +1,6 @@
// Album card for the Discover sections. // Album card for the Discover sections.
// //
// Mirrors the Svelte AlbumCardLite: 220px column, 220px square artwork // Mirrors the Svelte AlbumCardLite, scaled to a 200px column / 200px artwork
// with a bottom-left award ribbon and a hover overlay (dark scrim, // with a bottom-left award ribbon and a hover overlay (dark scrim,
// genre/year meta, and play / favorite / more action buttons), then a // genre/year meta, and play / favorite / more action buttons), then a
// tight title / artist stack alongside an icon-only quality badge. // tight title / artist stack alongside an icon-only quality badge.
@@ -84,9 +84,9 @@ export component AlbumCard inherits Rectangle {
// kind ("album") , album id, action ("play" | "queue" | "favorite"). // kind ("album") , album id, action ("play" | "queue" | "favorite").
callback media-action(string, string, string); callback media-action(string, string, string);
// Fully deterministic height: artwork 220 + 6 spacer + 40 meta. // Fully deterministic height: artwork 200 + 6 spacer + 40 meta.
width: 220px; width: 200px;
height: 266px; height: 246px;
// The overlay stays up while the pointer is anywhere over the artwork // The overlay stays up while the pointer is anywhere over the artwork
// OR over one of its buttons. A child button steals `has-hover` from // OR over one of its buttons. A child button steals `has-hover` from
@@ -100,8 +100,8 @@ export component AlbumCard inherits Rectangle {
// --- Artwork + hover overlay ------------------------------------- // --- Artwork + hover overlay -------------------------------------
Rectangle { Rectangle {
width: 220px; width: 200px;
height: 220px; height: 200px;
border-radius: Radius.sm; border-radius: Radius.sm;
background: Theme.surface-elevated; background: Theme.surface-elevated;
clip: true; clip: true;
@@ -137,7 +137,7 @@ export component AlbumCard inherits Rectangle {
text: root.album.genre; text: root.album.genre;
height: 20px; height: 20px;
color: #ffffffeb; color: #ffffffeb;
font-size: 15px; font-size: 13px;
font-weight: Typography.bold; font-weight: Typography.bold;
vertical-alignment: center; vertical-alignment: center;
} }
@@ -145,7 +145,7 @@ export component AlbumCard inherits Rectangle {
text: root.album.year; text: root.album.year;
height: 17px; height: 17px;
color: #ffffffcc; color: #ffffffcc;
font-size: 13px; font-size: 12px;
vertical-alignment: center; vertical-alignment: center;
} }
} }
@@ -164,8 +164,8 @@ export component AlbumCard inherits Rectangle {
// Hover action buttons — favorite / play / more. // Hover action buttons — favorite / play / more.
HorizontalLayout { HorizontalLayout {
x: 0px; x: 0px;
y: 132px; y: 120px;
width: 220px; width: 200px;
height: 44px; height: 44px;
alignment: center; alignment: center;
spacing: 12px; spacing: 12px;
@@ -237,7 +237,7 @@ export component AlbumCard inherits Rectangle {
color: root.album.ribbon-kind == "press" color: root.album.ribbon-kind == "press"
? #1f1407 ? #1f1407
: #ffffff; : #ffffff;
font-size: 10px; font-size: 9px;
font-weight: Typography.semibold; font-weight: Typography.semibold;
vertical-alignment: center; vertical-alignment: center;
overflow: elide; overflow: elide;
@@ -334,7 +334,7 @@ export component AlbumCard inherits Rectangle {
text: root.album.title; text: root.album.title;
height: 20px; height: 20px;
color: Theme.text-primary; color: Theme.text-primary;
font-size: Typography.body; font-size: Typography.body - 2px;
font-weight: Typography.medium; font-weight: Typography.medium;
vertical-alignment: center; vertical-alignment: center;
overflow: elide; overflow: elide;
@@ -360,7 +360,7 @@ export component AlbumCard inherits Rectangle {
color: root.album.artist-id != "" && artist-area.has-hover color: root.album.artist-id != "" && artist-area.has-hover
? Theme.text-primary ? Theme.text-primary
: Theme.text-muted; : Theme.text-muted;
font-size: Typography.link; font-size: Typography.link - 1px;
vertical-alignment: center; vertical-alignment: center;
overflow: elide; overflow: elide;
} }
crates/qbz-slint/ui/discover/AlbumCollectionView.slint
+4 -4
View File
@@ -15,8 +15,8 @@ import { AlbumListRow, AlbumListHeader } from "../primitives/AlbumListRow.slint"
// the flat grid and each group-by section. // the flat grid and each group-by section.
component AlbumGrid inherits Rectangle { component AlbumGrid inherits Rectangle {
in property <[AlbumCardItem]> albums; in property <[AlbumCardItem]> albums;
in property <length> card-width: 220px; in property <length> card-width: 200px;
in property <length> card-height: 266px; in property <length> card-height: 246px;
in property <length> card-gap: 24px; in property <length> card-gap: 24px;
in property <bool> show-favorite: true; in property <bool> show-favorite: true;
in property <bool> show-source-badge: false; in property <bool> show-source-badge: false;
@@ -65,8 +65,8 @@ export component AlbumCollectionView inherits VerticalLayout {
// Forwarded to AlbumCard — show the always-visible source badge on the // Forwarded to AlbumCard — show the always-visible source badge on the
// grid card art (Local Library: local | qobuz-offline | plex). // grid card art (Local Library: local | qobuz-offline | plex).
in property <bool> show-source-badge: false; in property <bool> show-source-badge: false;
in property <length> card-width: 220px; in property <length> card-width: 200px;
in property <length> card-height: 266px; in property <length> card-height: 246px;
in property <length> card-gap: 24px; in property <length> card-gap: 24px;
in property <length> list-row-gap: 4px; in property <length> list-row-gap: 4px;
callback open-album(string); callback open-album(string);
crates/qbz-slint/ui/discover/Carousel.slint
+2 -2
View File
@@ -73,8 +73,8 @@ export component Carousel inherits VerticalLayout {
callback media-action(string, string, string); callback media-action(string, string, string);
callback view-all-clicked(); callback view-all-clicked();
property <length> card-width: 220px; property <length> card-width: 200px;
property <length> card-height: 266px; property <length> card-height: 246px;
property <length> gap: 32px; property <length> gap: 32px;
property <int> count: root.section.albums.length; property <int> count: root.section.albums.length;
crates/qbz-slint/ui/discover/DiscoverBrowseView.slint
+1 -1
View File
@@ -149,7 +149,7 @@ export component DiscoverBrowseView inherits Rectangle {
callback open-artist(string); callback open-artist(string);
callback media-action(string, string, string); callback media-action(string, string, string);
property <length> album-w: 220px; property <length> album-w: 200px;
property <length> album-h: 266px; property <length> album-h: 266px;
property <length> gap: 24px; property <length> gap: 24px;
property <length> list-row-h: 64px; property <length> list-row-h: 64px;
crates/qbz-slint/ui/discover/HomeSkeleton.slint
+1 -1
View File
@@ -21,7 +21,7 @@ component Shimmer inherits Rectangle {
// blocks (square art + two text lines). // blocks (square art + two text lines).
component SkeletonRow inherits VerticalLayout { component SkeletonRow inherits VerticalLayout {
in property <bool> phase; in property <bool> phase;
in property <length> card-size: 220px; in property <length> card-size: 200px;
spacing: 12px; spacing: 12px;
Shimmer { Shimmer {
crates/qbz-slint/ui/discover/PlaylistCard.slint
+9 -9
View File
@@ -56,8 +56,8 @@ export component PlaylistCard inherits Rectangle {
// button=play. Discover/Search leave it false (body=play), unchanged. // button=play. Discover/Search leave it false (body=play), unchanged.
in property <bool> body-opens: false; in property <bool> body-opens: false;
width: 220px; width: 200px;
height: 266px; height: 246px;
property <bool> overlay-on: hover.has-hover property <bool> overlay-on: hover.has-hover
|| fav-btn.hovered || play-btn.hovered || more-btn.hovered; || fav-btn.hovered || play-btn.hovered || more-btn.hovered;
@@ -68,14 +68,14 @@ export component PlaylistCard inherits Rectangle {
// --- Cover collage + hover overlay ------------------------------- // --- Cover collage + hover overlay -------------------------------
Rectangle { Rectangle {
width: 220px; width: 200px;
height: 220px; height: 200px;
border-radius: Radius.sm; border-radius: Radius.sm;
clip: true; clip: true;
PlaylistCollage { PlaylistCollage {
playlist: root.playlist; playlist: root.playlist;
size: 220px; size: 200px;
} }
Rectangle { Rectangle {
@@ -97,8 +97,8 @@ export component PlaylistCard inherits Rectangle {
HorizontalLayout { HorizontalLayout {
x: 0px; x: 0px;
y: 132px; y: 120px;
width: 220px; width: 200px;
height: 44px; height: 44px;
alignment: center; alignment: center;
spacing: 12px; spacing: 12px;
@@ -183,7 +183,7 @@ export component PlaylistCard inherits Rectangle {
text: root.playlist.title; text: root.playlist.title;
height: 20px; height: 20px;
color: Theme.text-primary; color: Theme.text-primary;
font-size: Typography.body; font-size: Typography.body - 2px;
font-weight: Typography.semibold; font-weight: Typography.semibold;
vertical-alignment: center; vertical-alignment: center;
overflow: elide; overflow: elide;
@@ -192,7 +192,7 @@ export component PlaylistCard inherits Rectangle {
text: root.playlist.subtitle; text: root.playlist.subtitle;
height: 16px; height: 16px;
color: Theme.text-muted; color: Theme.text-muted;
font-size: Typography.link; font-size: Typography.link - 1px;
vertical-alignment: center; vertical-alignment: center;
overflow: elide; overflow: elide;
} }
crates/qbz-slint/ui/discover/PlaylistCarousel.slint
+2 -2
View File
@@ -68,8 +68,8 @@ export component PlaylistCarousel inherits VerticalLayout {
callback view-all-clicked(); callback view-all-clicked();
callback media-action(string, string, string); callback media-action(string, string, string);
property <length> card-width: 220px; property <length> card-width: 200px;
property <length> card-height: 266px; property <length> card-height: 246px;
property <length> gap: 32px; property <length> gap: 32px;
property <int> count: root.playlists.length; property <int> count: root.playlists.length;
crates/qbz-slint/ui/discover/Spotlight.slint
+1 -1
View File
@@ -52,7 +52,7 @@ export component Spotlight inherits VerticalLayout {
property <int> album-count: ForYouState.spotlight-albums.length; property <int> album-count: ForYouState.spotlight-albums.length;
property <length> content-width: property <length> content-width:
root.radio-cards-width root.radio-cards-width
+ root.album-count * (220px + root.gap); + root.album-count * (200px + root.gap);
spacing: 12px; spacing: 12px;
crates/qbz-slint/ui/favorites/FavoritesView.slint
+2 -2
View File
@@ -1195,8 +1195,8 @@ export component FavoritesView inherits Rectangle {
font-size: Typography.body; font-size: Typography.body;
} }
if FavoritesState.playlists-view-mode != "list": playlists-grid := Rectangle { if FavoritesState.playlists-view-mode != "list": playlists-grid := Rectangle {
property <length> pl-w: 220px; property <length> pl-w: 200px;
property <length> pl-h: 266px; property <length> pl-h: 246px;
property <int> columns: Math.max( property <int> columns: Math.max(
1, 1,
Math.floor((self.width + root.gap) / (self.pl-w + root.gap))); Math.floor((self.width + root.gap) / (self.pl-w + root.gap)));
crates/qbz-slint/ui/search/SearchResultsView.slint
+4 -4
View File
@@ -183,8 +183,8 @@ component AlbumGrid inherits Rectangle {
callback open(string); callback open(string);
callback media-action(string, string, string); callback media-action(string, string, string);
property <length> card-w: 220px; property <length> card-w: 200px;
property <length> card-h: 266px; property <length> card-h: 246px;
property <length> gap: 24px; property <length> gap: 24px;
property <int> columns: property <int> columns:
Math.max(1, Math.floor((self.width + root.gap) / (root.card-w + root.gap))); Math.max(1, Math.floor((self.width + root.gap) / (root.card-w + root.gap)));
@@ -242,8 +242,8 @@ component PlaylistGrid inherits Rectangle {
in property <[SearchPlaylistItem]> playlists; in property <[SearchPlaylistItem]> playlists;
callback media-action(string, string, string); callback media-action(string, string, string);
property <length> card-w: 220px; property <length> card-w: 200px;
property <length> card-h: 266px; property <length> card-h: 246px;
property <length> gap: 24px; property <length> gap: 24px;
property <int> columns: property <int> columns:
Math.max(1, Math.floor((self.width + root.gap) / (root.card-w + root.gap))); Math.max(1, Math.floor((self.width + root.gap) / (root.card-w + root.gap)));