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

Fix source/extension repo url word break

Browse Source
This commit is contained in:
schroda
2025-04-25 00:27:28 +02:00
parent 24629407cb
commit b503ab07e9
2 changed files with 67 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/modules/extension/components/ExtensionCard.tsx
View File

@@ -12,10 +12,10 @@ import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar'; import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
import Stack from '@mui/material/Stack';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts'; import { makeToast } from '@/modules/core/utils/Toast.ts';
@@ -147,49 +147,27 @@ export function ExtensionCard(props: IProps) {
src={requestManager.getValidImgUrlFor(iconUrl)} src={requestManager.getValidImgUrlFor(iconUrl)}
/> />
</Avatar> </Avatar>
<Box <Stack
sx={{ sx={{
display: 'flex', justifyContent: 'center',
flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
flexShrink: 1, flexShrink: 1,
wordBreak: 'break-word', wordBreak: 'break-word',
justifyContent: 'center',
}} }}
> >
<Typography variant="h6" component="h3"> <Typography variant="h6" component="h3">
{name} {name}
</Typography> </Typography>
<Typography <Typography variant="caption">
variant="caption"
sx={{
display: 'block',
}}
>
{langPress} {versionName} {langPress} {versionName}
{isNsfw && ( {isNsfw && (
<Typography <Typography variant="caption" color="error">
variant="caption"
color="error"
sx={{
display: 'inline',
}}
>
{' 18+'} {' 18+'}
</Typography> </Typography>
)} )}
</Typography> </Typography>
{showSourceRepo && ( {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
<Typography </Stack>
variant="caption"
sx={{
display: 'block',
}}
>
{repo}
</Typography>
)}
</Box>
{isInstalled && ( {isInstalled && (
<CustomTooltip title={t('settings.title')}> <CustomTooltip title={t('settings.title')}>
<IconButton onClick={showOptions} color="inherit"> <IconButton onClick={showOptions} color="inherit">

145
src/modules/source/components/SourceCard.tsx
View File

@@ -7,7 +7,6 @@
*/ */
import CardActionArea from '@mui/material/CardActionArea'; import CardActionArea from '@mui/material/CardActionArea';
import Box from '@mui/material/Box';
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';
@@ -65,95 +64,71 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
<CardContent <CardContent
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: 1.5, gap: 1,
p: 1.5,
}} }}
> >
<Box sx={{ display: 'flex', alignItems: 'center' }}> <Avatar
<Avatar variant="rounded"
variant="rounded" alt={sourceName}
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
background: 'transparent',
}}
>
<SpinnerImage
spinnerStyle={{ small: true }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
alt={sourceName} alt={sourceName}
sx={{ src={requestManager.getValidImgUrlFor(iconUrl)}
width: 56, />
height: 56, </Avatar>
flex: '0 0 auto', <Stack
mr: 1, sx={{
background: 'transparent', justifyContent: 'center',
}} flexGrow: 1,
> flexShrink: 1,
<SpinnerImage wordBreak: 'break-word',
spinnerStyle={{ small: true }} }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }} >
alt={sourceName} <Typography variant="h6" component="h3">
src={requestManager.getValidImgUrlFor(iconUrl)} {sourceName}
/> </Typography>
</Avatar> <Typography variant="caption">
<Box {translateExtensionLanguage(lang)}
sx={{ {isNsfw && (
display: 'flex', <Typography variant="caption" color="error">
flexDirection: 'column', {' 18+'}
justifyContent: 'center', </Typography>
}} )}
> </Typography>
<Typography variant="h6" component="h3"> {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
{sourceName}
</Typography>
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{translateExtensionLanguage(lang)}
{isNsfw && (
<Typography
variant="caption"
color="error"
sx={{
display: 'inline',
}}
>
{' 18+'}
</Typography>
)}
{showSourceRepo && (
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{repo}
</Typography>
)}
</Typography>
</Box>
</Box>
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
{supportsLatest && (
<Button
{...MUIUtil.preventRippleProp()}
variant="outlined"
component={Link}
to={AppRoutes.sources.childRoutes.browse.path(id)}
state={{ contentType: SourceContentType.LATEST, clearCache: true }}
>
{t('global.button.latest')}
</Button>
)}
{!isMobileWidth && (
<Button
{...MUIUtil.preventRippleProp()}
variant="outlined"
component={Link}
to={AppRoutes.sources.childRoutes.browse.path(id)}
state={{ contentType: SourceContentType.POPULAR, clearCache: true }}
>
{t('global.button.popular')}
</Button>
)}
</Stack> </Stack>
{supportsLatest && (
<Button
{...MUIUtil.preventRippleProp()}
variant="outlined"
component={Link}
to={AppRoutes.sources.childRoutes.browse.path(id)}
state={{ contentType: SourceContentType.LATEST, clearCache: true }}
>
{t('global.button.latest')}
</Button>
)}
{!isMobileWidth && (
<Button
{...MUIUtil.preventRippleProp()}
variant="outlined"
component={Link}
to={AppRoutes.sources.childRoutes.browse.path(id)}
state={{ contentType: SourceContentType.POPULAR, clearCache: true }}
>
{t('global.button.popular')}
</Button>
)}
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
</Card> </Card>