temple/Suwayomi-Server
1
0
Fork 0
mirror of https://github.com/Suwayomi/Suwayomi-Server.git synced 2026-07-02 18:34:39 -05: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
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>
);
});