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

Search Styling

Browse Source
This commit is contained in:
glax 2025-04-02 01:18:49 +02:00
parent 99265bacb2
commit 19e033995d
3 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
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} from "@mui/joy";
import {Badge, Button, Card, CardContent, CardCover, Typography} from "@mui/joy";
import {useState} from "react";
import {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx';
@ -23,12 +23,25 @@ export default function App () {
<Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
<Button onClick={() => setShowSettings(true)}>Settings</Button>
</Badge>
<Button onClick={() => setShowSearch(true)}>Search</Button>
</Header>
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
<Search open={showSearch} setOpen={setShowSearch} />
<Sheet className={"app-content"}>
<MangaList />
<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>
</Sheet>
</Sheet>
</ApiUriContext.Provider>

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

@ -7,7 +7,7 @@ import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableC
import {MangaFromId} from "./Manga.tsx";
import { Remove } from "@mui/icons-material";
export default function MangaList(){
export default function MangaList({children}: {children?: React.ReactNode} ){
const apiUri = useContext(ApiUriContext);
const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
@ -26,6 +26,7 @@ export default function MangaList(){
return(
<Stack direction="row" spacing={1}>
{children}
{jobList.map((job) => (
<MangaFromId key={job.mangaId} mangaId={job.mangaId}>
<Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>

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

@ -48,6 +48,7 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
const [resultsLoading, setResultsLoading] = useState<boolean>(false);
const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{
setStep(3);
if(mangaConnector === undefined)
return;
setResults([]);
@ -92,19 +93,20 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
// @ts-ignore
return (
<Drawer size={"lg"} anchor={"right"} open={open} onClose={() => {
setStep(2);
setStep(1);
setResults([]);
setOpen(false);
}}>
<ModalClose />
<Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}>
<Step indicator={
<StepIndicator variant="solid" color="primary">
<StepIndicator variant={step==1?"solid":"outlined"} color={mangaConnectors.length < 1 ? "danger" : "primary"}>
1
</StepIndicator>}>
<Skeleton loading={mangaConnectorsLoading}>
<Select
disabled={mangaConnectorsLoading || resultsLoading}
color={mangaConnectors.length < 1 ? "danger" : "neutral"}
disabled={mangaConnectorsLoading || resultsLoading || mangaConnectors.length < 1}
placeholder={"Select Connector"}
slotProps={{
listbox: {
@ -119,13 +121,13 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
setStep(2);
setSelectedMangaConnector(mangaConnectors.find((o) => o.name === newValue));
}}
endDecorator={<Chip size={"sm"} color={"primary"}>{mangaConnectors.length}</Chip>}>
endDecorator={<Chip size={"sm"} color={mangaConnectors.length < 1 ? "danger" : "primary"}>{mangaConnectors.length}</Chip>}>
{mangaConnectors?.map((connector: IMangaConnector) => ConnectorOption(connector))}
</Select>
</Skeleton>
</Step>
<Step indicator={
<StepIndicator variant="solid" color="primary">
<StepIndicator variant={step==2?"solid":"outlined"} color="primary">
2
</StepIndicator>}>
<Input disabled={step < 2 || resultsLoading} placeholder={"Name or Url " + (selectedMangaConnector ? selectedMangaConnector.baseUris[0] : "")} onKeyDown={(e) => {
@ -137,7 +139,7 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
}}/>
</Step>
<Step indicator={
<StepIndicator variant="solid" color="primary">
<StepIndicator variant={step==3?"solid":"outlined"} color="primary">
3
</StepIndicator>}>
<Typography endDecorator={<Chip size={"sm"} color={"primary"}>{results.length}</Chip>}>Results</Typography>