ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better UI on mobile for SourceCard

Browse Source
This commit is contained in:
Aria Moradi
2021-09-09 20:43:13 +04:30
parent 3154247300
commit 2e96dcedb3
2 changed files with 116 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/manga/MangaGrid.tsx
View File

@@ -44,9 +44,20 @@ export default function MangaGrid(props: IProps) {
} else {
mapped = mangas.map((it, idx) => {
if (idx === mangas.length - 1) {
return <MangaCard manga={it} ref={lastManga} />;
return (
<MangaCard
key={it.id}
manga={it}
ref={lastManga}
/>
);
}
return <MangaCard manga={it} />;
return (
<MangaCard
key={it.id}
manga={it}
/>
);
});
}

129
src/components/manga/SourceCard.tsx
View File

@@ -6,10 +6,15 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react';
import { useTheme } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import { Link, useHistory } from 'react-router-dom';
import SearchIcon from '@mui/icons-material/Search';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import useLocalStorage from 'util/useLocalStorage';
@@ -41,6 +46,26 @@ const useStyles = makeStyles((theme) => ({
},
card: {
margin: '10px',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.2)',
transition: 'background-color 0ms ease',
},
'&:active': {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
transition: 'background-color 100ms ease-out',
},
},
showMobile: {
display: 'flex',
[theme.breakpoints.up('sm')]: {
display: 'none',
},
},
showBigger: {
display: 'flex',
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
}));
@@ -56,39 +81,91 @@ export default function SourceCard(props: IProps) {
},
} = props;
const theme = useTheme();
const history = useHistory();
const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const classes = useStyles();
return (
<Card className={classes.card}>
<CardContent className={classes.root}>
<div style={{ display: 'flex' }}>
<Avatar
variant="rounded"
className={classes.icon}
alt={name}
src={serverAddress + iconUrl}
/>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="h5" component="h2">
{name}
</Typography>
<Typography variant="caption" display="block" gutterBottom>
{langCodeToName(lang)}
</Typography>
<Link
to={`/sources/${id}/popular/`}
style={{
textDecoration: 'none',
color: theme.palette.text.primary,
}}
>
<CardContent className={classes.root}>
<div style={{ display: 'flex' }}>
<Avatar
variant="rounded"
className={classes.icon}
alt={name}
src={serverAddress + iconUrl}
/>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="h5" component="h2">
{name}
</Typography>
<Typography variant="caption" display="block" gutterBottom>
{langCodeToName(lang)}
</Typography>
</div>
</div>
</div>
<div style={{ display: 'flex' }}>
{/* {isConfigurable &&
<Button variant="outlined" style={{ marginLeft: 20 }} onClick={()
=> { window.location.href = `/sources/${id}/configure/`;
}}>Configure</Button>} */}
<Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/search/`; }}>Search</Button>
{supportsLatest && <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/latest/`; }}>Latest</Button>}
<Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/popular/`; }}>Browse</Button>
</div>
</CardContent>
<div>
<div className={classes.showMobile}>
<IconButton
style={{ width: 59, height: 59 }}
onClick={() => history.push(`/sources/${id}/search/`)}
size="large"
edge="end"
>
<SearchIcon
fontSize="medium"
/>
</IconButton>
{supportsLatest && (
<IconButton
onClick={() => history.push(`/sources/${id}/latest/`)}
size="large"
>
<FiberNewOutlinedIcon
fontSize="large"
/>
</IconButton>
)}
</div>
<div className={classes.showBigger}>
<Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={() => history.push(`/sources/${id}/search/`)}
>
Search
</Button>
{supportsLatest && (
<Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={() => history.push(`/sources/${id}/latest/`)}
>
Latest
</Button>
)}
<Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={() => history.push(`/sources/${id}/popular/`)}
>
Browse
</Button>
</div>
</div>
</CardContent>
</Link>
</Card>
);
}