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

Move the last update timestamp to the body (#472)

Browse Source 
On small screens, the last update timestamp caused the pages title to get cut
This commit is contained in:
schroda
2023-11-25 15:39:39 +01:00
committed by GitHub
parent 7c69a4a5a1
commit 6b2245d730
1 changed files with 104 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/screens/Updates.tsx
View File

@@ -13,7 +13,7 @@ import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import React, { useCallback, useContext, useEffect, useMemo } from 'react'; import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { t as translate } from 'i18next'; import { t as translate } from 'i18next';
@@ -27,12 +27,14 @@ import { TChapter } from '@/typings.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx'; import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { UpdateChecker } from '@/components/library/UpdateChecker.tsx'; import { UpdateChecker } from '@/components/library/UpdateChecker.tsx';
const StyledGroupedVirtuoso = styled(GroupedVirtuoso)(({ theme }) => ({ const StyledGroupedVirtuoso = styled(GroupedVirtuoso, { shouldForwardProp: (prop) => prop !== 'heightToSubtract' })<{
heightToSubtract: number;
}>(({ theme, heightToSubtract }) => ({
// 64px header // 64px header
height: 'calc(100vh - 64px)', height: `calc(100vh - 64px - ${heightToSubtract}px)`,
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('sm')]: {
// 64px header (margin); 64px menu (margin); // 64px header (margin); 64px menu (margin);
height: 'calc(100vh - 64px - 64px)', height: `calc(100vh - 64px - 64px - ${heightToSubtract}px)`,
}, },
})); }));
@@ -118,6 +120,12 @@ export const Updates: React.FC = () => {
const { data: downloaderData } = requestManager.useDownloadSubscription(); const { data: downloaderData } = requestManager.useDownloadSubscription();
const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? []; const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
const lastUpdateTimestampCompRef = useRef<HTMLElement>(null);
const [lastUpdateTimestampCompHeight, setLastUpdateTimestampCompHeight] = useState(0);
useLayoutEffect(() => {
setLastUpdateTimestampCompHeight(lastUpdateTimestampCompRef.current?.clientHeight ?? 0);
}, [lastUpdateTimestampCompRef.current]);
const { data: lastUpdateTimestampData } = requestManager.useGetLastGlobalUpdateTimestamp({ const { data: lastUpdateTimestampData } = requestManager.useGetLastGlobalUpdateTimestamp({
/** /**
* The {@link UpdateChecker} is responsible for updating the timestamp * The {@link UpdateChecker} is responsible for updating the timestamp
@@ -129,16 +137,7 @@ export const Updates: React.FC = () => {
useEffect(() => { useEffect(() => {
setTitle(t('updates.title')); setTitle(t('updates.title'));
setAction( setAction(<UpdateChecker />);
<>
<Typography sx={{ marginRight: '10px' }}>
{t('library.settings.global_update.label.last_update', {
date: lastUpdateTimestamp ? new Date(+lastUpdateTimestamp).toLocaleString() : '-',
})}
</Typography>
<UpdateChecker />
</>,
);
}, [t, lastUpdateTimestamp]); }, [t, lastUpdateTimestamp]);
const downloadForChapter = (chapter: TChapter) => { const downloadForChapter = (chapter: TChapter) => {
@@ -166,85 +165,99 @@ export const Updates: React.FC = () => {
} }
return ( return (
<StyledGroupedVirtuoso <>
style={{ <Typography
// override Virtuoso default values and set them with class ref={lastUpdateTimestampCompRef}
height: 'undefined', sx={{
}} marginLeft: '10px',
components={{ paddingTop: (theme) => ({ [theme.breakpoints.up('sm')]: { paddingTop: '6px' } }),
Footer: () => (isLoading ? <LoadingPlaceholder usePadding /> : null), }}
}} >
overscan={window.innerHeight * 0.5} {t('library.settings.global_update.label.last_update', {
endReached={loadMore} date: lastUpdateTimestamp ? new Date(+lastUpdateTimestamp).toLocaleString() : '-',
groupCounts={groupCounts} })}
groupContent={(index) => ( </Typography>
<StyledGroupHeader variant="h5" isFirstItem={index === 0}> <StyledGroupedVirtuoso
{groupedUpdates[index][0]} heightToSubtract={lastUpdateTimestampCompHeight}
</StyledGroupHeader> style={{
)} // override Virtuoso default values and set them with class
itemContent={(index) => { height: 'undefined',
const chapter = updateEntries[index]; }}
const { manga } = chapter; components={{
const download = downloadForChapter(chapter); Footer: () => (isLoading ? <LoadingPlaceholder usePadding /> : null),
}}
overscan={window.innerHeight * 0.5}
endReached={loadMore}
groupCounts={groupCounts}
groupContent={(index) => (
<StyledGroupHeader variant="h5" isFirstItem={index === 0}>
{groupedUpdates[index][0]}
</StyledGroupHeader>
)}
itemContent={(index) => {
const chapter = updateEntries[index];
const { manga } = chapter;
const download = downloadForChapter(chapter);
return ( return (
<StyledGroupItemWrapper key={index} isLastItem={index === updateEntries.length - 1}> <StyledGroupItemWrapper key={index} isLastItem={index === updateEntries.length - 1}>
<Card> <Card>
<CardActionArea <CardActionArea
component={Link} component={Link}
to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`} to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`}
state={location.state} state={location.state}
>
<CardContent
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 2,
}}
> >
<Box sx={{ display: 'flex' }}> <CardContent
<Avatar sx={{
variant="rounded" display: 'flex',
sx={{ justifyContent: 'space-between',
width: 56, alignItems: 'center',
height: 56, padding: 2,
flex: '0 0 auto', }}
marginRight: 2, >
imageRendering: 'pixelated', <Box sx={{ display: 'flex' }}>
}} <Avatar
src={requestManager.getValidImgUrlFor(manga.thumbnailUrl ?? '')} variant="rounded"
/> sx={{
<Box sx={{ display: 'flex', flexDirection: 'column' }}> width: 56,
<Typography variant="h5" component="h2"> height: 56,
{manga.title} flex: '0 0 auto',
</Typography> marginRight: 2,
<Typography variant="caption" display="block" gutterBottom> imageRendering: 'pixelated',
{chapter.name}
</Typography>
</Box>
</Box>
{download && <DownloadStateIndicator download={download} />}
{download == null && !chapter.isDownloaded && (
<Tooltip title={t('chapter.action.download.add.label.action')}>
<IconButton
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
downloadChapter(chapter);
}} }}
size="large" src={requestManager.getValidImgUrlFor(manga.thumbnailUrl ?? '')}
> />
<DownloadIcon /> <Box sx={{ display: 'flex', flexDirection: 'column' }}>
</IconButton> <Typography variant="h5" component="h2">
</Tooltip> {manga.title}
)} </Typography>
</CardContent> <Typography variant="caption" display="block" gutterBottom>
</CardActionArea> {chapter.name}
</Card> </Typography>
</StyledGroupItemWrapper> </Box>
); </Box>
}} {download && <DownloadStateIndicator download={download} />}
/> {download == null && !chapter.isDownloaded && (
<Tooltip title={t('chapter.action.download.add.label.action')}>
<IconButton
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
downloadChapter(chapter);
}}
size="large"
>
<DownloadIcon />
</IconButton>
</Tooltip>
)}
</CardContent>
</CardActionArea>
</Card>
</StyledGroupItemWrapper>
);
}}
/>
</>
); );
}; };