Update manga cards styling
This commit is contained in:
schroda
@@ -35,7 +35,7 @@ export const ContinueReadingButton = ({
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
sx={{ minWidth: 'unset' }}
|
||||
sx={{ minWidth: 'unset', py: 0.5, px: 0.75 }}
|
||||
component={Link}
|
||||
to={`${mangaLinkTo}chapter/${nextChapterIndexToRead}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
|
||||
@@ -14,18 +14,17 @@ import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsCon
|
||||
import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx';
|
||||
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
|
||||
|
||||
const BadgeContainer = styled('div')({
|
||||
const BadgeContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
height: 'fit-content',
|
||||
borderRadius: '5px',
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
overflow: 'hidden',
|
||||
'& p': {
|
||||
color: 'white',
|
||||
padding: '0.1em',
|
||||
paddingInline: '0.2em',
|
||||
fontSize: '1.05rem',
|
||||
},
|
||||
});
|
||||
}));
|
||||
|
||||
const Badge = styled(Typography)(({ theme }) => ({
|
||||
color: theme.palette.primary.contrastText,
|
||||
paddingInline: theme.spacing(0.3),
|
||||
}));
|
||||
|
||||
export const MangaBadges = ({
|
||||
inLibraryIndicator,
|
||||
@@ -78,16 +77,16 @@ export const MangaBadges = ({
|
||||
</Typography>
|
||||
)}
|
||||
{((showUnreadBadge && mode === 'default') || mode === 'duplicate') && (unread ?? 0) > 0 && (
|
||||
<Typography sx={{ backgroundColor: 'primary.dark' }}>{unread}</Typography>
|
||||
<Badge sx={{ backgroundColor: 'primary.dark' }}>{unread}</Badge>
|
||||
)}
|
||||
{((showDownloadBadge && mode === 'default') || mode === 'duplicate') && (downloadCount ?? 0) > 0 && (
|
||||
<Typography
|
||||
<Badge
|
||||
sx={{
|
||||
backgroundColor: 'success.dark',
|
||||
backgroundColor: 'primary.light',
|
||||
}}
|
||||
>
|
||||
{downloadCount}
|
||||
</Typography>
|
||||
</Badge>
|
||||
)}
|
||||
</BadgeContainer>
|
||||
);
|
||||
|
||||
@@ -18,9 +18,9 @@ import { useRef } from 'react';
|
||||
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
|
||||
import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
|
||||
import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
|
||||
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
|
||||
import { Mangas } from '@/lib/data/Mangas.ts';
|
||||
import { SpecificMangaCardProps } from '@/components/manga/MangaCard.types.tsx';
|
||||
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines';
|
||||
|
||||
const BottomGradient = styled('div')({
|
||||
position: 'absolute',
|
||||
@@ -38,10 +38,6 @@ const BottomGradientDoubledDown = styled('div')({
|
||||
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
|
||||
});
|
||||
|
||||
const GridMangaTitle = styled(TypographyMaxLines)({
|
||||
fontSize: '1.05rem',
|
||||
});
|
||||
|
||||
export const MangaGridCard = ({
|
||||
manga,
|
||||
longPressBind,
|
||||
@@ -74,7 +70,7 @@ export const MangaGridCard = ({
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
margin: '2px',
|
||||
m: 0.25,
|
||||
outline: selected ? '4px solid' : undefined,
|
||||
borderRadius: selected ? '1px' : undefined,
|
||||
outlineColor: (theme) => theme.palette.primary.main,
|
||||
@@ -134,9 +130,9 @@ export const MangaGridCard = ({
|
||||
direction="row"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 5,
|
||||
right: 5,
|
||||
top: (theme) => theme.spacing(1),
|
||||
left: (theme) => theme.spacing(1),
|
||||
right: (theme) => theme.spacing(1),
|
||||
}}
|
||||
>
|
||||
{mangaBadges}
|
||||
@@ -163,21 +159,21 @@ export const MangaGridCard = ({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
margin: '0.5em 0',
|
||||
padding: '0 0.5em',
|
||||
gap: '0.5em',
|
||||
p: 1,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{gridLayout !== GridLayout.Comfortable && (
|
||||
<Tooltip title={title} placement="top">
|
||||
<GridMangaTitle
|
||||
<TypographyMaxLines
|
||||
component="h3"
|
||||
sx={{
|
||||
color: 'white',
|
||||
textShadow: '0px 0px 3px #000000',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</GridMangaTitle>
|
||||
</TypographyMaxLines>
|
||||
</Tooltip>
|
||||
)}
|
||||
{continueReadingButton}
|
||||
@@ -186,21 +182,20 @@ export const MangaGridCard = ({
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
{gridLayout === GridLayout.Comfortable && (
|
||||
<Tooltip title={title} placement="top">
|
||||
<GridMangaTitle
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
bottom: 0,
|
||||
margin: '0.5em 0',
|
||||
padding: '0 0.5em',
|
||||
color: 'text.primary',
|
||||
height: '3rem',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</GridMangaTitle>
|
||||
</Tooltip>
|
||||
<Stack sx={{ pb: 1 }}>
|
||||
<Tooltip title={title} placement="top">
|
||||
<TypographyMaxLines
|
||||
component="h3"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
height: '3rem',
|
||||
pt: 0.5,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</TypographyMaxLines>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
</Link>
|
||||
|
||||
@@ -68,7 +68,7 @@ export const MangaListCard = ({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
padding: 1.5,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
@@ -78,7 +78,7 @@ export const MangaListCard = ({
|
||||
width: 56,
|
||||
height: 56,
|
||||
flex: '0 0 auto',
|
||||
marginRight: 2,
|
||||
marginRight: 1,
|
||||
}}
|
||||
>
|
||||
<SpinnerImage
|
||||
@@ -103,10 +103,12 @@ export const MangaListCard = ({
|
||||
}}
|
||||
>
|
||||
<Tooltip title={title} placement="top">
|
||||
<TypographyMaxLines variant="h5">{title}</TypographyMaxLines>
|
||||
<TypographyMaxLines variant="h6" component="h3">
|
||||
{title}
|
||||
</TypographyMaxLines>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Stack direction="row" alignItems="center" gap="5px">
|
||||
<Stack direction="row" alignItems="center" gap={0.5}>
|
||||
{mangaBadges}
|
||||
{continueReadingButton}
|
||||
<MangaOptionButton
|
||||
|
||||
Reference in New Issue
Block a user