From 3b9653c2b70d5377bb3801608422af5e13b3475b Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 17 Sep 2024 14:46:16 +0200
Subject: [PATCH] :lipstick: [#2741] Added multiselect listbox mobile design

---
 .../FilterBar/MultiSelectListbox.html         | 51 +++++++++++--------
 .../scss/components/FilterBar/FilterBar.scss  |  8 +++
 .../FilterBar/MultiSelectListbox.scss         |  6 +++
 .../templates/pages/cases/list_inner.html     |  2 +-
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
index 33ab0b14da..86b0c2cbec 100644
--- a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
+++ b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
@@ -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>
-        {# Submit button appears on select #}
-        <div class="form__actions form__actions--fullwidth" id="filterFormActions">
-            <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 class="multiselect-listbox__mobile-button">
+        <div class="button show-preview">
+            {% icon icon="filter_alt" outlined=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 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" 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__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>
diff --git a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
index 4456147828..4259b33894 100644
--- a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
+++ b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
@@ -22,4 +22,12 @@
   &__frequency-sum {
     padding: 0;
   }
+
+  &__label {
+    display: none;
+    padding-top: calc(var(--font-size-body) / 2);
+    @media (min-width: 768px) {
+      display: inline;
+    }
+  }
 }
diff --git a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
index 5d314084bd..6391b12d67 100644
--- a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
+++ b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
@@ -196,4 +196,10 @@
       }
     }
   }
+
+  .multiselect-listbox__mobile-button {
+    @media (min-width: 768px) {
+      display: none;
+    }
+  }
 }
diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
index 9685c0da72..2cdfd0425a 100644
--- a/src/open_inwoner/templates/pages/cases/list_inner.html
+++ b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -6,7 +6,7 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
 {% if filter_form %}
 <div class="filter-bar" id="filterBar">
     <form class="form filter-bar__form" method="GET" id="filter-form" novalidate>
-        <span>{% trans 'Filter op' %}:</span>
+        <span class="filter-bar__label">{% trans 'Filter op' %}:</span>
         {% include "components/FilterBar/MultiSelectListbox.html" with statusfrequencies=status_freqs %}
     </form>
 </div>