From ad6861ac9e87cc751e9c93eebe54fefdbb92bb85 Mon Sep 17 00:00:00 2001 From: martinamarien Date: Fri, 1 Apr 2022 09:58:32 -0400 Subject: [PATCH 1/6] fix no-js layout for drawer and product count position --- assets/component-facets.css | 27 ++------------------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index 7d7007fc529..5f31076c8bd 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1074,22 +1074,11 @@ input.mobile-facets__checkbox { .facets-container-drawer .mobile-facets__wrapper { margin-right: 2rem; + flex-grow: 1; } .facets-container-drawer .product-count { - align-self: flex-start; - } - - .facets-container-drawer .mobile-facets__wrapper { - width: calc(40% - 2rem); - } - - .facets-container-drawer .facets { - width: 40%; - } - - .facets-container-drawer .product-count { - width: 20%; + margin-left: 3.5rem; } .facets-container-drawer .facets-pill { @@ -1100,18 +1089,6 @@ input.mobile-facets__checkbox { .facets-container-drawer .facets__form { display: block; } - - .no-js .facets-container-drawer .mobile-facets__wrapper { - width: calc(20% - 2rem); - } - - .no-js .facets-container-drawer .facets { - width: 60%; - } - - .no-js .facets-container-drawer .product-count { - width: 20%; - } } @media screen and (min-width: 750px) and (max-width: 989px) { From df52f3c807e1147fe963700ed028e711f4cb2ebd Mon Sep 17 00:00:00 2001 From: martinamarien Date: Fri, 1 Apr 2022 12:00:59 -0400 Subject: [PATCH 2/6] udpate vertical product count position on drawer on desktop --- assets/component-facets.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/component-facets.css b/assets/component-facets.css index 5f31076c8bd..cb9c871c1a4 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1069,6 +1069,7 @@ input.mobile-facets__checkbox { .facets-container-drawer { display: flex;; flex-flow: row wrap; + align-items: center; column-gap: 0; } From 072b3444273cebd05b42da16043f9de04c28ff06 Mon Sep 17 00:00:00 2001 From: martinamarien Date: Fri, 1 Apr 2022 16:04:46 -0400 Subject: [PATCH 3/6] fix broken html --- snippets/facets.liquid | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 3c971a3e6fc..379a96a9c5b 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -353,7 +353,7 @@ {% comment %} Sorting for vertical filter are grouped with filter when no JS{% endcomment %} {%- if enable_sorting and filter_type == 'vertical' -%} - +
@@ -376,7 +376,7 @@
- + {%- endif -%} {%- endif -%} {% comment %} Drawer and mobile filter {% endcomment %} From 9a427e38fbb84b90f9c8ca984afe4cd1197368b4 Mon Sep 17 00:00:00 2001 From: martinamarien Date: Fri, 1 Apr 2022 17:15:18 -0400 Subject: [PATCH 4/6] remove unnecessary facets class --- snippets/facets.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/facets.liquid b/snippets/facets.liquid index 379a96a9c5b..44b878139b6 100644 --- a/snippets/facets.liquid +++ b/snippets/facets.liquid @@ -353,7 +353,7 @@ {% comment %} Sorting for vertical filter are grouped with filter when no JS{% endcomment %} {%- if enable_sorting and filter_type == 'vertical' -%} - +
From e4ade8f20480aaf0705455fd14dd63225517fa0c Mon Sep 17 00:00:00 2001 From: martinamarien Date: Fri, 1 Apr 2022 17:49:21 -0400 Subject: [PATCH 5/6] update some logic to fix state after rebase --- assets/component-facets.css | 4 ++-- sections/main-collection-product-grid.liquid | 2 +- sections/main-search.liquid | 2 +- snippets/facets.liquid | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/component-facets.css b/assets/component-facets.css index cb9c871c1a4..033749b1404 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -992,11 +992,11 @@ input.mobile-facets__checkbox { padding-right: 3rem; } - .js .facets-vertical .facets-wrapper.no-filter { + .facets-vertical .facets-wrapper--no-filters { display: none; } - .no-js .facets-vertical .facets-wrapper.no-filter { + .no-js .facets-vertical .facets-wrapper--no-filter { display: block; } diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index 1ccd496f549..9c5976c2c65 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -77,7 +77,7 @@ {{ 'component-facets.css' | asset_url | stylesheet_tag }} {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} -