Update setting language and code cosmetics

Shopify · Nov 9, 2022 · 7bd9b03 · 7bd9b03
1 parent 6ab47ff
commit 7bd9b03
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 38 deletions.
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -1374,16 +1374,38 @@ a.product__text {
 }
 
 .product-media-container.constrain-height {
-  /* amount to subtract from viewport height when calculating media height */
   --viewport-offset: 400px;
-  /* smallest height the image is allowed to scale down to */
   --constrained-min-height: 300px;
-  /* the larger of either the calculated viewport height or the fixed minimum */
   --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
   margin-right: auto;
   margin-left: auto;
 }
 
+.product-media-container.constrain-height.media-fit-contain {
+  --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
+  width: min(var(--contained-width), 100%);
+}
+
+.product-media-container .media {
+  padding-top: var(--ratio-percent);
+}
+
+.product-media-container.constrain-height .media {
+  padding-top: min(var(--constrained-height), var(--ratio-percent));
+}
+
+@media screen and (max-width: 749px) {
+  .product-media-container.media-fit-cover {
+    display: flex;
+    align-self: stretch;
+  }
+
+  .product-media-container.media-fit-cover .media {
+    /* allow media img element to scale relative to modal-opener/product-media-container */
+    position: initial;
+  }
+}
+
 @media screen and (min-width: 750px) {
   .product-media-container {
     max-width: 100%;
@@ -1402,45 +1424,15 @@ a.product__text {
   .product-media-container.media-fit-cover,
   .product-media-container.media-fit-cover .product__modal-opener,
   .product-media-container.media-fit-cover .media {
-    /* allow media to vertically fill available grid row space */
     height: 100%;
   }
 
   .product-media-container.media-fit-cover .deferred-media__poster img {
-    /* allow deferred posters fill media container  */
     object-fit: cover;
     width: 100%;
   }
 }
 
-.product-media-container .media {
-  padding-top: var(--ratio-percent);
-}
-
-.product-media-container.constrain-height .media {
-  /* the smaller of either the constrained height or the full size default */
-  padding-top: min(var(--constrained-height), var(--ratio-percent));
-}
-
-.product-media-container.constrain-height.media-fit-contain {
-  /* the smaller of either the constrained width or the full size default */
-  --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
-  width: min(var(--contained-width), 100%);
-}
-
-@media screen and (max-width: 749px) {
-  .product-media-container.media-fit-cover {
-    /* allow media to vertically fill available mobile slide space */
-    display: flex;
-    align-self: stretch;
-  }
-
-  .product-media-container.media-fit-cover .media {
-    /* allow media img element to scale relative to modal-opener/product-media-container */
-    position: initial;
-  }
-}
-
 .product-media-container .product__modal-opener {
   display: block;
   position: relative;

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -2020,19 +2020,19 @@
           }
         },
         "constrain_to_viewport": {
-          "label": "Constrain media to screen size"
+          "label": "Constrain media to screen height"
         },
         "media_size": {
           "label": "Desktop media width",
           "info": "Media is automatically optimized for mobile.",
           "options__1": {
-            "label": "Small (45%)"
+            "label": "Small"
           },
           "options__2": {
-            "label": "Medium (55%)"
+            "label": "Medium"
           },
           "options__3": {
-            "label": "Large (65%)"
+            "label": "Large"
           }
         },
         "image_zoom": {

diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid
@@ -50,7 +50,7 @@
 {%- endcapture -%}
 
 <div
-  class="product-media-container media-type-{{ media.media_type }} media-fit-{{ media_fit }}{% if constrain_to_viewport %} constrain-height{% endif %} gradient global-media-settings"
+  class="product-media-container media-type-{{ media.media_type }} media-fit-{{ media_fit }} global-media-settings gradient{% if constrain_to_viewport %} constrain-height{% endif %}"
   style="--ratio: {{ media.aspect_ratio | default: 1.0 }}; --preview-ratio: {{ media.preview_image.aspect_ratio | default: 1.0 }};"
 >
   <noscript>