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

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 || ''}
{...background}
>
<Stack gap="lg">
<Pill.Group>
{metadataItems.map(
(item, index) =>
item.value && (
<Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
),
)}
</Pill.Group>
{showRating && (
<Rating
onChange={handleUpdateRating}
readOnly={detailQuery?.isFetching}
value={detailQuery?.data?.userRating || 0}
/>
<Pill.Group>
{metadataItems.map(
(item, index) =>
item.value && (
<Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
),
)}
<Group
gap="md"
mah="4rem"
style={{
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
}}
>
{detailQuery?.data?.albumArtists.map((artist) => (
<Text
component={Link}
fw={600}
isLink
key={`artist-${artist.id}`}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
variant="subtle"
>
{artist.name}
</Text>
))}
</Group>
</Stack>
</Pill.Group>
{showRating && (
<Rating
onChange={handleUpdateRating}
readOnly={detailQuery?.isFetching}
value={detailQuery?.data?.userRating || 0}
/>
)}
<Group
gap="md"
mah="4rem"
style={{
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
}}
>
{detailQuery?.data?.albumArtists.map((artist) => (
<Text
component={Link}
fw={600}
isLink
key={`artist-${artist.id}`}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
variant="subtle"
>
{artist.name}
</Text>
))}
</Group>
</LibraryHeader>
</Stack>
);
src/renderer/features/shared/components/library-header.module.css
+48 -56
View File
@@ -1,17 +1,17 @@
.library-header {
position: relative;
display: grid;
grid-template-areas: 'image info';
grid-template-rows: 100%;
grid-template-columns: 175px minmax(0, 1fr);
grid-template-areas: 'image' 'info';
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
gap: 1rem;
align-items: flex-end;
align-items: center;
justify-items: center;
width: 100%;
max-width: 100%;
height: 30vh;
height: auto;
min-height: 340px;
max-height: 500px;
padding: 5rem 2rem 2rem;
padding: 2rem 1rem;
:global(.item-image-placeholder) {
width: 175px !important;
@@ -19,52 +19,22 @@
}
.image {
width: 175px !important;
height: 175px;
width: 250px !important;
height: 250px;
}
}
@container (max-width: 599px) {
grid-template-columns: 175px minmax(0, 1fr);
h1 {
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) {
@container (min-width: 768px) {
.library-header {
grid-template-areas: 'image info';
grid-template-rows: 100%;
grid-template-columns: 225px minmax(0, 1fr);
h1 {
height: 100px;
}
align-items: flex-end;
justify-items: start;
height: 30vh;
min-height: 340px;
max-height: 500px;
padding: 5rem 2rem 2rem;
.image {
width: 225px !important;
@@ -76,12 +46,13 @@
height: 225px;
}
}
}
@container (min-width: 1200px) {
@container (min-width: 1200px) {
.library-header {
grid-template-columns: 250px minmax(0, 1fr);
.image,
.image-section {
.image {
width: 250px !important;
height: 250px;
}
@@ -97,9 +68,8 @@
z-index: 15;
display: flex;
grid-area: image;
align-items: flex-end;
align-items: center;
justify-content: center;
max-height: 100%;
filter: drop-shadow(0 0 8px rgb(0 0 0 / 50%));
}
@@ -108,8 +78,30 @@
display: flex;
flex-direction: column;
grid-area: info;
justify-content: flex-end;
gap: var(--theme-spacing-md);
align-items: center;
justify-content: center;
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 {
src/renderer/features/shared/components/library-header.tsx
+1 -1
View File
@@ -127,7 +127,7 @@ export const LibraryHeader = forwardRef(
{itemTypeString()}
</Text>
<h1 className={styles.title}>
<AutoTextSize maxFontSizePx={80} mode="box">
<AutoTextSize maxFontSizePx={80} minFontSizePx={36} mode="box">
{title}
</AutoTextSize>
</h1>