Make the shop filter section always visible when scrolling

This commit is contained in:
Sebastian Castro
2021-12-10 20:53:29 +01:00
parent 8fe125bd1b
commit e20a8122b1
2 changed files with 9 additions and 2 deletions

View File

@@ -173,6 +173,13 @@
z-index: 90;
}
.sticky-shop-filters-container {
position: sticky;
top: $topbar-height;
max-height: calc(100vh - #{$topbar-height});
overflow-y: auto;
}
.filter-shopfront {
&.taxon-selectors, &.property-selectors {
background: transparent;

View File

@@ -25,12 +25,12 @@
.hide-for-medium-down.large-1.columns
-# Space between products and filters
 
.hide-for-medium-down.large-2.columns
.sticky-shop-filters-container.thin-scroll-bar.hide-for-medium-down.large-2.columns
%h5.filter-header
= t(:products_filter_by)
%span{ng: {show: 'filtersCount()' }}
= "({{ filtersCount() }} #{t(:products_filter_selected)})"
= render partial: "shop/products/filters"
.expanding-sidebar.shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}}