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

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

@ -18,6 +18,9 @@
Button,
InputGroupText,
Container,
Dropdown,
DropdownToggle,
DropdownMenu,
Row,
Col,
} from "@sveltestrap/sveltestrap";
@ -30,11 +33,30 @@
<Nav navbar>
{#if screenSize >= 768}
{#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="text"
type="search"
placeholder="Search 'type:<query>' ..."
name="searchId"
style="margin-left: 10px;"
@ -53,6 +75,7 @@
</InputGroup>
</form>
</NavItem>
{/if}
<NavItem>
<a
href="https://www.clustercockpit.org/docs/webinterface/"