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

fix gap from screen edge issue

Browse source
This commit is contained in:
Abhinav 2022-07-04 17:03:44 +05:30
parent 36dc625bfb
commit 093e5e4929
3 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Collections/CollectionOptions/index.tsx
View file

@ -15,9 +15,9 @@ import { logError } from 'utils/sentry';
import { VISIBILITY_STATE } from 'types/magicMetadata'; import { VISIBILITY_STATE } from 'types/magicMetadata';
import { AppContext } from 'pages/_app'; import { AppContext } from 'pages/_app';
import OverflowMenu from 'components/OverflowMenu/menu'; import OverflowMenu from 'components/OverflowMenu/menu';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { CollectionSummaryType } from 'constants/collection'; import { CollectionSummaryType } from 'constants/collection';
import { TrashCollectionOption } from './TrashCollectionOption'; import { TrashCollectionOption } from './TrashCollectionOption';
import MoreHoriz from '@mui/icons-material/MoreHoriz';
interface CollectionOptionsProps { interface CollectionOptionsProps {
setCollectionNamerAttributes: SetCollectionNamerAttributes; setCollectionNamerAttributes: SetCollectionNamerAttributes;
@ -203,7 +203,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
return ( return (
<OverflowMenu <OverflowMenu
ariaControls={'collection-options'} ariaControls={'collection-options'}
triggerButtonIcon={<MoreVertIcon />} triggerButtonIcon={<MoreHoriz />}
triggerButtonProps={{ triggerButtonProps={{
sx: { sx: {
background: (theme) => theme.palette.fill.dark, background: (theme) => theme.palette.fill.dark,

27
src/components/PhotoList.tsx
View file

@ -80,6 +80,21 @@ const getTemplateColumns = (
} }
}; };
function getFractionFittableColumns(width: number): number {
return (
(width - 2 * getGapFromScreenEdge(width) + GAP_BTW_TILES) /
(IMAGE_CONTAINER_MAX_WIDTH + GAP_BTW_TILES)
);
}
function getGapFromScreenEdge(width: number) {
if (width > MIN_COLUMNS * IMAGE_CONTAINER_MAX_WIDTH) {
return 24;
} else {
return 4;
}
}
const ListContainer = styled(Box)<{ const ListContainer = styled(Box)<{
columns: number; columns: number;
shrinkRatio: number; shrinkRatio: number;
@ -164,17 +179,15 @@ export function PhotoList({
); );
const deduplicateContext = useContext(DeduplicateContext); const deduplicateContext = useContext(DeduplicateContext);
let desiredColumns = Math.ceil((width - 48) / IMAGE_CONTAINER_MAX_WIDTH); const fittableColumns = getFractionFittableColumns(width);
const fittableColumns = (width - 48) / IMAGE_CONTAINER_MAX_WIDTH; let columns = Math.ceil(fittableColumns);
let skipMerge = false; let skipMerge = false;
if (desiredColumns < MIN_COLUMNS) { if (columns < MIN_COLUMNS) {
desiredColumns = MIN_COLUMNS - 1; columns = MIN_COLUMNS - 1;
skipMerge = true; skipMerge = true;
} }
const shrinkRatio = fittableColumns / desiredColumns; const shrinkRatio = fittableColumns / columns;
const columns = desiredColumns;
const listItemHeight = const listItemHeight =
IMAGE_CONTAINER_MAX_HEIGHT * shrinkRatio + GAP_BTW_TILES; IMAGE_CONTAINER_MAX_HEIGHT * shrinkRatio + GAP_BTW_TILES;

4
src/styles/SpecialPadding.ts
View file

@ -1,9 +1,9 @@
import { IMAGE_CONTAINER_MAX_WIDTH } from 'constants/gallery'; import { IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS } from 'constants/gallery';
import { css } from 'styled-components'; import { css } from 'styled-components';
export const SpecialPadding = css` export const SpecialPadding = css`
padding: 0 24px; padding: 0 24px;
@media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * 4}px) { @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * MIN_COLUMNS}px) {
padding: 0 4px; padding: 0 4px;
} }
`; `;