ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update manga page chapter list styling

Browse Source
This commit is contained in:
schroda
2024-08-30 15:52:02 +02:00
parent bf8aecfc42
commit 37d6f35604
3 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/chapter/ChapterCard.tsx
View File

@@ -116,8 +116,8 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: 2, padding: 1.5,
'&:last-child': { pb: 2 }, '&:last-child': { pb: 1.5 },
}} }}
> >
<Stack direction="column" flex={1}> <Stack direction="column" flex={1}>
@@ -129,7 +129,7 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
}} }}
> >
{chapter.isBookmarked && <BookmarkIcon color="primary" />} {chapter.isBookmarked && <BookmarkIcon color="primary" />}
<TypographyMaxLines variant="h5" component="h2"> <TypographyMaxLines variant="h6" component="h4">
{showChapterNumber {showChapterNumber
? `${t('chapter.title_one')} ${chapter.chapterNumber}` ? `${t('chapter.title_one')} ${chapter.chapterNumber}`
: chapter.name} : chapter.name}

7
src/components/chapter/ChapterList.tsx
View File

@@ -45,10 +45,11 @@ import { Mangas } from '@/lib/data/Mangas';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx'; import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useResizeObserver } from '@/util/useResizeObserver.tsx'; import { useResizeObserver } from '@/util/useResizeObserver.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx'; import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { SCROLLBAR_WIDTH } from '@/theme.ts';
const ChapterListHeader = styled(Stack)(({ theme }) => ({ const ChapterListHeader = styled(Stack)(({ theme }) => ({
padding: theme.spacing(1), padding: theme.spacing(1),
paddingRight: `calc(14px + ${theme.spacing(1)})`, paddingRight: `calc(${SCROLLBAR_WIDTH}px + ${theme.spacing(1)})`,
paddingBottom: 0, paddingBottom: 0,
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
paddingRight: theme.spacing(1), paddingRight: theme.spacing(1),
@@ -183,13 +184,13 @@ export const ChapterList = ({
alignItems="center" alignItems="center"
justifyContent="space-between" justifyContent="space-between"
> >
<Typography variant="h5"> <Typography variant="h5" component="h3">
{`${visibleChapters.length} ${t('chapter.title_one', { {`${visibleChapters.length} ${t('chapter.title_one', {
count: visibleChapters.length, count: visibleChapters.length,
})}`} })}`}
</Typography> </Typography>
<Stack direction="row" sx={{ paddingRight: '24px' }}> <Stack direction="row">
<Tooltip title={t('chapter.action.mark_as_read.add.label.action.current')}> <Tooltip title={t('chapter.action.mark_as_read.add.label.action.current')}>
<IconButton <IconButton
disabled={areAllChaptersRead} disabled={areAllChaptersRead}

4
src/theme.ts
View File

@@ -25,6 +25,8 @@ declare module '@mui/material/styles/createPalette' {
} }
} }
export const SCROLLBAR_WIDTH = 14;
type DefaultMuiPalette = Omit<MuiPalette, 'custom'>; type DefaultMuiPalette = Omit<MuiPalette, 'custom'>;
type DefaultMuiTheme = Omit<Theme, 'palette'> & { palette: DefaultMuiPalette }; type DefaultMuiTheme = Omit<Theme, 'palette'> & { palette: DefaultMuiPalette };
@@ -55,7 +57,7 @@ export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
MuiCssBaseline: { MuiCssBaseline: {
styleOverrides: ` styleOverrides: `
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 14px; width: ${SCROLLBAR_WIDTH}px;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0); border: 4px solid rgba(0, 0, 0, 0);