diff --git a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html index 99a0e576fe..eb6f15b329 100644 --- 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 bordered=False text=_("Wis alle filters") id="resetMultiSelectFilters" type="button" transparent=True primary=True %}
diff --git a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss index bde6691061..b92fe272c7 100644 --- 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 index 5d314084bd..1507a12118 100644 --- 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 index afae67b865..ec036b2e50 100644 --- 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 index 6b7bbf950a..798c0eb3ae 100644 --- a/src/open_inwoner/templates/pages/cases/list_inner.html +++ b/src/open_inwoner/templates/pages/cases/list_inner.html @@ -7,7 +7,7 @@

{{ page_title }} ({{ paginator.count }}
{% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="show-controls" %} -
+
{% button bordered=False text=_("Wis alle filters") id="resetFilters" type="button" transparent=True primary=True %}
@@ -19,7 +19,7 @@

{{ page_title }} ({{ paginator.count }} {% include "components/FilterBar/MultiSelectListbox.html" with statusfrequencies=status_freqs %} {# Mobile submit button updates on select #} -
+