-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
💄 [#2741] Added multiselect listbox mobile design
- Loading branch information
1 parent
08e3b2a
commit 78153f0
Showing
2 changed files
with
35 additions
and
22 deletions.
There are no files selected for viewing
51 changes: 29 additions & 22 deletions
51
src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.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 |
|---|---|---|
| @@ -1,29 +1,36 @@ | ||
| {% load i18n l10n form_tags icon_tags button_tags %} | ||
|
|
||
| <div class="filter-bar__multiselect-listbox multiselect-listbox" id="selectDropdownWrapper"> | ||
| <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 class="multiselect-listbox__mobile-button"> | ||
| <button class="show-preview" type="button"> | ||
| {% icon icon="filter_alt" outlined=True %} | ||
| </button> | ||
| </div> | ||
| <div class="multiselect-listbox__modal"> | ||
| <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 appears on select #} | ||
| <div class="form__actions form__actions--fullwidth" id="filterFormActions"> | ||
| <button class="button button--primary hide" 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> | ||
| {# Submit button appears on select #} | ||
| <div class="form__actions form__actions--fullwidth" id="filterFormActions"> | ||
| <button class="button button--primary hide" 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 class="form__actions form__actions--fullwidth form__actions--reset"> | ||
| {% button bordered=False text=_("Wis alle filters") id="resetFilters" type="button" transparent=True primary=True %} | ||
| </div> | ||
| </div> | ||
| <div class="form__actions form__actions--fullwidth form__actions--reset"> | ||
| {% button bordered=False text=_("Wis alle filters") id="resetFilters" type="button" transparent=True primary=True %} | ||
| </div> | ||
| </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 |
|---|---|---|
|
|
@@ -194,4 +194,10 @@ | |
| } | ||
| } | ||
| } | ||
|
|
||
| .multiselect-listbox__mobile-button { | ||
| @media (min-width: 768px) { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||