diff --git a/crates/qbz-slint/ui/artist/ReleaseGrid.slint b/crates/qbz-slint/ui/artist/ReleaseGrid.slint index c8763c95a..fcc0a0388 100644 --- a/crates/qbz-slint/ui/artist/ReleaseGrid.slint +++ b/crates/qbz-slint/ui/artist/ReleaseGrid.slint @@ -17,8 +17,8 @@ export component ReleaseGrid inherits VerticalLayout { callback album-clicked(string); callback media-action(string, string, string); - property card-width: 220px; - property card-height: 266px; + property card-width: 200px; + property card-height: 246px; property gap: 24px; property count: root.section.albums.length; diff --git a/crates/qbz-slint/ui/discover/AlbumCard.slint b/crates/qbz-slint/ui/discover/AlbumCard.slint index 64142bb4e..abc4a4ca1 100644 --- a/crates/qbz-slint/ui/discover/AlbumCard.slint +++ b/crates/qbz-slint/ui/discover/AlbumCard.slint @@ -1,6 +1,6 @@ // 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, // genre/year meta, and play / favorite / more action buttons), then a // 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"). callback media-action(string, string, string); - // Fully deterministic height: artwork 220 + 6 spacer + 40 meta. - width: 220px; - height: 266px; + // Fully deterministic height: artwork 200 + 6 spacer + 40 meta. + width: 200px; + height: 246px; // 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 @@ -100,8 +100,8 @@ export component AlbumCard inherits Rectangle { // --- Artwork + hover overlay ------------------------------------- Rectangle { - width: 220px; - height: 220px; + width: 200px; + height: 200px; border-radius: Radius.sm; background: Theme.surface-elevated; clip: true; @@ -137,7 +137,7 @@ export component AlbumCard inherits Rectangle { text: root.album.genre; height: 20px; color: #ffffffeb; - font-size: 15px; + font-size: 13px; font-weight: Typography.bold; vertical-alignment: center; } @@ -145,7 +145,7 @@ export component AlbumCard inherits Rectangle { text: root.album.year; height: 17px; color: #ffffffcc; - font-size: 13px; + font-size: 12px; vertical-alignment: center; } } @@ -164,8 +164,8 @@ export component AlbumCard inherits Rectangle { // Hover action buttons — favorite / play / more. HorizontalLayout { x: 0px; - y: 132px; - width: 220px; + y: 120px; + width: 200px; height: 44px; alignment: center; spacing: 12px; @@ -237,7 +237,7 @@ export component AlbumCard inherits Rectangle { color: root.album.ribbon-kind == "press" ? #1f1407 : #ffffff; - font-size: 10px; + font-size: 9px; font-weight: Typography.semibold; vertical-alignment: center; overflow: elide; @@ -334,7 +334,7 @@ export component AlbumCard inherits Rectangle { text: root.album.title; height: 20px; color: Theme.text-primary; - font-size: Typography.body; + font-size: Typography.body - 2px; font-weight: Typography.medium; vertical-alignment: center; overflow: elide; @@ -360,7 +360,7 @@ export component AlbumCard inherits Rectangle { color: root.album.artist-id != "" && artist-area.has-hover ? Theme.text-primary : Theme.text-muted; - font-size: Typography.link; + font-size: Typography.link - 1px; vertical-alignment: center; overflow: elide; } diff --git a/crates/qbz-slint/ui/discover/AlbumCollectionView.slint b/crates/qbz-slint/ui/discover/AlbumCollectionView.slint index de98e3a58..08dc01db0 100644 --- a/crates/qbz-slint/ui/discover/AlbumCollectionView.slint +++ b/crates/qbz-slint/ui/discover/AlbumCollectionView.slint @@ -15,8 +15,8 @@ import { AlbumListRow, AlbumListHeader } from "../primitives/AlbumListRow.slint" // the flat grid and each group-by section. component AlbumGrid inherits Rectangle { in property <[AlbumCardItem]> albums; - in property card-width: 220px; - in property card-height: 266px; + in property card-width: 200px; + in property card-height: 246px; in property card-gap: 24px; in property show-favorite: true; in property show-source-badge: false; @@ -65,8 +65,8 @@ export component AlbumCollectionView inherits VerticalLayout { // Forwarded to AlbumCard — show the always-visible source badge on the // grid card art (Local Library: local | qobuz-offline | plex). in property show-source-badge: false; - in property card-width: 220px; - in property card-height: 266px; + in property card-width: 200px; + in property card-height: 246px; in property card-gap: 24px; in property list-row-gap: 4px; callback open-album(string); diff --git a/crates/qbz-slint/ui/discover/Carousel.slint b/crates/qbz-slint/ui/discover/Carousel.slint index 8d0594743..c42609558 100644 --- a/crates/qbz-slint/ui/discover/Carousel.slint +++ b/crates/qbz-slint/ui/discover/Carousel.slint @@ -73,8 +73,8 @@ export component Carousel inherits VerticalLayout { callback media-action(string, string, string); callback view-all-clicked(); - property card-width: 220px; - property card-height: 266px; + property card-width: 200px; + property card-height: 246px; property gap: 32px; property count: root.section.albums.length; diff --git a/crates/qbz-slint/ui/discover/DiscoverBrowseView.slint b/crates/qbz-slint/ui/discover/DiscoverBrowseView.slint index 293288e3e..0794ad29a 100644 --- a/crates/qbz-slint/ui/discover/DiscoverBrowseView.slint +++ b/crates/qbz-slint/ui/discover/DiscoverBrowseView.slint @@ -149,7 +149,7 @@ export component DiscoverBrowseView inherits Rectangle { callback open-artist(string); callback media-action(string, string, string); - property album-w: 220px; + property album-w: 200px; property album-h: 266px; property gap: 24px; property list-row-h: 64px; diff --git a/crates/qbz-slint/ui/discover/HomeSkeleton.slint b/crates/qbz-slint/ui/discover/HomeSkeleton.slint index 3b7681f83..e61ecbe1d 100644 --- a/crates/qbz-slint/ui/discover/HomeSkeleton.slint +++ b/crates/qbz-slint/ui/discover/HomeSkeleton.slint @@ -21,7 +21,7 @@ component Shimmer inherits Rectangle { // blocks (square art + two text lines). component SkeletonRow inherits VerticalLayout { in property phase; - in property card-size: 220px; + in property card-size: 200px; spacing: 12px; Shimmer { diff --git a/crates/qbz-slint/ui/discover/PlaylistCard.slint b/crates/qbz-slint/ui/discover/PlaylistCard.slint index b0755b8f2..cc429a12a 100644 --- a/crates/qbz-slint/ui/discover/PlaylistCard.slint +++ b/crates/qbz-slint/ui/discover/PlaylistCard.slint @@ -56,8 +56,8 @@ export component PlaylistCard inherits Rectangle { // button=play. Discover/Search leave it false (body=play), unchanged. in property body-opens: false; - width: 220px; - height: 266px; + width: 200px; + height: 246px; property overlay-on: hover.has-hover || fav-btn.hovered || play-btn.hovered || more-btn.hovered; @@ -68,14 +68,14 @@ export component PlaylistCard inherits Rectangle { // --- Cover collage + hover overlay ------------------------------- Rectangle { - width: 220px; - height: 220px; + width: 200px; + height: 200px; border-radius: Radius.sm; clip: true; PlaylistCollage { playlist: root.playlist; - size: 220px; + size: 200px; } Rectangle { @@ -97,8 +97,8 @@ export component PlaylistCard inherits Rectangle { HorizontalLayout { x: 0px; - y: 132px; - width: 220px; + y: 120px; + width: 200px; height: 44px; alignment: center; spacing: 12px; @@ -183,7 +183,7 @@ export component PlaylistCard inherits Rectangle { text: root.playlist.title; height: 20px; color: Theme.text-primary; - font-size: Typography.body; + font-size: Typography.body - 2px; font-weight: Typography.semibold; vertical-alignment: center; overflow: elide; @@ -192,7 +192,7 @@ export component PlaylistCard inherits Rectangle { text: root.playlist.subtitle; height: 16px; color: Theme.text-muted; - font-size: Typography.link; + font-size: Typography.link - 1px; vertical-alignment: center; overflow: elide; } diff --git a/crates/qbz-slint/ui/discover/PlaylistCarousel.slint b/crates/qbz-slint/ui/discover/PlaylistCarousel.slint index 218983100..89d747008 100644 --- a/crates/qbz-slint/ui/discover/PlaylistCarousel.slint +++ b/crates/qbz-slint/ui/discover/PlaylistCarousel.slint @@ -68,8 +68,8 @@ export component PlaylistCarousel inherits VerticalLayout { callback view-all-clicked(); callback media-action(string, string, string); - property card-width: 220px; - property card-height: 266px; + property card-width: 200px; + property card-height: 246px; property gap: 32px; property count: root.playlists.length; diff --git a/crates/qbz-slint/ui/discover/Spotlight.slint b/crates/qbz-slint/ui/discover/Spotlight.slint index 3d6aec517..f885e6992 100644 --- a/crates/qbz-slint/ui/discover/Spotlight.slint +++ b/crates/qbz-slint/ui/discover/Spotlight.slint @@ -52,7 +52,7 @@ export component Spotlight inherits VerticalLayout { property album-count: ForYouState.spotlight-albums.length; property content-width: root.radio-cards-width - + root.album-count * (220px + root.gap); + + root.album-count * (200px + root.gap); spacing: 12px; diff --git a/crates/qbz-slint/ui/favorites/FavoritesView.slint b/crates/qbz-slint/ui/favorites/FavoritesView.slint index 6630e37a3..bce42cc32 100644 --- a/crates/qbz-slint/ui/favorites/FavoritesView.slint +++ b/crates/qbz-slint/ui/favorites/FavoritesView.slint @@ -1195,8 +1195,8 @@ export component FavoritesView inherits Rectangle { font-size: Typography.body; } if FavoritesState.playlists-view-mode != "list": playlists-grid := Rectangle { - property pl-w: 220px; - property pl-h: 266px; + property pl-w: 200px; + property pl-h: 246px; property columns: Math.max( 1, Math.floor((self.width + root.gap) / (self.pl-w + root.gap))); diff --git a/crates/qbz-slint/ui/search/SearchResultsView.slint b/crates/qbz-slint/ui/search/SearchResultsView.slint index 831a45a3b..52e4cf0a7 100644 --- a/crates/qbz-slint/ui/search/SearchResultsView.slint +++ b/crates/qbz-slint/ui/search/SearchResultsView.slint @@ -183,8 +183,8 @@ component AlbumGrid inherits Rectangle { callback open(string); callback media-action(string, string, string); - property card-w: 220px; - property card-h: 266px; + property card-w: 200px; + property card-h: 246px; property gap: 24px; property columns: 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; callback media-action(string, string, string); - property card-w: 220px; - property card-h: 266px; + property card-w: 200px; + property card-h: 246px; property gap: 24px; property columns: Math.max(1, Math.floor((self.width + root.gap) / (root.card-w + root.gap)));