vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

adjust genre display and gap in header

Browse Source
This commit is contained in:
jeffvli
2025-11-19 02:52:35 -08:00
parent 980094c965
commit 059f143dbf
2 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-detail-header.tsx
+12 -13
View File
@@ -12,9 +12,8 @@ import { useCurrentServer } from '/@/renderer/store';
import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils'; import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils';
import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types'; import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button';
import { Group } from '/@/shared/components/group/group'; import { Group } from '/@/shared/components/group/group';
import { Pill } from '/@/shared/components/pill/pill'; import { Pill, PillLink } from '/@/shared/components/pill/pill';
import { Rating } from '/@/shared/components/rating/rating'; import { Rating } from '/@/shared/components/rating/rating';
import { Stack } from '/@/shared/components/stack/stack'; import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text'; import { Text } from '/@/shared/components/text/text';
@@ -147,34 +146,33 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
{metadataItems.map( {metadataItems.map(
(item, index) => (item, index) =>
item.value && ( item.value && (
<Pill key={`item-${item.id}-${index}`}>{item.value}</Pill> <Pill key={`item-${item.id}-${index}`} size="md">
{item.value}
</Pill>
), ),
)} )}
</Pill.Group> </Pill.Group>
{showGenres && ( {showGenres && (
<Group gap="sm"> <Pill.Group>
{detailQuery?.data?.genres?.map((genre) => ( {detailQuery?.data?.genres?.map((genre) => (
<Button <PillLink
component={Link}
key={`genre-${genre.id}`} key={`genre-${genre.id}`}
radius="md" size="md"
size="compact-md"
to={generatePath(genreRoute, { to={generatePath(genreRoute, {
genreId: genre.id, genreId: genre.id,
})} })}
variant="outline"
> >
{genre.name} {genre.name}
</Button> </PillLink>
))} ))}
</Group> </Pill.Group>
)} )}
<Group align="center" gap="sm"> <Group align="center" gap="xs">
<ActionIcon <ActionIcon
icon="favorite" icon="favorite"
iconProps={{ iconProps={{
fill: detailQuery?.data?.userFavorite ? 'primary' : undefined, fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
size: 'lg', size: 'md',
}} }}
onClick={handleFavorite} onClick={handleFavorite}
size="xs" size="xs"
@@ -184,6 +182,7 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
<Rating <Rating
onChange={handleUpdateRating} onChange={handleUpdateRating}
readOnly={detailQuery?.isFetching} readOnly={detailQuery?.isFetching}
size="md"
styles={{ styles={{
input: { input: {
background: 'transparent', background: 'transparent',
src/renderer/features/shared/components/library-header.module.css
+2 -2
View File
@@ -4,7 +4,7 @@
grid-template-areas: 'image' 'info'; grid-template-areas: 'image' 'info';
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 1rem; gap: var(--theme-spacing-md);
align-items: center; align-items: center;
justify-items: center; justify-items: center;
width: 100%; width: 100%;
@@ -78,7 +78,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-area: info; grid-area: info;
gap: var(--theme-spacing-md); gap: var(--theme-spacing-sm);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;