ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-25 12:59:06 +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,
InputGroupText,
Container,
Dropdown,
DropdownToggle,
DropdownMenu,
Row,
Col,
} from "@sveltestrap/sveltestrap";
@ -30,29 +33,49 @@
<Nav navbar>
{#if screenSize >= 768}
<NavItem>
<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" 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 screenSize <= 992}
<NavItem>
<form method="GET" action="/search">
<Dropdown >
<DropdownToggle outline color="secondary"><Icon name="search" /> Search</DropdownToggle>
<DropdownMenu style="width:200px;">
<InputGroup>
<Input
type="search"
placeholder="type:<query> ..."
name="searchId"
class="mx-2"
/>
</InputGroup>
</DropdownMenu>
</Dropdown>
</form>
</NavItem>
{:else}
<NavItem>
<form method="GET" action="/search">
<InputGroup>
<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>
<a
href="https://www.clustercockpit.org/docs/webinterface/"