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

fix footer positioning issue

Browse source
This commit is contained in:
Abhinav 2022-02-04 17:41:42 +05:30
parent bf9a2af292
commit 09a4be46fd
1 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/PhotoList.tsx
View file

@ -17,6 +17,7 @@ import { getVariantColor, ButtonVariant } from './pages/gallery/LinkButton';
const A_DAY = 24 * 60 * 60 * 1000; const A_DAY = 24 * 60 * 60 * 1000;
const NO_OF_PAGES = 2; const NO_OF_PAGES = 2;
const FOOTER_HEIGHT = 90;
enum ITEM_TYPE { enum ITEM_TYPE {
TIME = 'TIME', TIME = 'TIME',
@ -84,7 +85,11 @@ const DateContainer = styled.div<{ span: number }>`
height: ${DATE_CONTAINER_HEIGHT}px; height: ${DATE_CONTAINER_HEIGHT}px;
`; `;
const BannerContainer = styled.div<{ span: number }>` const FooterContainer = styled.div<{ span: number }>`
font-size: 14px;
@media (max-width: 540px) {
font-size: 12px;
}
color: #979797; color: #979797;
text-align: center; text-align: center;
grid-column: span ${(props) => props.span}; grid-column: span ${(props) => props.span};
@ -94,10 +99,6 @@ const BannerContainer = styled.div<{ span: number }>`
& > p { & > p {
margin: 0; margin: 0;
} }
margin: 1rem 0;
`;
const AlbumsFooterContainer = styled(BannerContainer)`
margin: calc(2rem + 20px) 0 1rem 0; margin: calc(2rem + 20px) 0 1rem 0;
`; `;
@ -254,7 +255,7 @@ export function PhotoList({
const getCurrentItemSize = getItemSize(timeStampList); const getCurrentItemSize = getItemSize(timeStampList);
for (let i = 0; i < timeStampList.length; i++) { for (let i = 0; i < timeStampList.length; i++) {
sum += getCurrentItemSize(i); sum += getCurrentItemSize(i);
if (height - sum <= 70) { if (height - sum <= FOOTER_HEIGHT) {
break; break;
} }
} }
@ -263,16 +264,16 @@ export function PhotoList({
return { return {
itemType: ITEM_TYPE.OTHER, itemType: ITEM_TYPE.OTHER,
item: <></>, item: <></>,
height: Math.max(height - photoFrameHeight - 70, 0), height: Math.max(height - photoFrameHeight - FOOTER_HEIGHT, 0),
}; };
}; };
const getAppDownloadFooter = () => { const getAppDownloadFooter = () => {
return { return {
itemType: ITEM_TYPE.OTHER, itemType: ITEM_TYPE.OTHER,
item: ( item: (
<BannerContainer span={columns}> <FooterContainer span={columns}>
<p>{constants.INSTALL_MOBILE_APP()}</p> <p>{constants.INSTALL_MOBILE_APP()}</p>
</BannerContainer> </FooterContainer>
), ),
}; };
}; };
@ -281,7 +282,7 @@ export function PhotoList({
return { return {
itemType: ITEM_TYPE.OTHER, itemType: ITEM_TYPE.OTHER,
item: ( item: (
<AlbumsFooterContainer span={columns}> <FooterContainer span={columns}>
<p> <p>
{constants.PRESERVED_BY}{' '} {constants.PRESERVED_BY}{' '}
<a <a
@ -294,7 +295,7 @@ export function PhotoList({
{constants.ENTE_IO} {constants.ENTE_IO}
</a> </a>
</p> </p>
</AlbumsFooterContainer> </FooterContainer>
), ),
}; };
}; };