beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix footer item height to avoid unnecessary scroll

Browse source
This commit is contained in:
Abhinav 2023-08-10 10:30:02 +05:30
parent 90909534ef
commit a606488c5f
1 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
apps/photos/src/components/PhotoList.tsx
View file

@ -31,7 +31,8 @@ import memoize from 'memoize-one';
const A_DAY = 24 * 60 * 60 * 1000; const A_DAY = 24 * 60 * 60 * 1000;
const FOOTER_HEIGHT = 90; const FOOTER_HEIGHT = 90;
const ALBUM_FOOTER_HEIGHT = 95; const ALBUM_FOOTER_HEIGHT = 75;
const ALBUM_FOOTER_HEIGHT_WITH_REFERRAL = 113;
export enum ITEM_TYPE { export enum ITEM_TYPE {
TIME = 'TIME', TIME = 'TIME',
@ -151,9 +152,11 @@ const FooterContainer = styled(ListItemContainer)`
margin-top: calc(2rem + 20px); margin-top: calc(2rem + 20px);
`; `;
const AlbumFooterContainer = styled(ListItemContainer)` const AlbumFooterContainer = styled(ListItemContainer)<{
hasReferral: boolean;
}>`
margin-top: 48px; margin-top: 48px;
margin-bottom: 10px; margin-bottom: ${({ hasReferral }) => (!hasReferral ? `10px` : '0px')};
text-align: center; text-align: center;
justify-content: center; justify-content: center;
`; `;
@ -551,11 +554,14 @@ export function PhotoList({
}; };
}; };
const getVacuumItem = (timeStampList) => { const getVacuumItem = (timeStampList) => {
const footerHeight = let footerHeight;
publicCollectionGalleryContext.accessedThroughSharedURL if (publicCollectionGalleryContext.accessedThroughSharedURL) {
? ALBUM_FOOTER_HEIGHT + footerHeight = publicCollectionGalleryContext.referralCode
(publicCollectionGalleryContext.photoListFooter?.height ?? 0) ? ALBUM_FOOTER_HEIGHT_WITH_REFERRAL
: FOOTER_HEIGHT; : ALBUM_FOOTER_HEIGHT;
} else {
footerHeight = FOOTER_HEIGHT;
}
const photoFrameHeight = (() => { const photoFrameHeight = (() => {
let sum = 0; let sum = 0;
const getCurrentItemSize = getItemSize(timeStampList); const getCurrentItemSize = getItemSize(timeStampList);
@ -609,9 +615,13 @@ export function PhotoList({
const getAlbumsFooter = () => { const getAlbumsFooter = () => {
return { return {
itemType: ITEM_TYPE.MARKETING_FOOTER, itemType: ITEM_TYPE.MARKETING_FOOTER,
height: ALBUM_FOOTER_HEIGHT, height: publicCollectionGalleryContext.referralCode
? ALBUM_FOOTER_HEIGHT_WITH_REFERRAL
: ALBUM_FOOTER_HEIGHT,
item: ( item: (
<AlbumFooterContainer span={columns}> <AlbumFooterContainer
span={columns}
hasReferral={!!publicCollectionGalleryContext.referralCode}>
<Box width={'100%'}> <Box width={'100%'}>
<Typography variant="small" display={'block'}> <Typography variant="small" display={'block'}>
{t('SHARED_USING')}{' '} {t('SHARED_USING')}{' '}
@ -619,8 +629,7 @@ export function PhotoList({
{t('ENTE_IO')} {t('ENTE_IO')}
</Link> </Link>
</Typography> </Typography>
{publicCollectionGalleryContext.referralCode ?? {publicCollectionGalleryContext.referralCode ? (
'' !== '' ? (
<FullStretchContainer> <FullStretchContainer>
<Typography <Typography
sx={{ sx={{