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

Make Manga-Cards smaller,

Browse Source 
Manga-Cover covers whole Card
This commit is contained in:
glax 2025-05-08 04:40:09 +02:00
parent 178e8b72f3
commit 415e6c606f
4 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,7 @@ export default function App () {
<Badge invisible> <Badge invisible>
<Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}> <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
<CardCover sx={{margin:"var(--Card-padding)"}}> <CardCover sx={{margin:"var(--Card-padding)"}}>
<img src={"/blahaj.png"} style={{height:"400px", width:"300px"}} /> <img src={"/blahaj.png"} style={{height:"300px", width:"200px"}} />
</CardCover> </CardCover>
<CardCover sx={{ <CardCover sx={{
background: 'rgba(234, 119, 246, 0.14)', background: 'rgba(234, 119, 246, 0.14)',
@ -39,7 +39,7 @@ export default function App () {
webkitBackdropFilter: 'blur(6.9px)', webkitBackdropFilter: 'blur(6.9px)',
}}/> }}/>
<CardContent> <CardContent>
<Box style={{height:"400px", width:"300px"}} > <Box style={{height:"300px", width:"200px"}} >
<Typography level={"h1"}>Search</Typography> <Typography level={"h1"}>Search</Typography>
</Box> </Box>
</CardContent> </CardContent>

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

@ -12,7 +12,7 @@ import {
Typography Typography
} from "@mui/joy"; } from "@mui/joy";
import IManga, {DefaultManga} from "../api/types/IManga.ts"; import IManga, {DefaultManga} from "../api/types/IManga.ts";
import {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react"; import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
import {GetLatestChapterAvailable, GetMangaById, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx"; import {GetLatestChapterAvailable, GetMangaById, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
import {ApiUriContext} from "../api/fetchApi.tsx"; import {ApiUriContext} from "../api/fetchApi.tsx";
import AuthorTag from "./AuthorTag.tsx"; import AuthorTag from "./AuthorTag.tsx";
@ -78,12 +78,20 @@ 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 height = "300px";
const sideSx : SxProps = { const sideSx : SxProps = {
height: "400px", height: height,
width: "300px", width: width,
position: "relative", position: "relative",
} }
const cssProps : CSSProperties = {
maxHeight: "100%",
maxWidth: "100%",
}
const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"]; const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
return ( return (
@ -93,8 +101,8 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
if(interactiveElements.find(x => x == target.localName) == undefined) if(interactiveElements.find(x => x == target.localName) == undefined)
setExpanded(!expanded)} setExpanded(!expanded)}
}> }>
<CardCover sx={{margin: "var(--Card-padding)"}}> <CardCover>
<img style={{maxHeight:"100%",height:"400px",width:"300px"}} src="/blahaj.png" alt="Manga Cover" <img style={cssProps} src="/blahaj.png" alt="Manga Cover"
ref={CoverRef} ref={CoverRef}
onLoad={LoadMangaCover} onLoad={LoadMangaCover}
onResize={LoadMangaCover}/> onResize={LoadMangaCover}/>
@ -106,7 +114,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
<CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}> <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
<Box sx={sideSx}> <Box sx={sideSx}>
<Skeleton loading={loading}> <Skeleton loading={loading}>
<Link href={useManga.websiteUrl} level={"h1"} 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}
</Link> </Link>
</Skeleton> </Skeleton>

2
tranga-website/src/Components/MangaList.tsx
View File

@ -40,7 +40,7 @@ export default function MangaList({connected, children}: {connected: boolean, ch
}, [connected,]); }, [connected,]);
return( return(
<Stack direction="row" spacing={1}> <Stack direction="row" spacing={1} flexWrap={"wrap"}>
{children} {children}
{jobList.map((job) => ( {jobList.map((job) => (
<MangaFromId key={job.mangaId} mangaId={job.mangaId}> <MangaFromId key={job.mangaId} mangaId={job.mangaId}>

2
tranga-website/src/Components/Search.tsx
View File

@ -145,7 +145,7 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
</StepIndicator>}> </StepIndicator>}>
<Typography endDecorator={<Chip size={"sm"} color={"primary"}>{results.length}</Chip>}>Results</Typography> <Typography endDecorator={<Chip size={"sm"} color={"primary"}>{results.length}</Chip>}>Results</Typography>
<Skeleton loading={resultsLoading}> <Skeleton loading={resultsLoading}>
<Stack direction={"row"} spacing={1}> <Stack direction={"row"} spacing={1} flexWrap={"wrap"}>
{results.map((result) => {results.map((result) =>
<Manga key={result.mangaId} manga={result}> <Manga key={result.mangaId} manga={result}>
<Select <Select