antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix inconsistent image loader aspect ratio

Browse source
This commit is contained in:
jeffvli 2025-11-01 22:17:02 -07:00
parent 51181a6695
commit dd70d30cd3
3 changed files with 9 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/features/shared/components/library-header.module.css
View file

@ -99,7 +99,7 @@
grid-area: image; grid-area: image;
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
height: 100%; 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%));
} }

3
src/shared/components/image/image.module.css
View file

@ -23,6 +23,7 @@
.loader { .loader {
width: 100%; width: 100%;
height: 100%; height: 100%;
aspect-ratio: 1 / 1;
} }
.image-container { .image-container {
@ -38,7 +39,7 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 100%; aspect-ratio: 1 / 1;
background-color: darken(var(--theme-colors-foreground), 40%); background-color: darken(var(--theme-colors-foreground), 40%);
opacity: 0.3; opacity: 0.3;
} }

7
src/shared/components/image/image.tsx
View file

@ -107,7 +107,12 @@ const ImageContainer = forwardRef(
); );
function ImageLoader({ className }: ImageLoaderProps) { function ImageLoader({ className }: ImageLoaderProps) {
return <Skeleton className={clsx(styles.skeleton, styles.loader, className)} />; return (
<Skeleton
className={clsx(styles.skeleton, styles.loader, className)}
containerClassName={styles.skeletonContainer}
/>
);
} }
function ImageUnloader({ className }: ImageUnloaderProps) { function ImageUnloader({ className }: ImageUnloaderProps) {