fix gap from screen edge issue
This commit is contained in:
parent
36dc625bfb
commit
093e5e4929
|
@ -15,9 +15,9 @@ import { logError } from 'utils/sentry';
|
|||
import { VISIBILITY_STATE } from 'types/magicMetadata';
|
||||
import { AppContext } from 'pages/_app';
|
||||
import OverflowMenu from 'components/OverflowMenu/menu';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import { CollectionSummaryType } from 'constants/collection';
|
||||
import { TrashCollectionOption } from './TrashCollectionOption';
|
||||
import MoreHoriz from '@mui/icons-material/MoreHoriz';
|
||||
|
||||
interface CollectionOptionsProps {
|
||||
setCollectionNamerAttributes: SetCollectionNamerAttributes;
|
||||
|
@ -203,7 +203,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
|
|||
return (
|
||||
<OverflowMenu
|
||||
ariaControls={'collection-options'}
|
||||
triggerButtonIcon={<MoreVertIcon />}
|
||||
triggerButtonIcon={<MoreHoriz />}
|
||||
triggerButtonProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.fill.dark,
|
||||
|
|
|
@ -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)<{
|
||||
columns: number;
|
||||
shrinkRatio: number;
|
||||
|
@ -164,17 +179,15 @@ export function PhotoList({
|
|||
);
|
||||
const deduplicateContext = useContext(DeduplicateContext);
|
||||
|
||||
let desiredColumns = Math.ceil((width - 48) / IMAGE_CONTAINER_MAX_WIDTH);
|
||||
const fittableColumns = (width - 48) / IMAGE_CONTAINER_MAX_WIDTH;
|
||||
const fittableColumns = getFractionFittableColumns(width);
|
||||
let columns = Math.ceil(fittableColumns);
|
||||
|
||||
let skipMerge = false;
|
||||
if (desiredColumns < MIN_COLUMNS) {
|
||||
desiredColumns = MIN_COLUMNS - 1;
|
||||
if (columns < MIN_COLUMNS) {
|
||||
columns = MIN_COLUMNS - 1;
|
||||
skipMerge = true;
|
||||
}
|
||||
const shrinkRatio = fittableColumns / desiredColumns;
|
||||
|
||||
const columns = desiredColumns;
|
||||
const shrinkRatio = fittableColumns / columns;
|
||||
const listItemHeight =
|
||||
IMAGE_CONTAINER_MAX_HEIGHT * shrinkRatio + GAP_BTW_TILES;
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
||||
export const SpecialPadding = css`
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
|
Loading…
Reference in a new issue