glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-21 11:05:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix Header Spacing and Badge Location if Backend can't be reached

Browse Source
This commit is contained in:
glax
2025-06-17 00:57:28 +02:00
parent a273af5ed9
commit 9f8d874822
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,8 +89,8 @@ export default function App () {
<Header> <Header>
<Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}> <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
<Button onClick={() => setShowSettings(true)}>Settings</Button> <Button onClick={() => setShowSettings(true)}>Settings</Button>
<Button onClick={() => setShowJobs(true)}>Jobs</Button>
</Badge> </Badge>
<Button onClick={() => setShowJobs(true)}>Jobs</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} />

20
tranga-website/src/Header.tsx
View File

@ -1,18 +1,22 @@
import Sheet from "@mui/joy/Sheet"; import Sheet from "@mui/joy/Sheet";
import {Stack, Typography} from "@mui/joy"; import {Box, Stack, Typography} from "@mui/joy";
import {ReactElement} from "react"; import {ReactElement} from "react";
import './Header.css'; import './Header.css';
export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement { export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement {
return ( return (
<Sheet className={"header"}> <Sheet className={"header"}>
<Stack direction={"row"} <Stack direction={"row"} spacing={2} sx={{width: "100%"}}>
spacing={4} <img src={"/blahaj.png"} style={{cursor: "grab"}}/>
sx={{ <Typography level={"h2"} sx={{
justifyContent: "flex-start", background: "linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))",
alignItems: "center", WebkitBackgroundClip: "text",
}}> WebkitTextFillColor: "transparent",
<Typography level={"h2"}>Tranga</Typography> fontWeight: "bold",
cursor: "default"
}}>Tranga</Typography>
<Box sx={{flexGrow: 1}} />
{children} {children}
</Stack> </Stack>
</Sheet> </Sheet>