Merge pull request #8600 from seballot/shop-filters

Make the shop filter section always visible when scrolling

app/assets/stylesheets/admin/shared/scroll_bar.scss

@@ -0,0 +1,13 @@
+.thin-scroll-bar::-webkit-scrollbar-track {
+  background-color: #f6f6f6;;
+  border: 1px solid #f0f0f0;
+}
+
+.thin-scroll-bar::-webkit-scrollbar {
+  width: 7px;
+}
+
+.thin-scroll-bar::-webkit-scrollbar-thumb {
+  background-color: #c3c3c3;
+  min-height: 40px;
+}

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;

app/assets/stylesheets/darkswarm/all.scss

@@ -23,3 +23,4 @@ ofn-modal {
 }
 
 @import "../shared/question-mark-icon";
+@import '../admin/shared/scroll_bar';

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}"}}