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

Use mui tooltip for manga titles (#467)

Browse Source
This commit is contained in:
schroda
2023-11-19 22:43:21 +01:00
committed by GitHub
parent dbb4bf70af
commit 99ba45eceb
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/MangaCard.tsx
View File

@@ -10,7 +10,7 @@ import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea'; import CardActionArea from '@mui/material/CardActionArea';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Avatar, Box, CardContent, styled } from '@mui/material'; import { Avatar, Box, CardContent, styled, Tooltip } from '@mui/material';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext'; import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
@@ -159,30 +159,32 @@ export const MangaCard = (props: IProps) => {
<> <>
<BottomGradient /> <BottomGradient />
<BottomGradientDoubledDown /> <BottomGradientDoubledDown />
<GridMangaTitle <Tooltip title={title} placement="top">
sx={{ <GridMangaTitle
color: 'white', sx={{
textShadow: '0px 0px 3px #000000', color: 'white',
}} textShadow: '0px 0px 3px #000000',
title={title} }}
> >
{title} {title}
</GridMangaTitle> </GridMangaTitle>
</Tooltip>
</> </>
)} )}
</CardActionArea> </CardActionArea>
</Card> </Card>
{gridLayout === GridLayout.Comfortable && ( {gridLayout === GridLayout.Comfortable && (
<GridMangaTitle <Tooltip title={title} placement="top">
sx={{ <GridMangaTitle
position: 'relative', sx={{
color: 'text.primary', position: 'relative',
height: '3rem', color: 'text.primary',
}} height: '3rem',
title={title} }}
> >
{title} {title}
</GridMangaTitle> </GridMangaTitle>
</Tooltip>
)} )}
</Box> </Box>
</Link> </Link>
@@ -231,9 +233,9 @@ export const MangaCard = (props: IProps) => {
width: 'min-content', width: 'min-content',
}} }}
> >
<MangaTitle variant="h5" title={title}> <Tooltip title={title} placement="top">
{title} <MangaTitle variant="h5">{title}</MangaTitle>
</MangaTitle> </Tooltip>
</Box> </Box>
<BadgeContainer> <BadgeContainer>
{inLibraryIndicator && inLibrary && ( {inLibraryIndicator && inLibrary && (