Update header search

scipost_django/ontology/forms.py

@@ -34,12 +34,6 @@ def academic_field_slug_choices():
 
 
 class SessionAcademicFieldForm(forms.Form):
-    # acad_field = forms.ModelChoiceField(
-    #     queryset=AcademicField.objects.all(),
-    #     label='Academic Field',
-    #     empty_label=None
-    #     choices=academic_field_choices()
-    # )
     acad_field_slug = forms.ChoiceField(
         label='Academic Field',
         choices=academic_field_slug_choices()

scipost_django/scipost/static/scipost/assets/css/_navbar.scss

@@ -232,57 +232,10 @@ header .nav-item {
     position: relative;
 }
 
-#header-search-form {
-    right: 0;
-    width: 600px;
-    height: 100%;
-    position: absolute;
-
-    form {
-        display: block;
-        top: 15px;
-        position: absolute;
-        width: 100%;
-        height: 50px;
-        background-color: $white;
-        padding: 0.25rem 1.0rem;
-        margin: 0;
-        border: 1px solid $scipost-lightblue;
-        outline: none;
-
-        input[type='text'] {
-            width: 100%;
-            height: 100%;
-            border: 0;
-            outline: none;
-            padding-right: 100px;
-            background: none;
-        }
-
-        .btn-group {
-            position: absolute;
-            right: 0;
-            top: 0;
-            height: 100%;
-            padding: 0.25rem 0.25rem 0.25rem 1.25rem;
-            width: 90px;
-        }
-
-        .btn {
-            color: $scipost-darkblue;
-            font-size: 110%;
-            padding: 0.375rem 0;
-            margin: 0 0.5rem;
-
-            &:hover {
-                color: $scipost-lightblue;
-            }
-
-            &.close-form {
-                font-size: 16px;
-            }
-        }
-    }
+#headerSearchInput {
+    background-color: $scipost-darkblue;
+    border: 1px solid $scipost-orange;
+    color: $white;
 }
 
 #session_acad_field_form {
@@ -291,10 +244,10 @@ header .nav-item {
 	margin: 0rem !important;
 
 	#id_acad_field_slug {
-	    border: 2px solid $scipost-lightblue;
-	    border-radius: 2px;
 	    background-color: $scipost-darkblue;
 	    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+	    border: 2px solid $scipost-lightblue;
+	    border-radius: 2px;
 	    color: $white;
 	}
     }

scipost_django/scipost/templates/scipost/header.html

 {% load static %}
 {% load crispy_forms_tags %}
 
-<header>
+<header class="py-2">
   <div class="container">
-    <div class="d-md-flex justify-content-between">
+    <div class="d-lg-flex justify-content-between">
       <div class="logobox">
         <a href="{% url 'scipost:index' %}"><img src="{% static 'scipost/images/logo_scipost_RGB_HTML_groot.png' %}" alt="SciPost logo" width="180" /></a>
       </div>
 
-      <ul class="navbar-nav">
-	<li class="nav-item">
-	  <form id="session_acad_field_form"
-		hx-get="{% url 'ontology:set_session_acad_field' %}"
-		hx-trigger="change"
-		hx-swap="outerHTML"
-	  >
-	    {% crispy session_acad_field_form %}
-	  </form>
-	</li>
-      </ul>
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" id="header-search-button" href="{% url 'scipost:search' %}">
-            {% include 'bi/search.html' %}
-            Search
-          </a>
-
-          <div id="header-search-form"{% if not request.GET.q %} style="display: none;"{% endif %}>
-            <form method="get" action="{% url 'scipost:search' %}">
-              <input type="text" name="q" placeholder="Search term" value="{{ request.GET.q }}">
-              <div class="btn-group">
-                <button type="submit" class="btn btn-link">
-                  {% include 'bi/search.html' %}
-                </button>
-                <a class="btn btn-link close-form" id="header-search-close-btn">
-                  {% include 'bi/x-circle-fill.html' %}
-                </a>
-              </div>
-            </form>
-          </div>
-        </li>
-      </ul>
-    </div>
+      <div class="mx-auto my-4 my-lg-auto">
+	<form id="session_acad_field_form"
+	      hx-get="{% url 'ontology:set_session_acad_field' %}"
+	      hx-trigger="change"
+	      hx-swap="outerHTML"
+	>
+	  {% crispy session_acad_field_form %}
+	</form>
+      </div>
 
-    <script src="{% static 'scipost/search-header.js' %}"></script>
+      <div class="ms-auto me-0 my-4 my-lg-auto">
+	<form id="header-search-form" method="get" action="{% url 'scipost:search' %}">
+          <div class="form-floating">
+            <input type="text" id="headerSearchInput" class="form-control" name="q" placeholder="Search" value="{{ request.GET.q }}">
+	    <label for="headerSearchInput" class="text-white">
+	      Quick search&emsp;{% include 'bi/search.html' %}
+	    </label>
+	  </div>
+	</form>
+      </div>
 
+    </div>
   </div>
 </header>