Merge pull request #1412 from maykinmedia/feature/2783-show-submit-fi…

…lterbar [#2783] Show submit button always when filter-bar opened
maykinmedia · Sep 26, 2024 · 0d3d22f · 0d3d22f
2 parents 08e3b2a + bdc8f22
commit 0d3d22f
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 18 deletions.
diff --git a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
@@ -18,7 +18,7 @@
         </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">
+            <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>

diff --git a/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js b/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js
@@ -96,22 +96,6 @@ function initFilterBar() {
       if (resultTextElement) {
         resultTextElement.textContent = sum === 1 ? 'resultaat' : 'resultaten'
       }
-
-      const filterCasesButton = document.getElementById('filterCases')
-      const filterFormActions = document.getElementById('filterFormActions')
-      const resetFilters = document.getElementById('resetFilters')
-
-      if (filterCasesButton && filterFormActions) {
-        if (sum > 0) {
-          filterCasesButton.classList.remove('hide')
-          filterFormActions.classList.remove('hide')
-          resetFilters.classList.remove('hide')
-        } else {
-          filterCasesButton.classList.add('hide')
-          filterFormActions.classList.add('hide')
-          resetFilters.classList.add('hide')
-        }
-      }
     }
 
     const initSelectBehavior = function () {

diff --git a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
@@ -50,6 +50,7 @@
 
     &.active {
       background-color: var(--color-secondary);
+      border: 1px solid var(--color-secondary);
       color: white;
       justify-content: flex-start;
 
@@ -117,6 +118,8 @@
         display: flex;
         justify-content: start;
         color: var(--color-gray-dark-900);
+        border: 1px solid var(--color-gray);
+        border-top: none;
         line-height: 0;
         padding: var(--spacing-medium) var(--spacing-large);
         max-width: 260px;
@@ -171,7 +174,6 @@
 
   .show {
     display: inline-block;
-    border: 1px solid var(--color-gray);
     opacity: 1;
     z-index: 2000;
   }