Skip to content

Commit

Permalink
🚧 [#3018] Make mobile search filters into modal and checkbox-lists
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Feb 13, 2025
1 parent b82781a commit 6f0f5a3
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 11 deletions.
31 changes: 31 additions & 0 deletions src/open_inwoner/components/templates/components/Filter/SearchFilter.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{% load i18n l10n form_tags icon_tags button_tags %}

<div class="filter-bar__multiselect-listbox multiselect-listbox" id="selectDropdownWrapper">
<div class="multiselect-listbox__popup">
<button id="selectButton" type="button" class="button button__select" aria-haspopup="listbox" aria-expanded="false" aria-live="polite">
{% trans 'Status' %}:
{% icon icon="expand_more" icon_position="after" icon_outlined=True %}
</button>
<div id="listboxDropdown" class="multiselect-listbox__content" role="listbox" aria-labelledby="selectButton">
<div class="multiselect-listbox__scroll" role="presentation">
{% for status, frequency in statusfrequencies %}
<div class="checkbox" role="option">
<input type="checkbox" name="status" value="{{ status }}" id="id_status_{{ forloop.counter }}" class="checkbox__input">
<label class="checkbox__label" for="id_status_{{ forloop.counter }}">
<span class="ellipsis">{{ status }} </span><span class="frequency-counter">({{ frequency }})</span>
</label>
</div>
{% endfor %}
</div>
{# Submit button updates on select #}
<div class="form__actions form__actions--fullwidth" id="multiselectFormActions">
<button class="button button--primary" type="submit" title="{% trans 'Toon resultaten' %}" aria-label="{% trans 'Toon resultaten' %}" id="filterCases">
{% trans 'Toon' %}<span class="filter-bar__frequency-sum" id="frequencySum">0</span><span id="resultText">{% trans 'resultaten' %}</span>
</button>
</div>
</div>
<div class="form__reset--desktop form__actions--fullwidth form__actions--reset">
{% button bordered=False text=_("Wis alle filters") id="resetMultiSelectFilters" type="button" transparent=True primary=True %}
</div>
</div>
</div>
53 changes: 42 additions & 11 deletions src/open_inwoner/templates/pages/search.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends 'master.html' %}
{% load i18n form_tags utils icon_tags pagination_tags %}
{% load i18n form_tags utils icon_tags button_tags pagination_tags %}

{% block main_inner %}
{# search term section #}
Expand All @@ -14,17 +14,48 @@ <h1 class="utrecht-heading-1">{% trans "Zoeken naar " %} "{% firstof search_form
<div class="grid">
<aside class="grid__sidebar grid__filters" aria-label="{% trans "Zoekfilters" %}">
{% if search_filter_categories or search_filter_tags or search_filter_organizations %}
<hr class="divider divider--tiny">
<h2 class="utrecht-heading-2">{% trans "Zoekfilters" %}</h2>
{% if search_filter_categories %}
{% include "components/Filter/Filter.html" with field=search_form.categories form_id="search-form" only %}
{% endif %}
{% if search_filter_tags %}
{% include "components/Filter/Filter.html" with field=search_form.tags form_id="search-form" only %}
{% endif %}
{% if search_filter_organizations %}
{% include "components/Filter/Filter.html" with field=search_form.organizations form_id="search-form" only %}
{% endif %}
{% endif %}
<div class="filter-bar__backdrop" id="filterBarBackdrop">
<div class="filter-bar" id="filterBar">
<div class="filter-bar__mobile-controls">
{% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="show-controls" %}
<div class="form__reset--mobile form__actions--fullwidth form__actions--reset">
<button class="button button--primary button--transparent" type="button" name="" value="" title="Wis alle filters" aria-label="Wis alle filters" id="resetAllFilters">
Wis alle filters
</button>
</div>
</div>
<div class="filter-bar__mobile-button">
<p class="utrecht-paragraph filter-bar__heading">Filters</p>
<div class="filter-bar__mobile-selection" id="selectionFilterBar">
{% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
{% icon icon="check" icon_position="after" outlined=True %}
<span class="sr-only">Gekozen filters</span>
</div>
<p class="utrecht-paragraph filter-bar__status-text">Zoekfilters</p>
</div>
{% if search_filter_categories %}
<form class="form filter-bar__form" method="GET" id="filter-form" novalidate>
<span class="filter-bar__label">{% trans 'Onderwerpen' %}:</span>
{% include "components/Filter/SearchFilter.html" with field=search_form.categories form_id="search-form" only %}
</form>
{% endif %}
{% if search_filter_tags %}
<form class="form filter-bar__form" method="GET" id="filter-form" novalidate>
<span class="filter-bar__label">{% trans 'Tags' %}:</span>
{% include "components/Filter/SearchFilter.html" with field=search_form.tags form_id="search-form" only %}
</form>
{% endif %}
{% if search_filter_organizations %}
<form class="form filter-bar__form" method="GET" id="filter-form" novalidate>
<span class="filter-bar__label">{% trans 'Organisaties' %}:</span>
{% include "components/Filter/SearchFilter.html" with field=search_form.organizations form_id="search-form" only %}
</form>
{% endif %}
</div>
</div>
{% endif %}
{# end search filters #}
</aside>

Expand Down

0 comments on commit 6f0f5a3

Please sign in to comment.