From 0ff770a98be80675ff0904f2266d1002fcf95fd6 Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Sat, 23 Jan 2021 01:58:18 +0330
Subject: [PATCH] fluid manga grid

---
 webUI/react/src/components/MangaCard.tsx | 39 ++++++++++++------------
 webUI/react/src/components/MangaGrid.tsx |  5 +--
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/webUI/react/src/components/MangaCard.tsx b/webUI/react/src/components/MangaCard.tsx
index d6505b6..24aed2a 100644
--- a/webUI/react/src/components/MangaCard.tsx
+++ b/webUI/react/src/components/MangaCard.tsx
@@ -5,6 +5,7 @@ import CardActionArea from '@material-ui/core/CardActionArea';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import { Link } from 'react-router-dom';
+import { Grid } from '@material-ui/core';
 
 const useStyles = makeStyles({
     root: {
@@ -38,8 +39,6 @@ const useStyles = makeStyles({
 
 interface IProps {
     manga: IManga
-    // eslint-disable-next-line react/no-unused-prop-types, react/require-default-props
-    // ref?: false | React.MutableRefObject<HTMLInputElement | undefined>
 }
 const MangaCard = React.forwardRef((props: IProps, ref) => {
     const {
@@ -50,23 +49,25 @@ const MangaCard = React.forwardRef((props: IProps, ref) => {
     const classes = useStyles();
 
     return (
-        <Link to={`/manga/${id}/`}>
-            <Card className={classes.root} ref={ref}>
-                <CardActionArea>
-                    <div className={classes.wrapper}>
-                        <CardMedia
-                            className={classes.image}
-                            component="img"
-                            alt={title}
-                            image={thumbnailUrl}
-                            title={title}
-                        />
-                        <div className={classes.gradient} />
-                        <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
-                    </div>
-                </CardActionArea>
-            </Card>
-        </Link>
+        <Grid item xs={6} sm={4} md={3} lg={2}>
+            <Link to={`/manga/${id}/`}>
+                <Card className={classes.root} ref={ref}>
+                    <CardActionArea>
+                        <div className={classes.wrapper}>
+                            <CardMedia
+                                className={classes.image}
+                                component="img"
+                                alt={title}
+                                image={thumbnailUrl}
+                                title={title}
+                            />
+                            <div className={classes.gradient} />
+                            <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
+                        </div>
+                    </CardActionArea>
+                </Card>
+            </Link>
+        </Grid>
     );
 });
 
diff --git a/webUI/react/src/components/MangaGrid.tsx b/webUI/react/src/components/MangaGrid.tsx
index 519dd00..db37b2a 100644
--- a/webUI/react/src/components/MangaGrid.tsx
+++ b/webUI/react/src/components/MangaGrid.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import Grid from '@material-ui/core/Grid';
 import MangaCard from './MangaCard';
 
 interface IProps{
@@ -43,9 +44,9 @@ export default function MangaGrid(props: IProps) {
     }
 
     return (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
+        <Grid container spacing={1}>
             {mapped}
-        </div>
+        </Grid>
     );
 }