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

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