glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-04-26 18:22:26 +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 Settings from "./Settings.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 {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx';
@ -27,20 +27,24 @@ export default function App () {
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
<Search open={showSearch} setOpen={setShowSearch} />
<Sheet className={"app-content"}>
<MangaList>
<Card onClick={() => setShowSearch(true)} sx={{height:"400px", width:"300px"}}>
<CardCover>
<img src={"/blahaj.png"} />
</CardCover>
<CardCover sx={{
background: 'rgba(234, 119, 246, 0.14)',
backdropFilter: 'blur(6.9px)',
webkitBackdropFilter: 'blur(6.9px)',
}}/>
<CardContent>
<Typography level={"h1"}>Search</Typography>
</CardContent>
</Card>
<MangaList connected={apiConnected}>
<Badge invisible>
<Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
<CardCover sx={{margin:"var(--Card-padding)"}}>
<img src={"/blahaj.png"} style={{height:"400px", width:"300px"}} />
</CardCover>
<CardCover sx={{
background: 'rgba(234, 119, 246, 0.14)',
backdropFilter: 'blur(6.9px)',
webkitBackdropFilter: 'blur(6.9px)',
}}/>
<CardContent>
<Box style={{height:"400px", width:"300px"}} >
<Typography level={"h1"}>Search</Typography>
</Box>
</CardContent>
</Card>
</Badge>
</MangaList>
</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]);
return (
<Chip variant={"outlined"} size={"md"} color={color??"primary"}>
<Chip variant={"soft"} size={"sm"} color={color??"primary"}>
<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>
</Chip>
);

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

@ -108,14 +108,14 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
expanded ?
<Box sx={sideSx}>
<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.tags.map(tag => <Chip key={tag} variant={"outlined"} size={"md"} color={"primary"}>{tag}</Chip>)}
{useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"danger"} />)}
{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"}} />
<MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:"310px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
</Skeleton>
</Box>
: 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 {MangaFromId} from "./Manga.tsx";
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 [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
const getJobList = useCallback(() => {
if(!connected)
return;
GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[]));
},[apiUri]);
@ -24,6 +27,18 @@ export default function MangaList({children}: {children?: React.ReactNode} ){
getJobList();
}, [apiUri]);
const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
useEffect(() => {
if(!connected){
clearTimeout(timerRef.current);
return;
}else{
timerRef.current = setInterval(() => {
getJobList();
}, 2000);
}
}, [connected,]);
return(
<Stack direction="row" spacing={1}>
{children}