diff --git a/scipost_django/ontology/forms.py b/scipost_django/ontology/forms.py index 7177bdbbf0aa34161b067b9bbd0ab950a9056afe..5ab547dc353b0f64398d62784447f1497f2ab876 100644 --- a/scipost_django/ontology/forms.py +++ b/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() diff --git a/scipost_django/scipost/static/scipost/assets/css/_navbar.scss b/scipost_django/scipost/static/scipost/assets/css/_navbar.scss index 297238abf6393b1cf3867fef44e7dc2e042604ea..a6d5647f4929445215f0580ed869a4ab8f9d6f67 100644 --- a/scipost_django/scipost/static/scipost/assets/css/_navbar.scss +++ b/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; } } diff --git a/scipost_django/scipost/templates/scipost/header.html b/scipost_django/scipost/templates/scipost/header.html index 2118464901da243dcd7ae3ef2729bf003a161cf3..d3eb9719c96fead83d9274aef5970c256bc54674 100644 --- a/scipost_django/scipost/templates/scipost/header.html +++ b/scipost_django/scipost/templates/scipost/header.html @@ -1,49 +1,34 @@ {% 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 {% include 'bi/search.html' %} + </label> + </div> + </form> + </div> + </div> </div> </header>