Fix facet price filter label spacing (Shopify#300)

* Fix facet price filter label spacing * Move currency label out of the wrapperto fix the absolute position * add strip_html to the message when filtering price * apply strip_html before | escape filter
joeufb · Aug 3, 2021 · 7c130e8 · 7c130e8
1 parent 53168d1
commit 7c130e8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/assets/template-collection.css b/assets/template-collection.css
@@ -280,20 +280,21 @@
   padding: 2rem;
 }
 
-.facets__price > * + * {
+.facets__price .field + .field-currency {
   margin-left: 2rem;
 }
 
 .facets__price .field {
   align-items: center;
 }
 
-.facets__price .field .field__currency {
+.facets__price .field-currency {
+  align-self: center;
   margin-right: 0.6rem;
 }
 
 .facets__price .field__label {
-  left: 2.1rem;
+  left: 1.5rem;
 }
 
 button.facets__button {

diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
@@ -103,7 +103,7 @@
                   </summary>
                   <div class="facets__display">
                     <div class="facets__header">
-                      {%- assign max_price_amount = filter.range_max | money | escape -%}
+                      {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
                       <span class="facets__selected">{{ "sections.collection_template.max_price" | t: price: max_price_amount }}</span>
                       <facet-remove>
                         <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link" >
@@ -112,8 +112,8 @@
                       </facet-remove>
                     </div>
                     <price-range class="facets__price">
+                      <span class="field-currency">{{ cart.currency.symbol }}</span>
                       <div class="field">
-                        <span class="field__currency">{{ cart.currency.symbol }}</span>
                         <input class="field__input"
                           name="{{ filter.min_value.param_name }}"
                           id="Filter-{{ filter.label | escape }}-GTE"
@@ -128,8 +128,9 @@
                         </input>
                         <label class="field__label" for="Filter-{{ filter.label | escape }}-GTE">{{ 'sections.collection_template.from' | t }}</label>
                       </div>
+
+                      <span class="field-currency">{{ cart.currency.symbol }}</span>
                       <div class="field">
-                        <span class="field__currency">{{ cart.currency.symbol }}</span>
                         <input class="field__input"
                           name="{{ filter.max_value.param_name }}"
                           id="Filter-{{ filter.label | escape }}-LTE"
@@ -311,8 +312,8 @@
                         <p class="mobile-facets__info">{{ "sections.collection_template.max_price" | t: price: max_price_amount }}</p>
 
                         <price-range class="facets__price">
+                          <span class="field-currency">{{ cart.currency.symbol }}</span>
                           <div class="field">
-                            <span class="field__currency">{{ cart.currency.symbol }}</span>
                             <input class="field__input"
                               name="{{ filter.min_value.param_name }}"
                               id="Mobile-Filter-{{ filter.label | escape }}-GTE"
@@ -327,8 +328,9 @@
                             </input>
                             <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">{{ 'sections.collection_template.from' | t }}</label>
                           </div>
+
+                          <span class="field-currency">{{ cart.currency.symbol }}</span>
                           <div class="field">
-                            <span class="field__currency">{{ cart.currency.symbol }}</span>
                             <input class="field__input"
                               name="{{ filter.max_value.param_name }}"
                               id="Mobile-Filter-{{ filter.label | escape }}-LTE"