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 favorite / rating display on item card

Browse Source
This commit is contained in:
jeffvli
2025-12-01 20:04:40 -08:00
parent 72e7006cc3
commit 93d4536ba6
3 changed files with 72 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-card/item-card-controls.module.css
+10 -4
View File
@@ -116,16 +116,22 @@
right: 0;
}
.favorite {
svg {
stroke: white;
stroke-width: 1.5px;
}
}
.rating {
position: absolute;
top: 0;
right: 0;
padding: var(--theme-spacing-md);
@mixin light {
svg {
stroke: var(--theme-colors-background);
}
svg {
stroke: white;
stroke-width: 1.5px;
}
}
src/renderer/components/item-card/item-card.module.css
+35 -8
View File
@@ -55,15 +55,42 @@
.favorite-badge {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 0;
height: 0;
top: -50px;
left: -50px;
width: 80px;
height: 80px;
pointer-events: none;
border-color: var(--theme-colors-primary) transparent transparent transparent;
border-style: solid;
border-width: 24px 24px 0 0;
background-color: var(--theme-colors-primary);
box-shadow: 0 0 10px 8px rgb(0 0 0 / 80%);
opacity: 1;
transform: rotate(-45deg);
transition: opacity 0.2s ease-in-out;
}
.rating-badge {
position: absolute;
top: var(--theme-spacing-sm);
right: var(--theme-spacing-sm);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
font-size: var(--theme-font-size-md);
font-weight: 600;
color: var(--theme-colors-foreground);
text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
pointer-events: none;
background-color: var(--theme-colors-primary);
border-radius: var(--theme-radius-md);
box-shadow: 0 2px 8px rgb(0 0 0 / 50%);
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.image-container:hover .favorite-badge,
.image-container:hover .rating-badge {
opacity: 0;
}
.image {
src/renderer/components/item-card/item-card.tsx
+27 -4
View File
@@ -232,20 +232,29 @@ const CompactItemCard = ({
e.stopPropagation();
};
const isFavorite =
'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
const userRating =
'userRating' in data &&
typeof (data as { userRating: null | number }).userRating === 'number'
? (data as { userRating: null | number }).userRating
: null;
const hasRating = userRating !== null && userRating > 0;
const imageContainerClassName = clsx(styles.imageContainer, {
[styles.isRound]: isRound,
});
const isFavorite =
'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
const imageContainerContent = (
<>
<Image
className={clsx(styles.image, { [styles.isRound]: isRound })}
className={clsx(styles.image, {
[styles.isRound]: isRound,
})}
src={imageUrl}
/>
{isFavorite && <div className={styles.favoriteBadge} />}
{hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
<AnimatePresence>
{withControls && showControls && (
<ItemCardControls
@@ -443,6 +452,12 @@ const DefaultItemCard = ({
const isFavorite =
'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
const userRating =
'userRating' in data &&
typeof (data as { userRating: null | number }).userRating === 'number'
? (data as { userRating: null | number }).userRating
: null;
const hasRating = userRating !== null && userRating > 0;
const imageContainerContent = (
<>
@@ -451,6 +466,7 @@ const DefaultItemCard = ({
src={imageUrl}
/>
{isFavorite && <div className={styles.favoriteBadge} />}
{hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
<AnimatePresence>
{withControls && showControls && (
<ItemCardControls
@@ -695,6 +711,12 @@ const PosterItemCard = ({
const isFavorite =
'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
const userRating =
'userRating' in data &&
typeof (data as { userRating: null | number }).userRating === 'number'
? (data as { userRating: null | number }).userRating
: null;
const hasRating = userRating !== null && userRating > 0;
const imageContainerContent = (
<>
@@ -703,6 +725,7 @@ const PosterItemCard = ({
src={imageUrl}
/>
{isFavorite && <div className={styles.favoriteBadge} />}
{hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
<AnimatePresence>
{withControls && showControls && data && (
<ItemCardControls