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

Cardsizing in const

Browse Source
This commit is contained in:
glax 2025-05-08 05:25:36 +02:00
parent 3ad7fbfad2
commit 03c78f7b6a
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
tranga-website/src/App.tsx
View File

@ -7,6 +7,7 @@ import {useEffect, useState} from "react";
import {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx';
import MangaList from "./Components/MangaList.tsx";
import {CardHeight, CardWidth} from "./Components/Manga.tsx";
export default function App () {
@ -37,7 +38,7 @@ export default function App () {
<Badge invisible sx={{margin: "8px !important"}}>
<Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
<CardCover sx={{margin:"var(--Card-padding)"}}>
<img src={"/blahaj.png"} style={{height:"300px", width:"200px"}} />
<img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + "px"}} />
</CardCover>
<CardCover sx={{
background: 'rgba(234, 119, 246, 0.14)',
@ -45,7 +46,7 @@ export default function App () {
webkitBackdropFilter: 'blur(6.9px)',
}}/>
<CardContent>
<Box style={{height:"300px", width:"200px"}} >
<Box style={{height: CardHeight + "px", width: CardWidth + "px"}} >
<Typography level={"h1"}>Search</Typography>
</Box>
</CardContent>

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

@ -40,6 +40,9 @@ export function MangaFromId({mangaId, children} : { mangaId: string, children?:
return <Manga manga={manga} loading={loading} children={children} />
}
export const CardWidth = 190;
export const CardHeight = 300;
export function Manga({manga, children, loading} : { manga: IManga | undefined, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined, loading?: boolean}) {
const useManga = manga ?? DefaultManga;
loading = loading ?? false;
@ -78,24 +81,21 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
CoverRef.current.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current);
}, [useManga, apiUri])
const width = 200;
const height = 300;
const coverSx : SxProps = {
height: height + "px",
width: width + "px",
height: CardHeight + "px",
width: CardWidth + "px",
position: "relative",
}
const descriptionSx : SxProps = {
height: height + "px",
width: width * 2 + "px",
height: CardHeight + "px",
width: CardWidth * 2 + "px",
position: "relative"
}
const coverCss : CSSProperties = {
maxHeight: "calc("+height+"px + 2rem)",
maxWidth: "calc("+width+"px + 2rem)",
maxHeight: "calc("+CardHeight+"px + 2rem)",
maxWidth: "calc("+CardWidth+"px + 2rem)",
}
const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
@ -129,14 +129,14 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
expanded ?
<Box sx={descriptionSx}>
<Skeleton loading={loading} variant={"text"} level={"title-lg"}>
<Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:height*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
<Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
{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.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"warning"} />)}
</Stack>
</Skeleton>
<Skeleton loading={loading} sx={{maxHeight:"300px"}}>
<MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:height*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
<MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
</Skeleton>
</Box>
: null