From 779be3edafbee58857ff61da1fa4d0862d76eb38 Mon Sep 17 00:00:00 2001
From: diced-tomato <pranaco2@Gmail.com>
Date: Fri, 16 Oct 2020 08:40:55 -0700
Subject: [PATCH] responsive index

---
 src/pages/index.tsx | 29 ++++++++++++++++++++---------
 src/pages/urls.tsx  |  7 +------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b2b46652..3ee0be01 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,8 +4,10 @@ import Typography from '@material-ui/core/Typography';
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Paper from '@material-ui/core/Paper';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardMedia from '@material-ui/core/CardMedia';
 import UI from '../components/UI';
 import UIPlaceholder from '../components/UIPlaceholder';
 import { makeStyles } from '@material-ui/core';
@@ -64,20 +66,29 @@ export default function Index({ config }: { config: ConfigUploader }) {
               You have <b>{images.length}</b> images
             </Typography>
             <Typography variant='h5'>Recent Images</Typography>
-            <GridList cols={3}>
+            <Grid container spacing={2}>
               {recentImages.map(d => {
                 const t = new URL(window.location.href);
                 t.pathname = `${config ? config.route : '/u'}/${d.file}`;
                 return (
-                  <GridListTile key={d.id} cols={1}>
-                    <img src={t.toString()} />
-                  </GridListTile>
+                  <Grid item key={d.id} xs={12} sm={4}>
+                    <Card>
+                      <CardActionArea>
+                        <CardMedia
+                          component='img'
+                          height='140'
+                          image={t.toString()}
+                        />
+                      </CardActionArea>
+                    </Card>
+                  </Grid>
                 );
               })}
-            </GridList>
+            </Grid>
           </Paper>
-        ) : null}
-      </UI>
+        ) : null
+        }
+      </UI >
     );
   }
   return <UIPlaceholder />;
diff --git a/src/pages/urls.tsx b/src/pages/urls.tsx
index 8035b172..6a35c5f2 100644
--- a/src/pages/urls.tsx
+++ b/src/pages/urls.tsx
@@ -49,11 +49,7 @@ export default function Urls({ config }: { config: ConfigUploader }) {
       }
     };
 
-    useEffect(() => {
-      (async () => {
-        doUrls();
-      })();
-    }, []);
+    useEffect(() => (async () => doUrls())(), []);
 
     const deleteUrl = async (u: URLEntity) => {
       const d = await (await fetch('/api/urls/' + u.id, { method: 'DELETE' })).json();
@@ -113,5 +109,4 @@ export default function Urls({ config }: { config: ConfigUploader }) {
       </UI>
     );
   }
-  return <UIPlaceholder />;
 }