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

Make global searchfield adaptive to screensize

Browse Source
This commit is contained in:
Christoph Kluge 2024-10-02 15:43:46 +02:00
parent f047f89ad5
commit 0ff5c4bedd
1 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
web/frontend/src/header/NavbarTools.svelte
View File

@ -18,6 +18,9 @@
Button, Button,
InputGroupText, InputGroupText,
Container, Container,
Dropdown,
DropdownToggle,
DropdownMenu,
Row, Row,
Col, Col,
} from "@sveltestrap/sveltestrap"; } from "@sveltestrap/sveltestrap";
@ -30,29 +33,49 @@
<Nav navbar> <Nav navbar>
{#if screenSize >= 768} {#if screenSize >= 768}
<NavItem> {#if screenSize <= 992}
<form method="GET" action="/search"> <NavItem>
<InputGroup> <form method="GET" action="/search">
<Input <Dropdown >
type="text" <DropdownToggle outline color="secondary"><Icon name="search" /> Search</DropdownToggle>
placeholder="Search 'type:<query>' ..." <DropdownMenu style="width:200px;">
name="searchId" <InputGroup>
style="margin-left: 10px;" <Input
/> type="search"
<!-- bootstrap classes w/o effect --> placeholder="type:<query> ..."
<Button outline type="submit" title="Search" name="searchId"
><Icon name="search" /></Button class="mx-2"
> />
<InputGroupText </InputGroup>
style="cursor:help;" </DropdownMenu>
title={authlevel >= roles.support </Dropdown>
? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name" </form>
: "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "} </NavItem>
><Icon name="info-circle" /></InputGroupText {:else}
> <NavItem>
</InputGroup> <form method="GET" action="/search">
</form> <InputGroup>
</NavItem> <Input
type="search"
placeholder="Search 'type:<query>' ..."
name="searchId"
style="margin-left: 10px;"
/>
<!-- bootstrap classes w/o effect -->
<Button outline type="submit" title="Search"
><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}
<NavItem> <NavItem>
<a <a
href="https://www.clustercockpit.org/docs/webinterface/" href="https://www.clustercockpit.org/docs/webinterface/"