Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2024-12-24 15:51:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

new layout for manga page for >md

Browse Source
This commit is contained in:
Aria Moradi 2021-03-18 22:55:17 +03:30
parent 436a8d0585
commit 5d484b012c
2 changed files with 41 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webUI/react/src/components/MangaDetails.tsx
View File

@ -18,15 +18,15 @@ import CategorySelect from './CategorySelect';
const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({ const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
root: { root: {
width: '100%', width: '100%',
[theme.breakpoints.up('md')]: { // [theme.breakpoints.up('md')]: {
display: 'flex', // display: 'flex',
}, // },
}, },
top: { top: {
padding: '10px', padding: '10px',
[theme.breakpoints.up('md')]: { // [theme.breakpoints.up('md')]: {
minWidth: '50%', // minWidth: '50%',
}, // },
}, },
leftRight: { leftRight: {
display: 'flex', display: 'flex',
@ -39,9 +39,9 @@ const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
height: 'auto', height: 'auto',
}, },
maxWidth: '50%', maxWidth: '50%',
[theme.breakpoints.up('md')]: { // [theme.breakpoints.up('md')]: {
minWidth: '100px', // minWidth: '100px',
}, // },
}, },
rightSide: { rightSide: {
marginLeft: 15, marginLeft: 15,
@ -76,7 +76,7 @@ const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
paddingRight: '10px', paddingRight: '10px',
[theme.breakpoints.up('md')]: { [theme.breakpoints.up('md')]: {
fontSize: '1.2em', fontSize: '1.2em',
maxWidth: '50%', // maxWidth: '50%',
}, },
[theme.breakpoints.up('lg')]: { [theme.breakpoints.up('lg')]: {
fontSize: '1.3em', fontSize: '1.3em',

37
webUI/react/src/screens/Manga.tsx
View File

@ -1,15 +1,34 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/* This Source Code Form is subject to the terms of the Mozilla Public /* 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 * 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/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect, useState, useContext } from 'react'; import React, { useEffect, useState, useContext } from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import CircularProgress from '@material-ui/core/CircularProgress';
import ChapterCard from '../components/ChapterCard'; import ChapterCard from '../components/ChapterCard';
import MangaDetails from '../components/MangaDetails'; import MangaDetails from '../components/MangaDetails';
import NavbarContext from '../context/NavbarContext'; import NavbarContext from '../context/NavbarContext';
import client from '../util/client'; 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() { export default function Manga() {
const classes = useStyles();
const { setTitle } = useContext(NavbarContext); const { setTitle } = useContext(NavbarContext);
useEffect(() => { setTitle('Manga'); }, []); // delegate setting topbar action to MangaDetails useEffect(() => { setTitle('Manga'); }, []); // delegate setting topbar action to MangaDetails
@ -33,16 +52,22 @@ export default function Manga() {
.then((data) => setChapters(data)); .then((data) => setChapters(data));
}, []); }, []);
const chapterCards = chapters.map((chapter) => ( const chapterCards = (
<ol style={{ listStyle: 'none', padding: 0 }}> <ol style={{ listStyle: 'none', padding: 0, width: '100%' }}>
<ChapterCard chapter={chapter} /> {chapters.length === 0
&& (
<div className={classes.loading}>
<CircularProgress thickness={5} />
</div>
) }
{chapters.map((chapter) => (<ChapterCard chapter={chapter} />))}
</ol> </ol>
)); );
return ( return (
<> <div className={classes.root}>
{manga && <MangaDetails manga={manga} />} {manga && <MangaDetails manga={manga} />}
{chapterCards} {chapterCards}
</> </div>
); );
} }