glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-21 11:05:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add ToolTip with Text-ReleaseStatus to Manga-Badge

Browse Source
This commit is contained in:
glax
2025-06-17 15:34:02 +02:00
parent e64f325022
commit d785b6e078
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
tranga-website/src/Components/Manga.tsx
View File

@ -1,4 +1,4 @@
import {Badge, Box, Card, CardContent, CardCover, Skeleton, Typography,} from "@mui/joy"; import {Badge, Box, Card, CardContent, CardCover, Skeleton, Tooltip, Typography,} from "@mui/joy";
import IManga from "../api/types/IManga.ts"; import IManga from "../api/types/IManga.ts";
import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react"; import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
import {GetMangaCoverImageUrl} from "../api/Manga.tsx"; import {GetMangaCoverImageUrl} from "../api/Manga.tsx";
@ -31,7 +31,7 @@ export function MangaFromId({mangaId, children} : { mangaId: string, children?:
return ( return (
manga === undefined ? manga === undefined ?
<Badge sx={{margin:"8px !important"}} badgeContent={<Skeleton><img width={"24pt"} height={"24pt"} src={"/blahaj.png"} /></Skeleton>} color={ReleaseStatusToPalette(MangaReleaseStatus.Completed)} size={"lg"}> <Badge sx={{margin:"8px !important"}} badgeContent={<Skeleton><Tooltip title={"Loading"}><img width={"24pt"} height={"24pt"} src={"/blahaj.png"} /></Tooltip></Skeleton>} color={ReleaseStatusToPalette(MangaReleaseStatus.Completed)} size={"lg"}>
<Card sx={{height:"fit-content",width:"fit-content"}}> <Card sx={{height:"fit-content",width:"fit-content"}}>
<CardCover> <CardCover>
<img style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/> <img style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
@ -87,7 +87,7 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
const mangaName = manga.name.length > maxLength ? manga.name.substring(0, maxLength-3) + "..." : manga.name; const mangaName = manga.name.length > maxLength ? manga.name.substring(0, maxLength-3) + "..." : manga.name;
return ( return (
<Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /> : manga.mangaConnectorName} color={ReleaseStatusToPalette(manga.releaseStatus)} size={"lg"}> <Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <Tooltip color={ReleaseStatusToPalette(manga.releaseStatus)} title={manga.releaseStatus}><img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /></Tooltip> : manga.mangaConnectorName} color={ReleaseStatusToPalette(manga.releaseStatus)} size={"lg"}>
<Card sx={{height:"fit-content",width:"fit-content"}} onClick={(e) => { <Card sx={{height:"fit-content",width:"fit-content"}} onClick={(e) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
if(interactiveElements.find(x => x == target.localName) == undefined) if(interactiveElements.find(x => x == target.localName) == undefined)