-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Avoid reloading the entire page (and scrolling up) when a single filter changes. The goal is for the filter form not to be reloaded, to keep the current scroll position on the page and collapse state. This necessitated reorganizing the page so that the tabs, heading section and certain form fields can be reloaded independently with out-of-brand swaps. Purposely don’t move back to the top of the results. With the redesign in progress, the filters will move to the top of the page, removing the need to scroll. Also, as the filter list can be quite tall, users picking filters from the bottom of the page would be quite annoyed when the scroll position changes after they picked an element.
- Loading branch information
1 parent
cec17df
commit 233696b
Showing
13 changed files
with
277 additions
and
166 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
itou/templates/search/includes/siaes_search_filters_company.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| {% load django_bootstrap5 %} | ||
| <div id="company-field"{% if request.htmx %} hx-swap-oob="true"{% endif %}> | ||
| {% if form.company %} | ||
| <hr> | ||
| <fieldset> | ||
| {% bootstrap_field form.company wrapper_class="form-group mb-0" label_class="d-block font-weight-bold mb-3" %} | ||
| </fieldset> | ||
| {% endif %} | ||
| </div> |
79 changes: 79 additions & 0 deletions
79
itou/templates/search/includes/siaes_search_filters_departments.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| {% load django_bootstrap5 %} | ||
| <div id="department-fields"{% if request.htmx %} hx-swap-oob="true"{% endif %}> | ||
| {% 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 }}"> | ||
| {{ form.departments.label | capfirst }} | ||
| </legend> | ||
| <div class="collapse mt-3{% if form.departments.value %} show{% endif %}" id="collapse_{{ form.departments.name }}"> | ||
| {{ form.departments }} | ||
| </div> | ||
| </div> | ||
| </fieldset> | ||
| {% 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 }}"> | ||
| {{ 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> | ||
| </div> | ||
| </fieldset> | ||
| {% 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 }}"> | ||
| {{ 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> | ||
| </div> | ||
| </fieldset> | ||
| {% 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 }}"> | ||
| {{ 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> | ||
| </div> | ||
| </fieldset> | ||
| {% endif %} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <div id="job-search-results" class="col-12 col-md-8"> | ||
| {% for item in results_page %} | ||
| {% if request.resolver_match.view_name == "search:employers_results" %} | ||
| {% include "companies/includes/_card_siae.html" with siae=item %} | ||
| {% else %} | ||
| {% include "companies/includes/_card_jobdescription.html" with job_description=item %} | ||
| {% endif %} | ||
| {% empty %} | ||
| <div class="c-box c-box--results mb-3 mb-md-4"> | ||
| <div class="c-box--results__body"> | ||
| <p class="mb-0">Aucun résultat avec les filtres actuels.</p> | ||
| </div> | ||
| </div> | ||
| {% endfor %} | ||
| {% include "includes/pagination.html" with page=results_page boost=True boost_target="#job-search-results" boost_indicator="#job-search-results" %} | ||
| </div> | ||
| {% if request.htmx %} | ||
| <title hx-swap-oob="outerHTML,title"> | ||
| {% include "search/includes/siaes_search_title.html" %} | ||
| {# Cannot use block in includes #} | ||
| - Les emplois de l'inclusion | ||
| </title> | ||
| {% include "search/includes/siaes_search_filters_company.html" %} | ||
| {% include "search/includes/siaes_search_filters_departments.html" %} | ||
| {% include "search/includes/siaes_search_top.html" %} | ||
| {% include "search/includes/siaes_search_tabs.html" %} | ||
| {% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| {% load matomo %} | ||
| {% load str_filters %} | ||
| <ul id="job-search-tabs" class="s-tabs-01__nav nav nav-tabs mt-3"{% if request.htmx %} hx-swap-oob="true"{% endif %}> | ||
| <li class="nav-item"> | ||
| <a class="nav-link{% if request.resolver_match.view_name == "search:employers_results" %} active{% endif %}" | ||
| {% matomo_event "candidature" "clic" "clic-onglet-employeur" %} | ||
| href="{% url "search:employers_results" %}?{{ filters_query_string }}"> | ||
| <i class="ri-hotel-line font-weight-normal me-1" aria-hidden="true"></i> | ||
| <span>Employeur{{ siaes_count|pluralizefr }}</span> | ||
| <span class="badge badge-sm rounded-pill ms-2">{{ siaes_count }}</span> | ||
| </a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link{% if request.resolver_match.view_name == "search:job_descriptions_results" %} active{% endif %}" | ||
| {% matomo_event "candidature" "clic" "clic-onglet-fichesdeposte" %} | ||
| href="{% url "search:job_descriptions_results" %}?{{ filters_query_string }}"> | ||
| <i class="ri-briefcase-4-line font-weight-normal me-1" aria-hidden="true"></i> | ||
| <span>Poste{{ job_descriptions_count|pluralizefr }} <span class="d-none d-md-inline">ouvert{{ job_descriptions_count|pluralizefr }} au recrutement</span></span> | ||
| <span class="badge badge-sm rounded-pill ms-2">{{ job_descriptions_count }}</span> | ||
| </a> | ||
| </li> | ||
| </ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| {% if form.is_valid %} | ||
| Emplois inclusifs à {{ distance }} km du centre de {{ city }} | ||
| {% include "includes/pagination_for_title.html" with page=results_page only %} | ||
| {% else %} | ||
| Rechercher un emploi inclusif | ||
| {% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| {% load str_filters %} | ||
| <div id="job-search-top"{% if request.htmx %} hx-swap-oob="true"{% endif %}> | ||
| {% if request.resolver_match.view_name == "search:employers_results" %} | ||
| <h2>Employeur{{ siaes_count|pluralizefr }}</h2> | ||
| <p> | ||
| {{ siaes_count }} résultat{{ siaes_count|pluralizefr }} | ||
| {% if form.is_valid %} | ||
| - Emplois inclusifs à <strong>{{ distance }} km</strong> du centre de <strong>{{ city }}</strong> | ||
| {% endif %} | ||
| </p> | ||
| {% else %} | ||
| <h2>Poste{{ job_descriptions_count|pluralizefr }} ouvert{{ job_descriptions_count|pluralizefr }} au recrutement</h2> | ||
| <p> | ||
| {{ job_descriptions_count }} résultat{{ job_descriptions_count|pluralizefr }} | ||
| {% if form.is_valid %} | ||
| - Emplois inclusifs à <strong>{{ distance }} km</strong> du centre de <strong>{{ city }}</strong> | ||
| {% endif %} | ||
| </p> | ||
| {% endif %} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.