Skip to content

Commit

Permalink
List layout (#154)
Browse files Browse the repository at this point in the history 
* source layouts

* list layout

Co-authored-by: Aria Moradi <aria.moradi007@gmail.com>
  • Loading branch information
@Robonau @AriaMoradi
Robonau and AriaMoradi authored Mar 6, 2022
1 parent 70b84b8 commit 33c9def
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 69 deletions.
201 changes: 133 additions & 68 deletions src/components/MangaCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';
import { Grid } from '@mui/material';
import { Avatar, CardContent, Grid } from '@mui/material';
import useLocalStorage from 'util/useLocalStorage';
import SpinnerImage from 'components/util/SpinnerImage';
import { Box, styled } from '@mui/system';
Expand Down Expand Up @@ -84,85 +84,150 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const [useCache] = useLocalStorage<boolean>('useCache', true);

return (
<Grid item xs={6} sm={4} md={3} lg={2}>
<Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Card
if (gridLayout !== 2) {
return (
<Grid item xs={6} sm={4} md={3} lg={2}>
<Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
<Box
sx={{
// force standard aspect ratio of manga covers
aspectRatio: '225/350',
display: 'flex',
flexDirection: 'column',
}}
ref={ref}
>
<CardActionArea
<Card
sx={{
position: 'relative',
height: '100%',
// force standard aspect ratio of manga covers
aspectRatio: '225/350',
display: 'flex',
}}
ref={ref}
>
<CardActionArea
sx={{
position: 'relative',
height: '100%',
}}
>

<BadgeContainer>
{ showUnreadBadge && unread! > 0 && (
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</Typography>
)}
{ showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
<BadgeContainer>
{ showUnreadBadge && unread! > 0 && (
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</Typography>
)}
{ showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
}}
>
{downloadCount}
</Typography>
)}
</BadgeContainer>
<SpinnerImage
alt={title}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
imgStyle={{
height: '100%',
width: '100%',
objectFit: 'cover',
}}
spinnerStyle={{
display: 'grid',
placeItems: 'center',
}}
>
{downloadCount}
</Typography>
/>
{(gridLayout === 1) ? (<></>) : (
<>
<BottomGradient />
<BottomGradientDoubledDown />
</>
)}
</BadgeContainer>
<SpinnerImage
alt={title}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
imgStyle={{
height: '100%',
width: '100%',
objectFit: 'cover',
}}
spinnerStyle={{
display: 'grid',
placeItems: 'center',
{(gridLayout === 1) ? (
<></>
) : (
<MangaTitle>
{truncateText(title, 61)}
</MangaTitle>
)}
</CardActionArea>
</Card>
{(gridLayout === 1) ? (
<MangaTitle
sx={{
position: 'relative',
}}
/>
{(gridLayout === 1) ? (<></>) : (
<>
<BottomGradient />
<BottomGradientDoubledDown />
</>
)}
{(gridLayout === 1) ? (
<></>
) : (
<MangaTitle>
{truncateText(title, 61)}
</MangaTitle>
)}
</CardActionArea>
</Card>
{(gridLayout === 1) ? (
<MangaTitle
sx={{
position: 'relative',
}}
>
>
{truncateText(title, 61)}
</MangaTitle>
) : (<></>)}
</Box>
</Link>
</Grid>
);
}
return (
<Grid item xs={12} sm={12} md={12} lg={12}>
<Link to={`/manga/${id}/`} style={{ textDecoration: 'none', color: 'unset' }}>
<CardContent sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 2,
'&:hover': {
backgroundColor: 'action.hover',
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
},
'&:active': {
backgroundColor: 'action.selected',
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
},
position: 'relative',
}}
>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 2,
imageRendering: 'pixelated',
}}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
/>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
flexGrow: 1,
width: 'min-content',
}}
>
<Typography variant="h5" component="h2">
{truncateText(title, 61)}
</MangaTitle>
) : (<></>)}
</Box>
</Typography>
</Box>
<BadgeContainer sx={{ position: 'relative' }}>
{ showUnreadBadge && unread! > 0 && (
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</Typography>
)}
{ showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
}}
>
{downloadCount}
</Typography>
)}
</BadgeContainer>
</CardContent>
</Link>
</Grid>
);
Expand Down
10 changes: 10 additions & 0 deletions src/components/library/LibraryOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,16 @@ function dispalyTab(currentTab: number) {
/>
)}
/>
<FormControlLabel
label="list"
control={(
<Radio
name="2"
checked={options.gridLayout === 2}
onChange={setGridContextOptions}
/>
)}
/>
BADGES
<FormControlLabel
label="Unread Badges"
Expand Down
13 changes: 12 additions & 1 deletion src/components/source/GridLayouts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,18 @@ export default function SourceGridLayout() {
/>
)}
/>

</MenuItem>
<MenuItem onClick={handleClose}>
<FormControlLabel
label="List"
control={(
<Radio
name="2"
checked={options.SourcegridLayout === 2}
onChange={setGridContextOptions}
/>
)}
/>
</MenuItem>
</Menu>

Expand Down

0 comments on commit 33c9def

Please sign in to comment.