From 5d484b012c9a7714773fc2faae5dd95614463cff Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Thu, 18 Mar 2021 22:55:17 +0330
Subject: [PATCH] new layout for manga page for >md

---
 webUI/react/src/components/MangaDetails.tsx | 20 +++++------
 webUI/react/src/screens/Manga.tsx           | 37 +++++++++++++++++----
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/webUI/react/src/components/MangaDetails.tsx b/webUI/react/src/components/MangaDetails.tsx
index 723761e..ae9d3e3 100644
--- a/webUI/react/src/components/MangaDetails.tsx
+++ b/webUI/react/src/components/MangaDetails.tsx
@@ -18,15 +18,15 @@ import CategorySelect from './CategorySelect';
 const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
     root: {
         width: '100%',
-        [theme.breakpoints.up('md')]: {
-            display: 'flex',
-        },
+        // [theme.breakpoints.up('md')]: {
+        //     display: 'flex',
+        // },
     },
     top: {
         padding: '10px',
-        [theme.breakpoints.up('md')]: {
-            minWidth: '50%',
-        },
+        // [theme.breakpoints.up('md')]: {
+        //     minWidth: '50%',
+        // },
     },
     leftRight: {
         display: 'flex',
@@ -39,9 +39,9 @@ const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
             height: 'auto',
         },
         maxWidth: '50%',
-        [theme.breakpoints.up('md')]: {
-            minWidth: '100px',
-        },
+        // [theme.breakpoints.up('md')]: {
+        //     minWidth: '100px',
+        // },
     },
     rightSide: {
         marginLeft: 15,
@@ -76,7 +76,7 @@ const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
         paddingRight: '10px',
         [theme.breakpoints.up('md')]: {
             fontSize: '1.2em',
-            maxWidth: '50%',
+            // maxWidth: '50%',
         },
         [theme.breakpoints.up('lg')]: {
             fontSize: '1.3em',
diff --git a/webUI/react/src/screens/Manga.tsx b/webUI/react/src/screens/Manga.tsx
index a212ab5..3196ab2 100644
--- a/webUI/react/src/screens/Manga.tsx
+++ b/webUI/react/src/screens/Manga.tsx
@@ -1,15 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useEffect, useState, useContext } from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { useParams } from 'react-router-dom';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import ChapterCard from '../components/ChapterCard';
 import MangaDetails from '../components/MangaDetails';
 import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 
+const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+        },
+    },
+
+    loading: {
+        margin: '10px 0',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+}));
+
 export default function Manga() {
+    const classes = useStyles();
+
     const { setTitle } = useContext(NavbarContext);
     useEffect(() => { setTitle('Manga'); }, []); // delegate setting topbar action to MangaDetails
 
@@ -33,16 +52,22 @@ export default function Manga() {
             .then((data) => setChapters(data));
     }, []);
 
-    const chapterCards = chapters.map((chapter) => (
-        <ol style={{ listStyle: 'none', padding: 0 }}>
-            <ChapterCard chapter={chapter} />
+    const chapterCards = (
+        <ol style={{ listStyle: 'none', padding: 0, width: '100%' }}>
+            {chapters.length === 0
+            && (
+                <div className={classes.loading}>
+                    <CircularProgress thickness={5} />
+                </div>
+            ) }
+            {chapters.map((chapter) => (<ChapterCard chapter={chapter} />))}
         </ol>
-    ));
+    );
 
     return (
-        <>
+        <div className={classes.root}>
             {manga && <MangaDetails manga={manga} />}
             {chapterCards}
-        </>
+        </div>
     );
 }