UX/UI: Revamp design of employeur and job search

itou/static/css/itou.css

@@ -148,11 +148,6 @@
     margin-left: 2px;
 }
 
-.c-aside-filters .select2-container--bootstrap-5 {
-    width: auto !important;
-    display: block !important;
-}
-
 /*
 Force the display of `.invalid-feedback` for Duet Date Picker with Bootstrap 4.
 See also `duet_date_picker.html`.
@@ -466,3 +461,8 @@ an input field being invalid, generating an uncontrolled red box-shadow. */
     border-top-left-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
 }
+
+/* Fix for form.company and form.job_seeker width */
+.w-lg-400px .select2-selection__rendered {
+    white-space: nowrap !important;
+}

itou/static/js/htmx_dropdown_filter.js

@@ -1,10 +1,49 @@
-htmx.onLoad((target) => {
+(function() {
+  const filtersContentId = "offcanvasApplyFiltersContent";
+  const filtersContent = document.getElementById(filtersContentId);
+  const filtersCount = document.getElementById("all-filters-btn");
+
+  function fieldHasValue(container) {
+    return (
+      container.querySelector('input:checked:not([value=""])')
+      || container.querySelector('input[value]:not([type=checkbox]):not([type=radio]):not([value=""])')
+      || container.querySelector('duet-date-picker[value]:not([value=""])')
+      || container.querySelector("select > option:not([value=''])[selected]")
+    );
+  }
+
   function toggleHasSelectedItem() {
     const dropdown = this.closest('.dropdown');
-    this.classList.toggle('has-selected-item', dropdown.querySelector('input:checked:not([value=""])'));
+    this.classList.toggle('has-selected-item', fieldHasValue(dropdown));
+    this.classList.toggle('font-weight-bold', fieldHasValue(dropdown));
+  }
+
+  function initFilters(sidebar) {
+    let activeFiltersCount = 0;
+    Array.from(sidebar.querySelectorAll(".collapsed")).forEach((collapse) => {
+      const collapseTarget = document.querySelector(collapse.dataset.bsTarget);
+      if (fieldHasValue(collapseTarget)) {
+        activeFiltersCount++;
+        bootstrap.Collapse.getOrCreateInstance(collapseTarget, { delay: 0 }).show();
+      }
+    });
+    if (filtersCount) {
+      filtersCount.textContent = activeFiltersCount ? ` (${activeFiltersCount})` : "";
+    }
+  }
+
+  function onLoad(target) {
+    target.querySelectorAll('.btn-dropdown-filter.dropdown-toggle').forEach((dropdownFilter) => {
+      dropdownFilter.addEventListener('hide.bs.dropdown', toggleHasSelectedItem);
+      toggleHasSelectedItem.call(dropdownFilter);
+    });
+    if (target.id === filtersContentId) {
+      initFilters(target);
+    }
+  }
+
+  if (filtersContent) {
+    initFilters(filtersContent);
   }
-  target.querySelectorAll('.btn-dropdown-filter.dropdown-toggle').forEach((dropdownFilter) => {
-    dropdownFilter.addEventListener('hide.bs.dropdown', toggleHasSelectedItem);
-    toggleHasSelectedItem.call(dropdownFilter);
-  });
-});
+  htmx.onLoad(onLoad);
+})();

itou/templates/search/includes/siaes_search_filters_contract_types.html

@@ -0,0 +1,15 @@
+<div class="dropdown">
+    <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+        {{ form.contract_types.label | capfirst }}
+    </button>
+    <ul class="dropdown-menu">
+        {% for choice in form.contract_types %}
+            <li class="dropdown-item">
+                <div class="form-check">
+                    <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                    <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
+</div>

itou/templates/search/includes/siaes_search_filters_departments.html

@@ -1,78 +1,84 @@
 {% load django_bootstrap5 %}
 
-{% if form.departments %}
-    <hr>
-    <fieldset>
-        <div class="form-group mb-0">
-            <legend class="has-collapse-caret mb-0"
-                    data-bs-toggle="collapse"
-                    href="#collapse_{{ form.departments.name }}"
-                    role="button"
-                    aria-expanded="{% if form.departments.value %}true{% else %}false{% endif %}"
-                    aria-controls="collapse_{{ form.departments.name }}">
+<div class="d-flex flex-column flex-md-row gap-1">
+    {% if form.departments %}
+        <div class="dropdown">
+            <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                 {{ form.departments.label | capfirst }}
-            </legend>
-            <div class="collapse mt-3{% if form.departments.value %} show{% endif %}" id="collapse_{{ form.departments.name }}">
-                {{ form.departments }}
-            </div>
+            </button>
+            <ul class="dropdown-menu">
+                {% for choice in form.departments %}
+                    <li>
+                        <div class="dropdown-item">
+                            <div class="form-check">
+                                <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                                <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
         </div>
-    </fieldset>
-{% endif %}
+    {% endif %}
 
-{# getattr and list still painful in Django template #}
-{% if form.districts_13 %}
-    <hr>
-    <fieldset>
-        <div class="form-group mb-0">
-            <legend class="has-collapse-caret mb-0"
-                    data-bs-toggle="collapse"
-                    href="#collapse_{{ form.districts_13.name }}"
-                    role="button"
-                    aria-expanded="{% if form.districts_13.value %}true{% else %}false{% endif %}"
-                    aria-controls="collapse_{{ form.districts_13.name }}">
+    {# getattr and list still painful in Django template #}
+    {% if form.districts_13 %}
+        <div class="dropdown">
+            <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                 {{ form.districts_13.label | capfirst }}
-            </legend>
-            <div class="collapse mt-3{% if form.districts_13.value %} show{% endif %}" id="collapse_{{ form.districts_13.name }}">
-                {{ form.districts_13 }}
-            </div>
+            </button>
+            <ul class="dropdown-menu">
+                {% for choice in form.districts_13 %}
+                    <li>
+                        <div class="dropdown-item">
+                            <div class="form-check">
+                                <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                                <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
         </div>
-    </fieldset>
-{% endif %}
+    {% endif %}
 
-{% if form.districts_69 %}
-    <hr>
-    <fieldset>
-        <div class="form-group mb-0">
-            <legend class="has-collapse-caret mb-0"
-                    data-bs-toggle="collapse"
-                    href="#collapse_{{ form.districts_69.name }}"
-                    role="button"
-                    aria-expanded="{% if form.districts_69.value %}true{% else %}false{% endif %}"
-                    aria-controls="collapse_{{ form.districts_69.name }}">
+    {% if form.districts_69 %}
+        <div class="dropdown">
+            <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                 {{ form.districts_69.label | capfirst }}
-            </legend>
-            <div class="collapse mt-3{% if form.districts_69.value %} show{% endif %}" id="collapse_{{ form.districts_69.name }}">
-                {{ form.districts_69 }}
-            </div>
+            </button>
+            <ul class="dropdown-menu">
+                {% for choice in form.districts_69 %}
+                    <li>
+                        <div class="dropdown-item">
+                            <div class="form-check">
+                                <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                                <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
         </div>
-    </fieldset>
-{% endif %}
+    {% endif %}
 
-{% if form.districts_75 %}
-    <hr>
-    <fieldset>
-        <div class="form-group mb-0">
-            <legend class="has-collapse-caret mb-0"
-                    data-bs-toggle="collapse"
-                    href="#collapse_{{ form.districts_75.name }}"
-                    role="button"
-                    aria-expanded="{% if form.districts_75.value %}true{% else %}false{% endif %}"
-                    aria-controls="collapse_{{ form.districts_75.name }}">
+    {% if form.districts_75 %}
+        <div class="dropdown">
+            <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                 {{ form.districts_75.label | capfirst }}
-            </legend>
-            <div class="collapse mt-3{% if form.districts_75.value %} show{% endif %}" id="collapse_{{ form.districts_75.name }}">
-                {{ form.districts_75 }}
-            </div>
+            </button>
+            <ul class="dropdown-menu">
+                {% for choice in form.districts_75 %}
+                    <li>
+                        <div class="dropdown-item">
+                            <div class="form-check">
+                                <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                                <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
         </div>
-    </fieldset>
-{% endif %}
+    {% endif %}
+</div>

itou/templates/search/includes/siaes_search_filters_distance.html

@@ -0,0 +1,15 @@
+<div class="dropdown">
+    <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+        {{ form.distance.label | capfirst }}
+    </button>
+    <ul class="dropdown-menu">
+        {% for choice in form.distance %}
+            <li class="dropdown-item">
+                <div class="form-check">
+                    <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="radio" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                    <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
+</div>

itou/templates/search/includes/siaes_search_filters_domains.html

@@ -0,0 +1,15 @@
+<div class="dropdown">
+    <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+        {{ form.domains.label | capfirst }}
+    </button>
+    <ul class="dropdown-menu">
+        {% for choice in form.domains %}
+            <li class="dropdown-item">
+                <div class="form-check">
+                    <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                    <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
+</div>

itou/templates/search/includes/siaes_search_filters_kinds.html

@@ -0,0 +1,15 @@
+<div class="dropdown">
+    <button type="button" class="btn btn-dropdown-filter dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+        {{ form.kinds.label | capfirst }}
+    </button>
+    <ul class="dropdown-menu">
+        {% for choice in form.kinds %}
+            <li class="dropdown-item">
+                <div class="form-check">
+                    <input id="{{ choice.id_for_label }}" class="form-check-input" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
+                    <label for="{{ choice.id_for_label }}" class="form-check-label">{{ choice.choice_label }}</label>
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
+</div>

itou/templates/search/includes/siaes_search_results.html

@@ -1,4 +1,4 @@
-<div id="job-search-results" class="col-12 col-md-8">
+<div id="job-search-results">
     {% for item in results_page %}
         {% if request.resolver_match.view_name == "search:employers_results" %}
             {% include "companies/includes/_card_siae.html" with siae=item %}
@@ -20,7 +20,7 @@
         {# Cannot use block in includes #}
         - Les emplois de l'inclusion
     </title>
-    {% include "search/includes/siaes_search_filters_company.html" %}
+    {% include "search/includes/siaes_search_subtitle.html" %}
     {% include "search/includes/siaes_search_top.html" %}
     {% include "search/includes/siaes_search_tabs.html" %}
 {% endif %}

itou/templates/search/includes/siaes_search_subtitle.html

@@ -0,0 +1,11 @@
+{% load str_filters %}
+
+<div id="search-subtitle"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
+    {% if request.resolver_match.view_name == "search:employers_results" %}
+        <h2 class="my-3 my-md-4">Employeur{{ siaes_count|pluralizefr }}</h2>
+    {% else %}
+        <h2 class="my-3 my-md-4">
+            Poste{{ job_descriptions_count|pluralizefr }} ouvert{{ job_descriptions_count|pluralizefr }} au recrutement
+        </h2>
+    {% endif %}
+</div>