Fix gallary gird.

src/pages/gallery/components/PreviewCard.tsx

@@ -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'};

src/pages/gallery/index.tsx

@@ -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>
                             );

yarn.lock

@@ -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"