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