vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve responsive styling on library header

Browse Source
This commit is contained in:
jeffvli
2025-11-19 00:07:04 -08:00
parent 62ace421e6
commit cf50132870
3 changed files with 87 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-detail-header.tsx
+38 -40
View File
@@ -125,47 +125,45 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
title={detailQuery?.data?.name || ''} title={detailQuery?.data?.name || ''}
{...background} {...background}
> >
<Stack gap="lg"> <Pill.Group>
<Pill.Group> {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}`}>{item.value}</Pill> ),
),
)}
</Pill.Group>
{showRating && (
<Rating
onChange={handleUpdateRating}
readOnly={detailQuery?.isFetching}
value={detailQuery?.data?.userRating || 0}
/>
)} )}
<Group </Pill.Group>
gap="md" {showRating && (
mah="4rem" <Rating
style={{ onChange={handleUpdateRating}
overflow: 'hidden', readOnly={detailQuery?.isFetching}
WebkitBoxOrient: 'vertical', value={detailQuery?.data?.userRating || 0}
WebkitLineClamp: 2, />
}} )}
> <Group
{detailQuery?.data?.albumArtists.map((artist) => ( gap="md"
<Text mah="4rem"
component={Link} style={{
fw={600} overflow: 'hidden',
isLink WebkitBoxOrient: 'vertical',
key={`artist-${artist.id}`} WebkitLineClamp: 2,
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { }}
albumArtistId: artist.id, >
})} {detailQuery?.data?.albumArtists.map((artist) => (
variant="subtle" <Text
> component={Link}
{artist.name} fw={600}
</Text> isLink
))} key={`artist-${artist.id}`}
</Group> to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
</Stack> albumArtistId: artist.id,
})}
variant="subtle"
>
{artist.name}
</Text>
))}
</Group>
</LibraryHeader> </LibraryHeader>
</Stack> </Stack>
); );
src/renderer/features/shared/components/library-header.module.css
+48 -56
View File
@@ -1,17 +1,17 @@
.library-header { .library-header {
position: relative; position: relative;
display: grid; display: grid;
grid-template-areas: 'image info'; grid-template-areas: 'image' 'info';
grid-template-rows: 100%; grid-template-rows: auto 1fr;
grid-template-columns: 175px minmax(0, 1fr); grid-template-columns: 1fr;
gap: 1rem; gap: 1rem;
align-items: flex-end; align-items: center;
justify-items: center;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 30vh; height: auto;
min-height: 340px; min-height: 340px;
max-height: 500px; padding: 2rem 1rem;
padding: 5rem 2rem 2rem;
:global(.item-image-placeholder) { :global(.item-image-placeholder) {
width: 175px !important; width: 175px !important;
@@ -19,52 +19,22 @@
} }
.image { .image {
width: 175px !important; width: 250px !important;
height: 175px; height: 250px;
} }
}
@container (max-width: 599px) { @container (min-width: 768px) {
grid-template-columns: 175px minmax(0, 1fr); .library-header {
grid-template-areas: 'image info';
h1 { grid-template-rows: 100%;
height: 40px;
}
.image {
width: 175px !important;
height: 175px;
}
:global(.item-image-placeholder) {
width: 175px !important;
height: 175px;
}
}
@container (min-width: 600px) {
grid-template-columns: 200px minmax(0, 1fr);
h1 {
height: 80px;
}
.image {
width: 200px !important;
height: 200px;
}
:global(.item-image-placeholder) {
width: 200px !important;
height: 200px;
}
}
@container (min-width: 768px) {
grid-template-columns: 225px minmax(0, 1fr); grid-template-columns: 225px minmax(0, 1fr);
align-items: flex-end;
h1 { justify-items: start;
height: 100px; height: 30vh;
} min-height: 340px;
max-height: 500px;
padding: 5rem 2rem 2rem;
.image { .image {
width: 225px !important; width: 225px !important;
@@ -76,12 +46,13 @@
height: 225px; height: 225px;
} }
} }
}
@container (min-width: 1200px) { @container (min-width: 1200px) {
.library-header {
grid-template-columns: 250px minmax(0, 1fr); grid-template-columns: 250px minmax(0, 1fr);
.image, .image {
.image-section {
width: 250px !important; width: 250px !important;
height: 250px; height: 250px;
} }
@@ -97,9 +68,8 @@
z-index: 15; z-index: 15;
display: flex; display: flex;
grid-area: image; grid-area: image;
align-items: flex-end; align-items: center;
justify-content: center; justify-content: center;
max-height: 100%;
filter: drop-shadow(0 0 8px rgb(0 0 0 / 50%)); filter: drop-shadow(0 0 8px rgb(0 0 0 / 50%));
} }
@@ -108,8 +78,30 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-area: info; grid-area: info;
justify-content: flex-end; gap: var(--theme-spacing-md);
align-items: center;
justify-content: center;
width: 100%; width: 100%;
text-align: center;
& > div {
align-items: center;
justify-content: center;
text-align: center;
}
}
@container (min-width: 768px) {
.image-section {
align-items: flex-end;
}
.metadata-section,
.metadata-section > div {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
}
} }
.image { .image {
src/renderer/features/shared/components/library-header.tsx
+1 -1
View File
@@ -127,7 +127,7 @@ export const LibraryHeader = forwardRef(
{itemTypeString()} {itemTypeString()}
</Text> </Text>
<h1 className={styles.title}> <h1 className={styles.title}>
<AutoTextSize maxFontSizePx={80} mode="box"> <AutoTextSize maxFontSizePx={80} minFontSizePx={36} mode="box">
{title} {title}
</AutoTextSize> </AutoTextSize>
</h1> </h1>