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

Fix jumpiness of manga description collapse/expand button

Browse Source
This commit is contained in:
schroda
2025-04-11 22:41:48 +02:00
parent 48d96afa85
commit 882638b7c1
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/modules/manga/components/MangaDetails.tsx
View File

@@ -288,6 +288,7 @@ const Thumbnail = ({
); );
}; };
const OPEN_CLOSE_BUTTON_HEIGHT = '35px';
const DESCRIPTION_COLLAPSED_SIZE = 75; const DESCRIPTION_COLLAPSED_SIZE = 75;
const DescriptionGenre = ({ const DescriptionGenre = ({
manga: { description, genre: mangaGenres }, manga: { description, genre: mangaGenres },
@@ -315,7 +316,12 @@ const DescriptionGenre = ({
<Collapse collapsedSize={collapsedSize} in={!isCollapsed}> <Collapse collapsedSize={collapsedSize} in={!isCollapsed}>
<Typography <Typography
ref={setDescriptionElement} ref={setDescriptionElement}
style={{ whiteSpace: 'pre-line', textAlign: 'justify', textJustify: 'inter-word' }} sx={{
whiteSpace: 'pre-line',
textAlign: 'justify',
textJustify: 'inter-word',
mb: OPEN_CLOSE_BUTTON_HEIGHT,
}}
> >
{description} {description}
</Typography> </Typography>
@@ -323,14 +329,15 @@ const DescriptionGenre = ({
<Stack <Stack
onClick={() => setIsCollapsed(!isCollapsed)} onClick={() => setIsCollapsed(!isCollapsed)}
sx={{ sx={{
pt: 1, justifyContent: 'flex-start',
alignItems: 'center', alignItems: 'center',
cursor: 'pointer', cursor: 'pointer',
position: isCollapsed ? 'absolute' : null, position: 'absolute',
width: '100%', width: '100%',
height: OPEN_CLOSE_BUTTON_HEIGHT,
bottom: 0, bottom: 0,
background: (theme) => background: (theme) =>
`linear-gradient(transparent 1px, ${theme.palette.background.default})`, `linear-gradient(transparent -15px, ${theme.palette.background.default})`,
}} }}
> >
<IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}> <IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}>