Remove usage of z-index for manga badges (#711)

Caused the badges to be over some components which they were not intended to be
This commit is contained in:
schroda
2024-04-07 15:21:36 +02:00
committed by GitHub
parent 41d876e156
commit d68d9b7ed2

View File

@@ -197,6 +197,28 @@ export const MangaCard = (props: MangaCardProps) => {
height: '100%', height: '100%',
}} }}
> >
<SpinnerImage
alt={title}
src={thumbnailUrl}
imgStyle={
inLibraryIndicator && inLibrary
? {
height: '100%',
width: '100%',
objectFit: 'cover',
filter: 'brightness(0.4)',
}
: {
height: '100%',
width: '100%',
objectFit: 'cover',
}
}
spinnerStyle={{
display: 'grid',
placeItems: 'center',
}}
/>
<Stack <Stack
alignItems="start" alignItems="start"
justifyContent="space-between" justifyContent="space-between"
@@ -210,9 +232,7 @@ export const MangaCard = (props: MangaCardProps) => {
> >
<BadgeContainer> <BadgeContainer>
{inLibraryIndicator && inLibrary && ( {inLibraryIndicator && inLibrary && (
<Typography <Typography sx={{ backgroundColor: 'primary.dark' }}>
sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
>
{t('manga.button.in_library')} {t('manga.button.in_library')}
</Typography> </Typography>
)} )}
@@ -239,28 +259,6 @@ export const MangaCard = (props: MangaCardProps) => {
handleSelection={handleSelection} handleSelection={handleSelection}
/> />
</Stack> </Stack>
<SpinnerImage
alt={title}
src={thumbnailUrl}
imgStyle={
inLibraryIndicator && inLibrary
? {
height: '100%',
width: '100%',
objectFit: 'cover',
filter: 'brightness(0.4)',
}
: {
height: '100%',
width: '100%',
objectFit: 'cover',
}
}
spinnerStyle={{
display: 'grid',
placeItems: 'center',
}}
/>
<> <>
{gridLayout !== GridLayout.Comfortable && ( {gridLayout !== GridLayout.Comfortable && (
<> <>