ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 13:29:05 +01:00
Code Issues Packages Releases Activity

Fix Navbar layout

Browse Source
This commit is contained in:
Jan Eitzinger 2023-08-31 14:18:33 +02:00
parent 68f5b0bba4
commit 369757b35b
2 changed files with 105 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/frontend/src/Header.svelte
View File

@ -8,7 +8,7 @@
NavbarToggler, NavbarToggler,
Dropdown, Dropdown,
DropdownToggle, DropdownToggle,
DropdownMenu DropdownMenu,
} from "sveltestrap"; } from "sveltestrap";
import NavbarLinks from "./NavbarLinks.svelte"; import NavbarLinks from "./NavbarLinks.svelte";
import NavbarTools from "./NavbarTools.svelte"; import NavbarTools from "./NavbarTools.svelte";
@ -106,12 +106,13 @@
</NavbarBrand> </NavbarBrand>
<NavbarToggler on:click={() => (isOpen = !isOpen)} /> <NavbarToggler on:click={() => (isOpen = !isOpen)} />
<Collapse <Collapse
style="justify-content: space-between"
{isOpen} {isOpen}
navbar navbar
expand="md" expand="md"
on:update={({ detail }) => (isOpen = detail.isOpen)} on:update={({ detail }) => (isOpen = detail.isOpen)}
> >
<Nav class="ms-auto" navbar> <Nav navbar>
{#if screenSize > 1500 || screenSize < 768} {#if screenSize > 1500 || screenSize < 768}
<NavbarLinks <NavbarLinks
{clusters} {clusters}
@ -171,7 +172,7 @@
</Dropdown> </Dropdown>
{/each} {/each}
{/if} {/if}
<NavbarTools username={username} authlevel={authlevel} roles={roles} screenSize={screenSize}/>
</Nav> </Nav>
<NavbarTools {username} {authlevel} {roles} {screenSize} />
</Collapse> </Collapse>
</Navbar> </Navbar>

199
web/frontend/src/NavbarTools.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import { import {
Icon, Icon,
Nav,
NavItem, NavItem,
InputGroup, InputGroup,
Input, Input,
@ -8,117 +9,119 @@
InputGroupText, InputGroupText,
Container, Container,
Row, Row,
Col Col,
} from "sveltestrap"; } from "sveltestrap";
export let username; // empty string if auth. is disabled, otherwise the username as string export let username; // empty string if auth. is disabled, otherwise the username as string
export let authlevel; // Integer export let authlevel; // Integer
export let roles; // Role Enum-Like export let roles; // Role Enum-Like
export let screenSize // screensize export let screenSize; // screensize
</script> </script>
{#if screenSize >= 768} <Nav navbar>
<NavItem> {#if screenSize >= 768}
<form method="GET" action="/search">
<InputGroup>
<Input
type="text"
placeholder="Search 'type:<query>' ..."
name="searchId"
style="margin-left: 10px;"
/> <!-- bootstrap classes w/o effect -->
<Button outline type="submit"><Icon name="search" /></Button
>
<InputGroupText
style="cursor:help;"
title={authlevel >= roles.support
? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
: "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
><Icon name="info-circle" /></InputGroupText
>
</InputGroup>
</form>
</NavItem>
{#if username}
<NavItem> <NavItem>
<form method="POST" action="/logout"> <form method="GET" action="/search">
<Button <InputGroup>
outline <Input
color="success" type="text"
type="submit" placeholder="Search 'type:<query>' ..."
style="margin-left: 10px;" name="searchId"
> style="margin-left: 10px;"
{#if screenSize > 1630} />
<Icon name="box-arrow-right" /> Logout {username} <!-- bootstrap classes w/o effect -->
{:else} <Button outline type="submit"><Icon name="search" /></Button
<Icon name="box-arrow-right" /> >
{/if} <InputGroupText
</Button> style="cursor:help;"
title={authlevel >= roles.support
? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
: "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
><Icon name="info-circle" /></InputGroupText
>
</InputGroup>
</form> </form>
</NavItem> </NavItem>
{/if} {#if username}
<NavItem> <NavItem>
<Button <form method="POST" action="/logout">
outline <Button
on:click={() => (window.location.href = "/config")} outline
style="margin-left: 10px;" color="success"
> type="submit"
<Icon name="gear" /> style="margin-left: 10px;"
</Button> >
</NavItem> {#if screenSize > 1630}
{:else} <Icon name="box-arrow-right" /> Logout {username}
<NavItem> {:else}
<Container> <Icon name="box-arrow-right" />
<Row cols={2}> {/if}
<Col xs="6"> </Button>
<form method="POST" action="/logout"> </form>
</NavItem>
{/if}
<NavItem>
<Button
outline
on:click={() => (window.location.href = "/config")}
style="margin-left: 10px;"
>
<Icon name="gear" />
</Button>
</NavItem>
{:else}
<NavItem>
<Container>
<Row cols={2}>
<Col xs="6">
<form method="POST" action="/logout">
<Button
outline
color="success"
type="submit"
size="sm"
class="my-2 w-100"
>
<Icon name="box-arrow-right" /> Logout {username}
</Button>
</form>
</Col>
<Col xs="6">
<Button <Button
outline outline
color="success" on:click={() => (window.location.href = "/config")}
type="submit"
size="sm" size="sm"
class="my-2 w-100" class="my-2 w-100"
> >
<Icon name="box-arrow-right" /> Logout {username} {#if authlevel >= roles.admin}
<Icon name="gear" /> Admin Settings
{:else}
<Icon name="gear" /> Plotting Options
{/if}
</Button> </Button>
</form> </Col>
</Col> </Row>
<Col xs="6"> </Container>
<Button </NavItem>
outline <NavItem style="margin-left: 10px; margin-right:10px;">
on:click={() => (window.location.href = "/config")} <form method="GET" action="/search">
size="sm" <InputGroup>
class="my-2 w-100" <Input
> type="text"
{#if authlevel >= roles.admin} placeholder="Search 'type:<query>' ..."
<Icon name="gear" /> Admin Settings name="searchId"
{:else} />
<Icon name="gear" /> Plotting Options <Button outline type="submit"><Icon name="search" /></Button
{/if} >
</Button> <InputGroupText
</Col> style="cursor:help;"
</Row> title={authlevel >= roles.support
</Container> ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
</NavItem> : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
<NavItem style="margin-left: 10px; margin-right:10px;"> ><Icon name="info-circle" /></InputGroupText
<form method="GET" action="/search"> >
<InputGroup> </InputGroup>
<Input </form>
type="text" </NavItem>
placeholder="Search 'type:<query>' ..." {/if}
name="searchId" </Nav>
/>
<Button outline type="submit"><Icon name="search" /></Button
>
<InputGroupText
style="cursor:help;"
title={authlevel >= roles.support
? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
: "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
><Icon name="info-circle" /></InputGroupText
>
</InputGroup>
</form>
</NavItem>
{/if}