glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-05-15 10:53:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix some sizing on MangaCard

Browse Source
This commit is contained in:
glax 2025-05-08 04:55:06 +02:00
parent 415e6c606f
commit 6aa53f7ca7
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,18 +78,24 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
CoverRef.current.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current); CoverRef.current.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current);
}, [useManga, apiUri]) }, [useManga, apiUri])
const width = "200px"; const width = 200;
const height = "300px"; const height = 300;
const sideSx : SxProps = { const coverSx : SxProps = {
height: height, height: height + "px",
width: width, width: width + "px",
position: "relative", position: "relative",
} }
const cssProps : CSSProperties = { const descriptionSx : SxProps = {
maxHeight: "100%", height: height + "px",
maxWidth: "100%", width: width * 2 + "px",
position: "relative"
}
const coverCss : CSSProperties = {
maxHeight: "calc("+height+"px + 2rem)",
maxWidth: "calc("+width+"px + 2rem)",
} }
const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"]; const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
@ -102,7 +108,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
setExpanded(!expanded)} setExpanded(!expanded)}
}> }>
<CardCover> <CardCover>
<img style={cssProps} src="/blahaj.png" alt="Manga Cover" <img style={coverCss} src="/blahaj.png" alt="Manga Cover"
ref={CoverRef} ref={CoverRef}
onLoad={LoadMangaCover} onLoad={LoadMangaCover}
onResize={LoadMangaCover}/> onResize={LoadMangaCover}/>
@ -112,7 +118,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)', 'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
}}/> }}/>
<CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}> <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
<Box sx={sideSx}> <Box sx={coverSx}>
<Skeleton loading={loading}> <Skeleton loading={loading}>
<Link href={useManga.websiteUrl} level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}> <Link href={useManga.websiteUrl} level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
{useManga.name} {useManga.name}
@ -121,16 +127,16 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
</Box> </Box>
{ {
expanded ? expanded ?
<Box sx={sideSx}> <Box sx={descriptionSx}>
<Skeleton loading={loading} variant={"text"} level={"title-lg"}> <Skeleton loading={loading} variant={"text"} level={"title-lg"}>
<Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:"75px", overflowY:"auto", scrollbarWidth: "thin"}}> <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:height*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
{useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)} {useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
{useManga.tags.map(tag => <Chip key={tag} variant={"soft"} size={"md"} color={"primary"}>{tag}</Chip>)} {useManga.tags.map(tag => <Chip key={tag} variant={"soft"} size={"md"} color={"primary"}>{tag}</Chip>)}
{useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"warning"} />)} {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"warning"} />)}
</Stack> </Stack>
</Skeleton> </Skeleton>
<Skeleton loading={loading} sx={{maxHeight:"300px"}}> <Skeleton loading={loading} sx={{maxHeight:"300px"}}>
<MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:"310px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} /> <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:height*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
</Skeleton> </Skeleton>
</Box> </Box>
: null : null