glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-04-12 14:08:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Styling

Browse Source
This commit is contained in:
glax 2025-04-02 02:17:10 +02:00
parent 5e95c34306
commit 10f48af9fa
4 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import Sheet from '@mui/joy/Sheet';
import './App.css' import './App.css'
import Settings from "./Settings.tsx"; import Settings from "./Settings.tsx";
import Header from "./Header.tsx"; import Header from "./Header.tsx";
import {Badge, Button, Card, CardContent, CardCover, Typography} from "@mui/joy"; import {Badge, Box, Button, Card, CardContent, CardCover, Typography} from "@mui/joy";
import {useState} from "react"; import {useState} from "react";
import {ApiUriContext} from "./api/fetchApi.tsx"; import {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx'; import Search from './Components/Search.tsx';
@ -27,20 +27,24 @@ export default function App () {
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} /> <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
<Search open={showSearch} setOpen={setShowSearch} /> <Search open={showSearch} setOpen={setShowSearch} />
<Sheet className={"app-content"}> <Sheet className={"app-content"}>
<MangaList> <MangaList connected={apiConnected}>
<Card onClick={() => setShowSearch(true)} sx={{height:"400px", width:"300px"}}> <Badge invisible>
<CardCover> <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
<img src={"/blahaj.png"} /> <CardCover sx={{margin:"var(--Card-padding)"}}>
</CardCover> <img src={"/blahaj.png"} style={{height:"400px", width:"300px"}} />
<CardCover sx={{ </CardCover>
background: 'rgba(234, 119, 246, 0.14)', <CardCover sx={{
backdropFilter: 'blur(6.9px)', background: 'rgba(234, 119, 246, 0.14)',
webkitBackdropFilter: 'blur(6.9px)', backdropFilter: 'blur(6.9px)',
}}/> webkitBackdropFilter: 'blur(6.9px)',
<CardContent> }}/>
<Typography level={"h1"}>Search</Typography> <CardContent>
</CardContent> <Box style={{height:"400px", width:"300px"}} >
</Card> <Typography level={"h1"}>Search</Typography>
</Box>
</CardContent>
</Card>
</Badge>
</MangaList> </MangaList>
</Sheet> </Sheet>
</Sheet> </Sheet>

4
tranga-website/src/Components/LinkTag.tsx
View File

@ -16,9 +16,9 @@ export default function LinkTag({linkId, color} : { linkId: string | undefined,
}, [linkId]); }, [linkId]);
return ( return (
<Chip variant={"outlined"} size={"md"} color={color??"primary"}> <Chip variant={"soft"} size={"sm"} color={color??"primary"}>
<Skeleton variant={"text"} loading={loading}> <Skeleton variant={"text"} loading={loading}>
<Link href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link> <Link sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
</Skeleton> </Skeleton>
</Chip> </Chip>
); );

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

@ -108,14 +108,14 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
expanded ? expanded ?
<Box sx={sideSx}> <Box sx={sideSx}>
<Skeleton loading={loading} variant={"text"} level={"title-lg"}> <Skeleton loading={loading} variant={"text"} level={"title-lg"}>
<Stack direction={"row"} flexWrap={"wrap"} spacing={0.5}> <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:"75px", 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={"outlined"} 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={"danger"} />)} {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"}} /> <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:"310px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
</Skeleton> </Skeleton>
</Box> </Box>
: null : null

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

@ -6,13 +6,16 @@ import {JobType} from "../api/types/Jobs/IJob.ts";
import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts"; import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
import {MangaFromId} from "./Manga.tsx"; import {MangaFromId} from "./Manga.tsx";
import { Remove } from "@mui/icons-material"; import { Remove } from "@mui/icons-material";
import * as React from "react";
export default function MangaList({children}: {children?: React.ReactNode} ){ export default function MangaList({connected, children}: {connected: boolean, children?: React.ReactNode} ){
const apiUri = useContext(ApiUriContext); const apiUri = useContext(ApiUriContext);
const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]); const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
const getJobList = useCallback(() => { const getJobList = useCallback(() => {
if(!connected)
return;
GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[])); GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[]));
},[apiUri]); },[apiUri]);
@ -24,6 +27,18 @@ export default function MangaList({children}: {children?: React.ReactNode} ){
getJobList(); getJobList();
}, [apiUri]); }, [apiUri]);
const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
useEffect(() => {
if(!connected){
clearTimeout(timerRef.current);
return;
}else{
timerRef.current = setInterval(() => {
getJobList();
}, 2000);
}
}, [connected,]);
return( return(
<Stack direction="row" spacing={1}> <Stack direction="row" spacing={1}>
{children} {children}