From 0ff5c4bedd6de0e20eb0f888530e83bb3176a2ed Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 2 Oct 2024 15:43:46 +0200
Subject: [PATCH] Make global searchfield adaptive to screensize

---
 web/frontend/src/header/NavbarTools.svelte | 69 ++++++++++++++--------
 1 file changed, 46 insertions(+), 23 deletions(-)

diff --git a/web/frontend/src/header/NavbarTools.svelte b/web/frontend/src/header/NavbarTools.svelte
index fa9cac9..1382b28 100644
--- a/web/frontend/src/header/NavbarTools.svelte
+++ b/web/frontend/src/header/NavbarTools.svelte
@@ -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/"