Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2025-01-24 14:31:13 +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 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>
);
});

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

@ -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>
);
}