From 8fe125bd1be5d9ce40cdae560609bf14b69315a5 Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Fri, 10 Dec 2021 20:53:23 +0100 Subject: [PATCH 1/2] Adds thin-scroll-bar class --- app/assets/stylesheets/admin/shared/scroll_bar.scss | 13 +++++++++++++ app/assets/stylesheets/darkswarm/all.scss | 1 + 2 files changed, 14 insertions(+) create mode 100644 app/assets/stylesheets/admin/shared/scroll_bar.scss diff --git a/app/assets/stylesheets/admin/shared/scroll_bar.scss b/app/assets/stylesheets/admin/shared/scroll_bar.scss new file mode 100644 index 0000000000..adcb9a54f6 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/all.scss b/app/assets/stylesheets/darkswarm/all.scss index 2a7eefd1e9..aef5c4db7d 100644 --- a/app/assets/stylesheets/darkswarm/all.scss +++ b/app/assets/stylesheets/darkswarm/all.scss @@ -23,3 +23,4 @@ ofn-modal { } @import "../shared/question-mark-icon"; +@import '../admin/shared/scroll_bar'; From e20a8122b1acd87ea12a2600645d5080835eacf7 Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Fri, 10 Dec 2021 20:53:29 +0100 Subject: [PATCH 2/2] Make the shop filter section always visible when scrolling --- app/assets/stylesheets/darkswarm/_shop-filters.scss | 7 +++++++ app/views/shop/products/_form.html.haml | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) 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}"}}