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

Show manga description only if available

Browse Source
This commit is contained in:
schroda
2024-09-09 14:55:59 +02:00
parent b57e5118cc
commit a6976d4513
1 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/manga/MangaDetails.tsx
View File

@@ -183,31 +183,36 @@ const DescriptionGenre = ({
}) => {
const [isCollapsed, setIsCollapsed] = useLocalStorage('isDescriptionGenreCollapsed', true);
const collapsedSize = description ? DESCRIPTION_COLLAPSED_SIZE : 0;
return (
<>
<Stack sx={{ position: 'relative' }}>
<Collapse collapsedSize={DESCRIPTION_COLLAPSED_SIZE} in={!isCollapsed}>
<Typography style={{ whiteSpace: 'pre-line', textAlign: 'justify', textJustify: 'inter-word' }}>
{description}
</Typography>
</Collapse>
<Stack
onClick={() => setIsCollapsed(!isCollapsed)}
sx={{
pt: 1,
alignItems: 'center',
cursor: 'pointer',
position: isCollapsed ? 'absolute' : null,
width: '100%',
bottom: 0,
background: (theme) => `linear-gradient(transparent 1px, ${theme.palette.background.default})`,
}}
>
<IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}>
{isCollapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}
</IconButton>
{description && (
<Stack sx={{ position: 'relative' }}>
<Collapse collapsedSize={collapsedSize} in={!isCollapsed}>
<Typography style={{ whiteSpace: 'pre-line', textAlign: 'justify', textJustify: 'inter-word' }}>
{description}
</Typography>
</Collapse>
<Stack
onClick={() => setIsCollapsed(!isCollapsed)}
sx={{
pt: 1,
alignItems: 'center',
cursor: 'pointer',
position: isCollapsed ? 'absolute' : null,
width: '100%',
bottom: 0,
background: (theme) =>
`linear-gradient(transparent 1px, ${theme.palette.background.default})`,
}}
>
<IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}>
{isCollapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}
</IconButton>
</Stack>
</Stack>
</Stack>
)}
<Stack
sx={{
flexDirection: 'row',