pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set card images to cover

Browse source 
- Better UX since it makes the grid look more consistent
This commit is contained in:
jeffvli 2023-05-10 14:34:06 -07:00
parent f9e410a1f5
commit eca26e912f
2 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/renderer/components/virtual-grid/grid-card/default-card.tsx
View file

@ -91,6 +91,18 @@ const ImageContainer = styled.div`
}
`;
const Image = styled(SimpleImg)`
width: 100%;
max-width: 100%;
height: 100%;
border: 0;
img {
height: 100%;
object-fit: cover;
}
`;
const DetailContainer = styled.div`
margin-top: 0.5rem;
`;
@ -143,8 +155,7 @@ export const DefaultCard = ({
<InnerCardContainer>
<ImageContainer>
{data?.imageUrl ? (
<SimpleImg
imgStyle={{ objectFit: 'cover' }}
<Image
importance="auto"
placeholder={data?.imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={data?.imageUrl}

15
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
View file

@ -79,6 +79,18 @@ const ImageContainer = styled.div`
}
`;
const Image = styled(SimpleImg)`
width: 100%;
max-width: 100%;
height: 100%;
border: 0;
img {
height: 100%;
object-fit: cover;
}
`;
const DetailContainer = styled.div`
margin-top: 0.5rem;
`;
@ -128,8 +140,7 @@ export const PosterCard = ({
<LinkContainer onClick={() => navigate(path)}>
<ImageContainer>
{data?.imageUrl ? (
<SimpleImg
imgStyle={{ objectFit: 'cover' }}
<Image
importance="auto"
placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
src={data?.imageUrl}