chg: [website] Improved navbar with a form integrated in a dropdown m…

…enu.

website/web/templates/main.html

@@ -50,6 +50,11 @@
     {% block styles %}
     <!-- Bootstrap CSS -->
     {{ bootstrap.load_css() }}
+    <style>
+      #freetext_search {
+        max-width: 100%;  /* Prevent overflow */
+      }
+    </style>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}" />
     {% endblock %}
 
@@ -75,9 +80,22 @@
                 <li class="nav-item"></li>
                   <a class="nav-link" id="btnThemeSwitch" href="#" title="Switch to dark theme."><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg></a>
                 </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="{{url_for('home_bp.search')}}">Search</a>
+
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownSearch" role="button" data-bs-toggle="dropdown" aria-expanded="false">Search</a>
+                  <div class="dropdown-menu dropdown-menu-end p-3 shadow" aria-labelledby="navbarDropdownSearch" style="width: 450px;">
+                    <form class="d-flex" role="form" method="post" action="/search" enctype="multipart/form-data">
+                      <label for="freetext_search" class="visually-hidden">Search term</label>
+                      <div class="input-group w-100">
+                        <input type="text" class="form-control" id="freetext_search" placeholder="Vulnerability ID or vendor" name="freetext_search" list="vendors_list" style="min-width: 300px;" autofocus > <!-- Set size for input -->
+                        <button type="submit" class="btn btn-primary">Search</button>
+                      </div>
+                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                      <datalist id="vendors_list"></datalist>
+                    </form>
+                  </div>
                 </li>
+
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownRecent" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                     Recent

website/web/templates/search.html

@@ -44,7 +44,7 @@
 
   {% if not vulnerability_id and not vendor and config.user_accounts %}
   <div class="container-fluid">
-    <div class="row d-flex justify-content-end">
+    <div class="row pt-5 d-flex justify-content-end">
       <div class="col-md text-center">
         <div id="sightingsChartContainerSeen" class="chart-container-seen">
           <canvas id="exploitedVulnsChartSeen" height="300"></canvas>
@@ -78,24 +78,6 @@
   </div>
   {% endif %}
 
-  <div class="container flex-grow-1 d-flex flex-column justify-content-center">
-    <div class="row justify-content-center">
-        <div class="col-md-4">
-          <form class="row pb-3 pt-4 g-3" role="form" method="post" action="/search" enctype="multipart/form-data">
-            <div class="col-auto">
-              <label class="visually-hidden" for="userInput">Search term</label>
-              <div class="input-group">
-                <input type="text" class="form-control" id="freetext_search" placeholder="Vulnerability id or vendor." name="freetext_search" list="vendors_list" autofocus>
-                <button type="submit" class="btn btn-primary input-group-text">Search</button>
-              </div>
-              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
-              <datalist id="vendors_list"></datalist>
-            </div>
-          </form>
-        </div>
-    </div>
-  </div>
-
   {% if not vulnerability_id and not vendor %}
   <div class="container-fluid pt-5">
     <div class="row justify-content-between">