Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2025-02-03 11:02:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fluid manga grid

Browse Source
This commit is contained in:
Aria Moradi 2021-01-23 01:58:18 +03:30
parent ed7bb408a3
commit 0ff770a98b
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
webUI/react/src/components/MangaCard.tsx
View File

@ -5,6 +5,7 @@ import CardActionArea from '@material-ui/core/CardActionArea';
import CardMedia from '@material-ui/core/CardMedia'; import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Grid } from '@material-ui/core';
const useStyles = makeStyles({ const useStyles = makeStyles({
root: { root: {
@ -38,8 +39,6 @@ const useStyles = makeStyles({
interface IProps { interface IProps {
manga: IManga 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 MangaCard = React.forwardRef((props: IProps, ref) => {
const { const {
@ -50,23 +49,25 @@ const MangaCard = React.forwardRef((props: IProps, ref) => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<Link to={`/manga/${id}/`}> <Grid item xs={6} sm={4} md={3} lg={2}>
<Card className={classes.root} ref={ref}> <Link to={`/manga/${id}/`}>
<CardActionArea> <Card className={classes.root} ref={ref}>
<div className={classes.wrapper}> <CardActionArea>
<CardMedia <div className={classes.wrapper}>
className={classes.image} <CardMedia
component="img" className={classes.image}
alt={title} component="img"
image={thumbnailUrl} alt={title}
title={title} image={thumbnailUrl}
/> title={title}
<div className={classes.gradient} /> />
<Typography className={classes.title} variant="h5" component="h2">{title}</Typography> <div className={classes.gradient} />
</div> <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
</CardActionArea> </div>
</Card> </CardActionArea>
</Link> </Card>
</Link>
</Grid>
); );
}); });

5
webUI/react/src/components/MangaGrid.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import Grid from '@material-ui/core/Grid';
import MangaCard from './MangaCard'; import MangaCard from './MangaCard';
interface IProps{ interface IProps{
@ -43,9 +44,9 @@ export default function MangaGrid(props: IProps) {
} }
return ( return (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}> <Grid container spacing={1}>
{mapped} {mapped}
</div> </Grid>
); );
} }