vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-15 16:04:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor artist album grid to use flex layout

Browse Source
This commit is contained in:
jeffvli
2025-12-28 00:28:45 -08:00
parent 63015195b0
commit 396325f397
2 changed files with 66 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/artists/components/album-artist-detail-content.module.css
+16
View File
@@ -48,3 +48,19 @@
width: 100%; width: 100%;
min-width: 0; min-width: 0;
} }
.album-grid {
display: flex;
flex-wrap: wrap;
gap: var(--theme-spacing-md);
width: 100%;
}
.album-grid-item {
flex: 1 1
calc((100% - (var(--items-per-row) - 1) * var(--theme-spacing-md)) / var(--items-per-row));
min-width: 0;
max-width: calc(
(100% - (var(--items-per-row) - 1) * var(--theme-spacing-md)) / var(--items-per-row)
);
}
src/renderer/features/artists/components/album-artist-detail-content.tsx
+50 -35
View File
@@ -696,22 +696,22 @@ interface AlbumSectionProps {
const MAX_SECTION_CARDS = 20; const MAX_SECTION_CARDS = 20;
const getSpan = (cq: ReturnType<typeof useContainerQuery>) => { const getItemsPerRow = (cq: ReturnType<typeof useContainerQuery>) => {
if (cq.is4xl) return 6; // Match grid carousel breakpoints: is3xl: 8, is2xl: 7, isXl: 6, isLg: 5, isMd: 4, isSm: 3, default: 2
if (cq.is3xl) return 7; if (cq.is3xl) return 8;
if (cq.is2xl) return 8; if (cq.is2xl) return 7;
if (cq.isXl) return 9; if (cq.isXl) return 6;
if (cq.isLg) return 12; if (cq.isLg) return 5;
if (cq.isMd) return 12; if (cq.isMd) return 4;
if (cq.isSm) return 16; if (cq.isSm) return 3;
if (cq.isXs) return 24; if (cq.isXs) return 2;
return 24; return 2;
}; };
const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumSectionProps) => { const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumSectionProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const span = getSpan(cq); const itemsPerRow = getItemsPerRow(cq);
const albumCount = albums.length; const albumCount = albums.length;
const [showAll, setShowAll] = useState(false); const [showAll, setShowAll] = useState(false);
const player = usePlayer(); const player = usePlayer();
@@ -809,31 +809,38 @@ const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumS
)} )}
</div> </div>
</div> </div>
<Grid columns={48} gutter="md" type="container"> <div
className={styles.albumGrid}
style={
{
'--items-per-row': itemsPerRow,
} as React.CSSProperties
}
>
{displayedAlbums.map((album) => ( {displayedAlbums.map((album) => (
<Grid.Col key={album.id} span={span}> <motion.div
<motion.div className={styles.albumGridItem}
layout key={album.id}
layoutId={`${releaseType}-${album.id}`} layout
transition={{ layoutId={`${releaseType}-${album.id}`}
duration: 0.5, transition={{
ease: 'easeInOut', duration: 0.5,
layout: { duration: 0.5, ease: 'easeInOut' }, ease: 'easeInOut',
}} layout: { duration: 0.5, ease: 'easeInOut' },
> }}
<MemoizedItemCard >
controls={controls} <MemoizedItemCard
data={album} controls={controls}
enableDrag data={album}
itemType={LibraryItem.ALBUM} enableDrag
rows={rows} itemType={LibraryItem.ALBUM}
type="poster" rows={rows}
withControls type="poster"
/> withControls
</motion.div> />
</Grid.Col> </motion.div>
))} ))}
</Grid> </div>
{hasMoreAlbums && !showAll && ( {hasMoreAlbums && !showAll && (
<Group justify="center" w="100%"> <Group justify="center" w="100%">
<Button onClick={() => setShowAll(true)} variant="subtle"> <Button onClick={() => setShowAll(true)} variant="subtle">
@@ -1151,7 +1158,15 @@ const ArtistAlbums = () => {
.sort((a, b) => getPriority(a.releaseType) - getPriority(b.releaseType)); .sort((a, b) => getPriority(a.releaseType) - getPriority(b.releaseType));
}, [albumsByReleaseType, t]); }, [albumsByReleaseType, t]);
const cq = useContainerQuery(); const cq = useContainerQuery({
'2xl': 1280,
'3xl': 1440,
lg: 960,
md: 720,
sm: 520,
xl: 1152,
xs: 360,
});
const binding = useSettingsStore((state) => state.hotkeys.bindings.localSearch); const binding = useSettingsStore((state) => state.hotkeys.bindings.localSearch);
const searchInputRef = useRef<HTMLInputElement>(null); const searchInputRef = useRef<HTMLInputElement>(null);