Fix gallary gird.
This commit is contained in:
Pushkar Anand
parent
36c84807f1
commit
ce4a521636
3 changed files with 39 additions and 37 deletions
|
|
@ -13,10 +13,10 @@ interface IProps {
|
|||
|
||||
const Cont = styled.div<{ disabled: boolean }>`
|
||||
background: #555 url(/image.svg) no-repeat center;
|
||||
margin: 0 4px;
|
||||
display: inline-block;
|
||||
width: 192px;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
height: 192px;
|
||||
min-width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
|
||||
|
|
|
|||
|
|
@ -75,8 +75,11 @@ const DeadCenter = styled.div`
|
|||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const ListContainer = styled.div`
|
||||
display: flex;
|
||||
const ListContainer = styled.div<{columns: number}>`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(${props => props.columns}, 1fr);
|
||||
grid-column-gap: 8px;
|
||||
padding: 0 8px;
|
||||
max-width: 100%;
|
||||
color: #fff;
|
||||
|
||||
|
|
@ -94,13 +97,12 @@ const ListContainer = styled.div`
|
|||
`;
|
||||
|
||||
const DateContainer = styled.div`
|
||||
padding: 0 4px;
|
||||
padding-top: 15px;
|
||||
`;
|
||||
|
||||
export default function Gallery(props) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [reload, setReload] = useState(0);
|
||||
const [collections, setCollections] = useState<collection[]>([]);
|
||||
const [collectionLatestFile, setCollectionLatestFile] = useState<
|
||||
collectionLatestFile[]
|
||||
|
|
@ -113,6 +115,7 @@ export default function Gallery(props) {
|
|||
maxSpreadZoom: 5,
|
||||
});
|
||||
const fetching: { [k: number]: boolean } = {};
|
||||
const [sinceTime, setSinceTime] = useState(0);
|
||||
|
||||
const [progress, setProgress] = useState(0)
|
||||
|
||||
|
|
@ -150,16 +153,9 @@ export default function Gallery(props) {
|
|||
}
|
||||
setCollectionLatestFile(collectionLatestFile);
|
||||
setFavItemIds(favItemIds);
|
||||
|
||||
setSinceTime((new Date()).getTime());
|
||||
props.setUploadButtonView(true);
|
||||
}
|
||||
if (!data || loading) {
|
||||
return (
|
||||
<div className='text-center'>
|
||||
<Spinner animation='border' variant='primary' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const updateUrl = (index: number) => (url: string) => {
|
||||
data[index] = {
|
||||
|
|
@ -272,6 +268,14 @@ export default function Gallery(props) {
|
|||
}
|
||||
};
|
||||
|
||||
if (!data || loading) {
|
||||
return (
|
||||
<div className='text-center'>
|
||||
<Spinner animation='border' variant='primary' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const selectCollection = (id?: string) => {
|
||||
const href = `/gallery?collection=${id || ''}`;
|
||||
router.push(href, undefined, { shallow: true });
|
||||
|
|
@ -308,7 +312,7 @@ export default function Gallery(props) {
|
|||
return (
|
||||
<>
|
||||
<LoadingBar
|
||||
color='#f11946'
|
||||
color='##007bff'
|
||||
progress={progress}
|
||||
onLoaderFinished={() => setProgress(0)}
|
||||
/>
|
||||
|
|
@ -386,34 +390,27 @@ export default function Gallery(props) {
|
|||
<List
|
||||
itemSize={(index) =>
|
||||
timeStampList[index].itemType === ITEM_TYPE.TIME
|
||||
? 30
|
||||
? 45
|
||||
: 200
|
||||
}
|
||||
height={height}
|
||||
width={width}
|
||||
itemCount={timeStampList.length}
|
||||
key={`${router.query.collection}-${columns}`}
|
||||
key={`${router.query.collection}-${columns}-${sinceTime}`}
|
||||
>
|
||||
{({ index, style }) => {
|
||||
return (
|
||||
<ListItem style={style}>
|
||||
<ListContainer>
|
||||
{timeStampList[index].itemType ===
|
||||
ITEM_TYPE.TIME ? (
|
||||
<DateContainer>
|
||||
{timeStampList[index].date}
|
||||
</DateContainer>
|
||||
) : (
|
||||
timeStampList[index].items.map((item, idx) => {
|
||||
return getThumbnail(
|
||||
filteredData,
|
||||
timeStampList[index].itemStartIndex + idx
|
||||
);
|
||||
})
|
||||
)}
|
||||
</ListContainer>
|
||||
</ListItem>
|
||||
);
|
||||
return (<ListItem style={style}>
|
||||
<ListContainer columns={timeStampList[index].itemType === ITEM_TYPE.TIME
|
||||
? 1 : columns}>
|
||||
{
|
||||
timeStampList[index].itemType === ITEM_TYPE.TIME
|
||||
? <DateContainer>{timeStampList[index].date}</DateContainer>
|
||||
: timeStampList[index].items.map((item, idx) =>{
|
||||
return getThumbnail(filteredData, timeStampList[index].itemStartIndex + idx);
|
||||
})
|
||||
}
|
||||
</ListContainer>
|
||||
</ListItem>);
|
||||
}}
|
||||
</List>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4993,6 +4993,11 @@ react-refresh@0.8.3:
|
|||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
|
||||
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
|
||||
|
||||
react-top-loading-bar@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-top-loading-bar/-/react-top-loading-bar-2.0.1.tgz#c8805ad9c1068766fdd3cadd414e67cfdf1878e9"
|
||||
integrity sha512-wkRlK9Rte4TU817GDcjlsCoDOxrrnvsNvK609FKyio0EIrmmqjQDz5DB8HbN88CHNZBy5Lh/OBALc03ioWFPuQ==
|
||||
|
||||
react-transition-group@^4.4.1:
|
||||
version "4.4.1"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue