diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.scss b/app/assets/stylesheets/darkswarm/_shop-filters.scss index 91bb5c7933..b7296778ab 100644 --- a/app/assets/stylesheets/darkswarm/_shop-filters.scss +++ b/app/assets/stylesheets/darkswarm/_shop-filters.scss @@ -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; diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml index 57270c62e6..bccaf6e334 100644 --- a/app/views/shop/products/_form.html.haml +++ b/app/views/shop/products/_form.html.haml @@ -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}"}}