vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +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%;
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 getSpan = (cq: ReturnType<typeof useContainerQuery>) => {
if (cq.is4xl) return 6;
if (cq.is3xl) return 7;
if (cq.is2xl) return 8;
if (cq.isXl) return 9;
if (cq.isLg) return 12;
if (cq.isMd) return 12;
if (cq.isSm) return 16;
if (cq.isXs) return 24;
return 24;
const getItemsPerRow = (cq: ReturnType<typeof useContainerQuery>) => {
// Match grid carousel breakpoints: is3xl: 8, is2xl: 7, isXl: 6, isLg: 5, isMd: 4, isSm: 3, default: 2
if (cq.is3xl) return 8;
if (cq.is2xl) return 7;
if (cq.isXl) return 6;
if (cq.isLg) return 5;
if (cq.isMd) return 4;
if (cq.isSm) return 3;
if (cq.isXs) return 2;
return 2;
};
const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumSectionProps) => {
const { t } = useTranslation();
const span = getSpan(cq);
const itemsPerRow = getItemsPerRow(cq);
const albumCount = albums.length;
const [showAll, setShowAll] = useState(false);
const player = usePlayer();
@@ -809,31 +809,38 @@ const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumS
)}
</div>
</div>
<Grid columns={48} gutter="md" type="container">
<div
className={styles.albumGrid}
style={
{
'--items-per-row': itemsPerRow,
} as React.CSSProperties
}
>
{displayedAlbums.map((album) => (
<Grid.Col key={album.id} span={span}>
<motion.div
layout
layoutId={`${releaseType}-${album.id}`}
transition={{
duration: 0.5,
ease: 'easeInOut',
layout: { duration: 0.5, ease: 'easeInOut' },
}}
>
<MemoizedItemCard
controls={controls}
data={album}
enableDrag
itemType={LibraryItem.ALBUM}
rows={rows}
type="poster"
withControls
/>
</motion.div>
</Grid.Col>
<motion.div
className={styles.albumGridItem}
key={album.id}
layout
layoutId={`${releaseType}-${album.id}`}
transition={{
duration: 0.5,
ease: 'easeInOut',
layout: { duration: 0.5, ease: 'easeInOut' },
}}
>
<MemoizedItemCard
controls={controls}
data={album}
enableDrag
itemType={LibraryItem.ALBUM}
rows={rows}
type="poster"
withControls
/>
</motion.div>
))}
</Grid>
</div>
{hasMoreAlbums && !showAll && (
<Group justify="center" w="100%">
<Button onClick={() => setShowAll(true)} variant="subtle">
@@ -1151,7 +1158,15 @@ const ArtistAlbums = () => {
.sort((a, b) => getPriority(a.releaseType) - getPriority(b.releaseType));
}, [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 searchInputRef = useRef<HTMLInputElement>(null);