Sofias review changes

Shopify · Oct 12, 2023 · 8a69de7 · 8a69de7
1 parent 663a057
commit 8a69de7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -306,6 +306,10 @@
   align-items: flex-start;
 }
 
+.facets-layout-grid .visual-display--style-thumbnail {
+  --visual-display__size: 100%;
+}
+
 .facets__item label,
 .facets__item input[type='checkbox'] {
   cursor: pointer;
@@ -977,16 +981,6 @@ input.mobile-facets__checkbox {
   padding-right: 1.5rem;
 }
 
-.mobile-facets .facets-layout-grid--thumbnail {
-  margin: 0 auto;
-  width: min-content;
-  max-width: 100%;
-}
-
-.mobile-facets .visual-display--style-thumbnail {
-  --visual-display__size: 9rem;
-}
-
 .visual-display-parent {
   padding: 0;
   height: 100%;

diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
@@ -24,7 +24,8 @@
   overflow: hidden;
 }
 
-.visual-display-parent {
+.visual-display-parent .visual-display--style-swatch,
+.visual-display-parent--thumbnail {
   outline-offset: 0.2rem;
 }
 
@@ -92,8 +93,8 @@
   transform-origin: left;
 }
 
-.visual-display > * {
-  display: block !important;
+.visual-display .visual-display__child {
+  display: block;
   height: 100%;
   width: 100%;
 }

diff --git a/snippets/facets.liquid b/snippets/facets.liquid
@@ -118,9 +118,11 @@
                   when 'swatch', 'thumbnail'
                     assign has_visual_display = true
                     assign visual_layout_class = 'facets-layout-grid facets-layout-grid--' | append: filter.display_style
+                    assign show_more_number = 24
                   else
                     assign has_visual_display = false
                     assign visual_layout_class = 'facets-layout-list'
+                    assign show_more_number = 10
                 endcase
               %}
 
@@ -180,7 +182,7 @@
                               endif
                             %}
 
-                            <li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
+                            <li class="list-menu__item facets__item{% if forloop.index > show_more_number and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
                               <label
                                 for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
                                 class="facets__label facet-checkbox{% if is_disabled %} facet-checkbox--disabled disabled{% endif %}{% if has_visual_display %} visual-display-parent visual-display-parent--{{ filter.display_style }}{% endif %}{% if value.active %} active{% endif %}"
@@ -315,7 +317,7 @@
                           {%- endfor -%}
                         </ul>
                       </fieldset>
-                      {%- if filter.values.size > 10 and filter_type == 'vertical' -%}
+                      {%- if filter.values.size > show_more_number and filter_type == 'vertical' -%}
                         <show-more-button>
                           <button
                             class="button-show-more link underlined-link no-js-hidden"

diff --git a/snippets/visual-display.liquid b/snippets/visual-display.liquid
@@ -29,10 +29,17 @@
           {{ color }} {{ angle }}deg{%- assign angle = angle | plus: angle_increment %} {{ angle }}deg{%- unless forloop.last %}, {%- endunless -%}
         {%- endfor -%}
       {%- endcapture -%}
-      <div style="background: conic-gradient({{ conic_gradient }}); transform: rotateZ({{ rotation }});"></div>
+      <div
+        class="visual-display__child"
+        style="background: conic-gradient({{ conic_gradient }}); transform: rotateZ({{ rotation }});"
+      ></div>
     {%- when 'image' -%}
-      {{ value | image_url: width: 300 | image_tag: class: 'visual-display__image', alt: value.alt }}
+      {{
+        value
+        | image_url: width: 300
+        | image_tag: class: 'visual-display__child visual-display__image', alt: value.alt
+      }}
     {%- else -%}
-      <div></div>
+      <div class="visual-display__child"></div>
   {%- endcase -%}
 </div>