[#3018] Made reusable filter components

maykinmedia · Mar 3, 2025 · 456972e · 456972e
1 parent e09bd17
commit 456972e
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 14 deletions.
diff --git a/src/open_inwoner/js/components/search/filter-mobile.js b/src/open_inwoner/js/components/search/filter-mobile.js
@@ -1,5 +1,6 @@
 export class FilterMobile {
   static selector = '.filter--toggle'
+  // bring back
 
   constructor(node) {
     this.node = node

diff --git a/src/open_inwoner/js/components/search/index.js b/src/open_inwoner/js/components/search/index.js
@@ -1,5 +1,6 @@
 import './filter-dropdown-mobile'
 import './filter-modal'
+import './filter-mobile'
 import './filter-options'
 
 const searchForm = document.getElementById('search-form')

diff --git a/src/open_inwoner/scss/components/Filter/Filter.scss b/src/open_inwoner/scss/components/Filter/Filter.scss
@@ -56,14 +56,12 @@
 
   .divider {
     border: red solid 5px !important;
-
     &--small {
       display: none;
       @media (min-width: 768px) {
         display: block;
       }
     }
-
     &--tiny {
       display: block;
       @media (min-width: 768px) {

diff --git a/src/open_inwoner/scss/components/Filter/FilterDropdown.scss b/src/open_inwoner/scss/components/Filter/FilterDropdown.scss
@@ -10,16 +10,16 @@
     justify-content: space-between;
     padding-left: 0;
     width: 100%;
-  }
 
-  .button[aria-expanded='true'] *[class*='icons'] {
-    transform: rotate(180deg);
-    transition: transform 0.3s ease-in-out;
-  }
+    &[aria-expanded='true'] *[class*='icons'] {
+      transform: rotate(180deg);
+      transition: transform 0.25s ease-in-out;
+    }
 
-  .button[aria-expanded='false'] *[class*='icons'] {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease-in-out;
+    &[aria-expanded='false'] *[class*='icons'] {
+      transform: rotate(0deg);
+      transition: transform 0.25s ease-in-out;
+    }
   }
 
   &__content {

diff --git a/src/open_inwoner/search/tests/test_page.py b/src/open_inwoner/search/tests/test_page.py
@@ -294,7 +294,9 @@ def test_search_with_filters(self):
         # check if we see all checkboxes
         for facet in FacetChoices.values:
             # tags, organizations, categories
-            controls = page.locator(f"input[form='search-form'][name='{facet}']")
+            controls = page.locator(
+                f"input[form='search-form'][name='{facet}']:visible"
+            )
             expect(controls).to_have_count(2)
             for checkbox in controls.all():
                 # the input elements are hidden for styling so just test for enabled

diff --git a/src/open_inwoner/templates/pages/search.html b/src/open_inwoner/templates/pages/search.html
@@ -12,9 +12,9 @@ <h1 class="utrecht-heading-1">{% trans "Zoekresultaten voor " %} "{% firstof sea
 
     {#  facets and results section #}
     <div class="grid">
-        {% if paginator.count %}
+    {% if paginator.count %}
         {% if search_filter_categories or search_filter_tags or search_filter_organizations %}
-            {# Mobile: Use FilterModal.html with filter content #}
+            {# Mobile filters #}
             <aside class="grid__sidebar grid__filters-mobile" aria-label="{% trans "Zoekfilters" %}">
                 <h2 class="utrecht-heading-2">{% trans "Zoekfilters" %}</h2>
 
@@ -47,7 +47,7 @@ <h2 class="utrecht-heading-2">{% trans "Zoekfilters" %}</h2>
                 </div>
             </aside>
 
-            {# Desktop: Regular filters #}
+            {# Desktop filters #}
             <aside class="grid__sidebar grid__filters" aria-label="{% trans "Zoekfilters" %}">
                 <h2 class="utrecht-heading-2">{% trans "Zoekfilters" %}</h2>
                 {% if search_filter_categories %}