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

Update source card styling

Browse Source
This commit is contained in:
schroda
2024-08-30 21:32:21 +02:00
parent 299d3c111c
commit 4aed3ffa78
1 changed files with 24 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/SourceCard.tsx
View File

@@ -8,7 +8,6 @@
import CardActionArea from '@mui/material/CardActionArea'; import CardActionArea from '@mui/material/CardActionArea';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar'; import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
@@ -17,29 +16,13 @@ import Typography from '@mui/material/Typography';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { translateExtensionLanguage } from '@/screens/util/Extensions'; import { translateExtensionLanguage } from '@/screens/util/Extensions';
import { SourceContentType } from '@/screens/SourceMangas'; import { SourceContentType } from '@/screens/SourceMangas';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx'; import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
import { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts'; import { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
const MobileWidthButtons = styled('div')(({ theme }) => ({
display: 'flex',
[theme.breakpoints.up('sm')]: {
display: 'none',
},
}));
const WiderWidthButtons = styled('div')(({ theme }) => ({
display: 'flex',
[theme.breakpoints.down('sm')]: {
display: 'none',
},
'& .MuiButton-root': {
marginLeft: '20px',
},
}));
interface IProps { interface IProps {
source: GetSourcesListQuery['sources']['nodes'][number]; source: GetSourcesListQuery['sources']['nodes'][number];
@@ -49,6 +32,8 @@ interface IProps {
export const SourceCard: React.FC<IProps> = (props: IProps) => { export const SourceCard: React.FC<IProps> = (props: IProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const isMobileWidth = MediaQuery.useIsMobileWidth();
const { const {
source: { source: {
id, id,
@@ -65,7 +50,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
return ( return (
<Card <Card
sx={{ sx={{
margin: '10px', margin: 1,
marginTop: 0, marginTop: 0,
}} }}
> >
@@ -79,7 +64,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: 2, padding: 1.5,
}} }}
> >
<Box sx={{ display: 'flex', alignItems: 'center' }}> <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -90,7 +75,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
width: 56, width: 56,
height: 56, height: 56,
flex: '0 0 auto', flex: '0 0 auto',
mr: 2, mr: 1,
background: 'transparent', background: 'transparent',
}} }}
> >
@@ -108,14 +93,14 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<Typography variant="h5" component="h2"> <Typography variant="h6" component="h3">
{name} {name}
</Typography> </Typography>
{id !== '0' && ( {id !== '0' && (
<Typography variant="caption" display="block" gutterBottom> <Typography variant="caption" display="block">
{translateExtensionLanguage(lang)} {translateExtensionLanguage(lang)}
{isNsfw && ( {isNsfw && (
<Typography variant="caption" display="inline" gutterBottom color="red"> <Typography variant="caption" display="inline" color="error">
{' 18+'} {' 18+'}
</Typography> </Typography>
)} )}
@@ -128,30 +113,18 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
)} )}
</Box> </Box>
</Box> </Box>
<> <Stack sx={{ flexDirection: 'row', gap: 1 }}>
<MobileWidthButtons> {supportsLatest && (
{supportsLatest && ( <Button
<Button variant="outlined"
variant="outlined" component={Link}
component={Link} to={`/sources/${id}`}
to={`/sources/${id}`} state={{ contentType: SourceContentType.LATEST, clearCache: true }}
state={{ contentType: SourceContentType.LATEST, clearCache: true }} >
> {t('global.button.latest')}
{t('global.button.latest')} </Button>
</Button> )}
)} {!isMobileWidth && (
</MobileWidthButtons>
<WiderWidthButtons>
{supportsLatest && (
<Button
variant="outlined"
component={Link}
to={`/sources/${id}`}
state={{ contentType: SourceContentType.LATEST, clearCache: true }}
>
{t('global.button.latest')}
</Button>
)}
<Button <Button
variant="outlined" variant="outlined"
component={Link} component={Link}
@@ -160,8 +133,8 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
> >
{t('global.button.popular')} {t('global.button.popular')}
</Button> </Button>
</WiderWidthButtons> )}
</> </Stack>
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
</Card> </Card>