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

Responsive handling.

Browse source
This commit is contained in:
Pushkar Anand 2020-11-23 11:50:00 +05:30
parent 437682a901
commit c53af912f0
1 changed files with 31 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/pages/gallery/index.tsx
View file

@ -98,23 +98,37 @@ export default function Gallery() {
return (<Container>
<AutoSizer>
{({ height, width }) => (
<List
itemSize={200}
height={height}
width={width}
itemCount={data.length / 5}
>
{({ index, style }) => <ListItem style={style}>
{getThumbnail(data, index * 5)}
{getThumbnail(data, index * 5 + 1)}
{getThumbnail(data, index * 5 + 2)}
{getThumbnail(data, index * 5 + 3)}
{getThumbnail(data, index * 5 + 4)}
</ListItem>}
</List>
)}
{({ height, width }) => {
let columns;
if (width >= 1000) {
columns = 5;
} else if (width < 1000 && width >= 450) {
columns = 3;
} else if (width < 450 && width >= 300) {
columns = 2;
} else {
columns = 1;
}
return (
<List
itemSize={200}
height={height}
width={width}
itemCount={data.length / columns}
>
{({ index, style }) => {
const arr = [];
for (let i = 0; i < columns; i++) {
arr.push(index * columns + i);
}
return (<ListItem style={style}>
{arr.map(i => getThumbnail(data, i))}
</ListItem>);
}}
</List>
)
}}
</AutoSizer>
<PhotoSwipe
isOpen={open}