glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-04-19 14:53:20 +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 './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} from "@mui/joy"; import {Badge, 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';
@ -23,12 +23,25 @@ export default function App () {
<Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}> <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
<Button onClick={() => setShowSettings(true)}>Settings</Button> <Button onClick={() => setShowSettings(true)}>Settings</Button>
</Badge> </Badge>
<Button onClick={() => setShowSearch(true)}>Search</Button>
</Header> </Header>
<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>
<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>
</Sheet> </Sheet>
</ApiUriContext.Provider> </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 {MangaFromId} from "./Manga.tsx";
import { Remove } from "@mui/icons-material"; import { Remove } from "@mui/icons-material";
export default function MangaList(){ export default function MangaList({children}: {children?: React.ReactNode} ){
const apiUri = useContext(ApiUriContext); const apiUri = useContext(ApiUriContext);
const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]); const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
@ -26,6 +26,7 @@ export default function MangaList(){
return( return(
<Stack direction="row" spacing={1}> <Stack direction="row" spacing={1}>
{children}
{jobList.map((job) => ( {jobList.map((job) => (
<MangaFromId key={job.mangaId} mangaId={job.mangaId}> <MangaFromId key={job.mangaId} mangaId={job.mangaId}>
<Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button> <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 [resultsLoading, setResultsLoading] = useState<boolean>(false);
const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{ const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{
setStep(3);
if(mangaConnector === undefined) if(mangaConnector === undefined)
return; return;
setResults([]); setResults([]);
@ -92,19 +93,20 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
// @ts-ignore // @ts-ignore
return ( return (
<Drawer size={"lg"} anchor={"right"} open={open} onClose={() => { <Drawer size={"lg"} anchor={"right"} open={open} onClose={() => {
setStep(2); setStep(1);
setResults([]); setResults([]);
setOpen(false); setOpen(false);
}}> }}>
<ModalClose /> <ModalClose />
<Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}> <Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}>
<Step indicator={ <Step indicator={
<StepIndicator variant="solid" color="primary"> <StepIndicator variant={step==1?"solid":"outlined"} color={mangaConnectors.length < 1 ? "danger" : "primary"}>
1 1
</StepIndicator>}> </StepIndicator>}>
<Skeleton loading={mangaConnectorsLoading}> <Skeleton loading={mangaConnectorsLoading}>
<Select <Select
disabled={mangaConnectorsLoading || resultsLoading} color={mangaConnectors.length < 1 ? "danger" : "neutral"}
disabled={mangaConnectorsLoading || resultsLoading || mangaConnectors.length < 1}
placeholder={"Select Connector"} placeholder={"Select Connector"}
slotProps={{ slotProps={{
listbox: { listbox: {
@ -119,13 +121,13 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
setStep(2); setStep(2);
setSelectedMangaConnector(mangaConnectors.find((o) => o.name === newValue)); 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))} {mangaConnectors?.map((connector: IMangaConnector) => ConnectorOption(connector))}
</Select> </Select>
</Skeleton> </Skeleton>
</Step> </Step>
<Step indicator={ <Step indicator={
<StepIndicator variant="solid" color="primary"> <StepIndicator variant={step==2?"solid":"outlined"} color="primary">
2 2
</StepIndicator>}> </StepIndicator>}>
<Input disabled={step < 2 || resultsLoading} placeholder={"Name or Url " + (selectedMangaConnector ? selectedMangaConnector.baseUris[0] : "")} onKeyDown={(e) => { <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>
<Step indicator={ <Step indicator={
<StepIndicator variant="solid" color="primary"> <StepIndicator variant={step==3?"solid":"outlined"} color="primary">
3 3
</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>