Skip to content

Commit

Permalink
UX/UI: Revamp design of employeur and job search
Browse files Browse the repository at this point in the history
  • Loading branch information
@hellodeloo @francoisfreitag
hellodeloo authored and francoisfreitag committed Jun 20, 2024
1 parent f67056e commit 465c71a
Show file tree
Hide file tree
Showing 16 changed files with 269 additions and 177 deletions.
46 changes: 39 additions & 7 deletions itou/static/js/htmx_dropdown_filter.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,42 @@
htmx.onLoad((target) => {
(function() {
const filtersContentId = "offcanvasApplyFiltersContent";
const filtersContent = document.getElementById(filtersContentId);

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: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));
}

function toggleCollapse(sidebar) {
Array.from(sidebar.querySelectorAll(".collapsed")).forEach((collapse) => {
const collapseTarget = document.querySelector(collapse.dataset.bsTarget);
if (fieldHasValue(collapseTarget)) {
bootstrap.Collapse.getOrCreateInstance(collapseTarget, { delay: 0 }).show();
}
});
}

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) {
toggleCollapse(target);
}
}

if (filtersContent) {
toggleCollapse(filtersContent);
}
target.querySelectorAll('.btn-dropdown-filter.dropdown-toggle').forEach((dropdownFilter) => {
dropdownFilter.addEventListener('hide.bs.dropdown', toggleHasSelectedItem);
toggleHasSelectedItem.call(dropdownFilter);
});
});
htmx.onLoad(onLoad);
})();
37 changes: 0 additions & 37 deletions itou/templates/search/includes/siaes_search_filters.html
View file

This file was deleted.

9 changes: 0 additions & 9 deletions itou/templates/search/includes/siaes_search_filters_company.html
View file

This file was deleted.

15 changes: 15 additions & 0 deletions itou/templates/search/includes/siaes_search_filters_contract_types.html
View file
Original file line number Diff line number Diff line change
@@ -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>
136 changes: 71 additions & 65 deletions itou/templates/search/includes/siaes_search_filters_departments.html
View file
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions itou/templates/search/includes/siaes_search_filters_distance.html
View file
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions itou/templates/search/includes/siaes_search_filters_domains.html
View file
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions itou/templates/search/includes/siaes_search_filters_kinds.html
View file
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions itou/templates/search/includes/siaes_search_results.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}
Expand All @@ -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 %}
11 changes: 11 additions & 0 deletions itou/templates/search/includes/siaes_search_subtitle.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 465c71a

Please sign in to comment.