[#2741] prepare Filterbar for mobile/desktop form resets

maykinmedia · Oct 1, 2024 · 268a2f6 · 268a2f6
1 parent 5730719
commit 268a2f6
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
@@ -24,7 +24,7 @@
                 </button>
             </div>
         </div>
-        <div class="form__actions form__actions--fullwidth form__actions--reset">
+        <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>

diff --git a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
@@ -15,6 +15,7 @@
     height: 70vh;
     position: fixed;
     top: 30vh;
+    transition: top 2s linear;
     z-index: 500;
 
     .multiselect-listbox__modal {
@@ -48,10 +49,13 @@
   .filter-bar__form {
     margin: 0;
     padding: 0 0 0 var(--spacing-small);
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: var(--spacing-extra-large);
+
+    @media (min-width: 768px) {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--spacing-extra-large);
+    }
   }
 
   &__frequency-sum {

diff --git a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
@@ -107,6 +107,7 @@
             text-decoration: underline;
           }
         }
+
         .checkbox__input:focus-visible ~ .checkbox__label {
           border-radius: var(--border-radius);
           outline: var(--focus-border-style) var(--focus-border-width)
@@ -182,6 +183,7 @@
     &--reset {
       position: relative;
       z-index: 1000;
+
       .button--transparent {
         justify-content: flex-start;
         padding-left: 0;

diff --git a/src/open_inwoner/scss/components/Form/Form.scss b/src/open_inwoner/scss/components/Form/Form.scss
@@ -218,6 +218,24 @@
     grid-area: primary;
   }
 
+  .form__reset {
+    &--desktop {
+      display: none;
+
+      @media (min-width: 768px) {
+        display: block;
+      }
+    }
+
+    &--mobile {
+      display: block;
+
+      @media (min-width: 768px) {
+        display: none;
+      }
+    }
+  }
+
   &--inline {
     grid-template-columns: 1fr auto;
     align-items: start;

diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -7,7 +7,7 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
 <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__actions form__actions--fullwidth form__actions--reset">
+        <div class="form__reset--desktop form__actions--fullwidth form__actions--reset">
             {% button bordered=False text=_("Wis alle filters") id="resetFilters" type="button" transparent=True primary=True %}
         </div>
     </div>
@@ -19,7 +19,7 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
         {% include "components/FilterBar/MultiSelectListbox.html" with statusfrequencies=status_freqs %}
 
         {# Mobile submit button updates on select #}
-        <div class="form__actions form__actions--fullwidth" id="filterFormActions">
+        <div class="form__reset--mobile 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>