Squashed commit of the following:

commit dc81806 Author: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Date: Tue Nov 22 13:32:46 2022 -0700 Add media sizing settings to featured product (Shopify#2114) commit 9875aea Author: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Date: Tue Nov 22 13:17:55 2022 -0700 Adjust constrain media values for quick add modal (Shopify#2113) * Adjust constrain media values for quickadd * Adjust offset logic * Minor formatting fix commit 2eb8bf6 Author: Ludo <ludo.segura@shopify.com> Date: Tue Nov 22 11:50:50 2022 -0500 Add fixed sizes for some images to prevent errors (Shopify#2087) * remove the mention of sizes where unnecessary * remove another instance * add fixed size to the images in structured data * adjust size to 1920 * edit logo size in structured data * remove conditional info * change value to match other logo size values commit 2f9b9f3 Author: Ludo <ludo.segura@shopify.com> Date: Mon Nov 21 15:44:24 2022 -0500 Remove alt attribute in image_tag filter where unnecessary (Shopify#2117) * Add fallback to alt attribute where image_tag filter is used * remove unnecessary use of alt attribute in image_tag filter commit 251e5d9 Author: Ludo <ludo.segura@shopify.com> Date: Mon Nov 21 12:18:44 2022 -0500 Move share button into a snippet (Shopify#2123) * Move share button into a snippet * change the property name to context and add details in snippet * address review comments * edit props names and description * Address reviewers comment. Remove unused prop and edit existing ID * move script at the top commit 539af27 Author: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Date: Mon Nov 21 09:01:58 2022 -0800 Prettier liquid files snippets. (Shopify#2115) commit 503fdf8 Author: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Date: Thu Nov 17 08:51:21 2022 -0800 Remove noscript css import for product recommendations (Shopify#2101) commit b2b01fd Author: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Date: Thu Nov 17 08:50:33 2022 -0800 Change variables names (Shopify#2055) commit cf05d0d Author: Francisca Calabria Rubio <13103124+FCalabria@users.noreply.github.com> Date: Thu Nov 17 16:50:55 2022 +0100 Select text input content on trapFocus (Shopify#2106) * Select text input content on trapFocus * PR fix commit b86d1f3 Author: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Date: Thu Nov 17 08:50:43 2022 -0700 Change thumbnail media fit to "fill" by default (Shopify#2044) * Change thumbnail media fit to cover by default * Simplify and cleanup thumbnail fit approach commit 8ab8e61 Author: Ludo <ludo.segura@shopify.com> Date: Thu Nov 17 10:50:28 2022 -0500 Tweak the image_url size to be the max value where necessary (Shopify#2110) * Tweak the image_url size to be the max value where necessary * fix sizing in the header. commit c337301 Author: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Date: Thu Nov 17 10:49:52 2022 -0500 Update 1 translation file (Shopify#2130) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> commit bc8f433 Author: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Date: Thu Nov 17 08:49:10 2022 -0700 Add constrain media and media fit settings to product page (Shopify#2052) * Add constrain height setting * Add constrain scaling functionality * Add media fit setting and functionality * Quick add override and typo fixes * Update setting language and code cosmetics * Update 8 translation files * Update 5 translation files * Update 3 translation files * Update 3 translation files * Update 1 translation file * Add comment Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
Rabter1 · Nov 23, 2022 · 2592c41 · 2592c41
1 parent be24b56
commit 2592c41
Show file tree

Hide file tree

Showing 50 changed files with 1,683 additions and 778 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -68,6 +68,12 @@ function trapFocus(container, elementToFocus = container) {
   document.addEventListener('focusin', trapFocusHandlers.focusin);
 
   elementToFocus.focus();
+
+  if (elementToFocus.tagName === 'INPUT' &&
+    ['search', 'text', 'email', 'url'].includes(elementToFocus.type) &&
+    elementToFocus.value) {
+    elementToFocus.setSelectionRange(0, elementToFocus.value.length);
+  }
 }
 
 // Here run the querySelector to figure out if the browser supports :focus-visible or not and run code based on it.

diff --git a/assets/quick-add.css b/assets/quick-add.css
@@ -30,11 +30,12 @@
 }
 
 .quick-add-modal__content {
+  --modal-height-offset: 3.2rem;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
-  margin: 3.2rem auto 0;
+  margin: var(--modal-height-offset) auto 0;
   width: 100%;
   background-color: rgb(var(--color-background));
   overflow: hidden;
@@ -44,9 +45,10 @@
 
 @media screen and (min-width: 750px) {
   .quick-add-modal__content {
-    margin-top: 10rem;
+    --modal-height-offset: 10rem;
+    margin-top: var(--modal-height-offset);
     width: 80%;
-    max-height: calc(100% - 20rem);
+    max-height: calc(100% - var(--modal-height-offset) * 2);
     overflow-y: auto;
   }
 
@@ -67,10 +69,11 @@
 }
 
 .quick-add-modal__content-info {
+  --modal-padding: 2.5rem;
   padding-right: 4.4rem;
   display: flex;
   overflow-y: auto;
-  padding: 2.5rem;
+  padding: var(--modal-padding);
   height: 100%;
 }
 
@@ -88,9 +91,9 @@
   }
 
   .quick-add-modal__content {
-    bottom: 3.2rem;
+    bottom: var(--modal-height-offset);
   }
-  
+
   .quick-add-modal__content-info > * {
     max-height: 100%;
   }
@@ -209,3 +212,13 @@ quick-add-modal .product-form__buttons {
   min-width: 100%;
   box-sizing: border-box;
 }
+
+quick-add-modal .product-media-container.constrain-height {
+  --viewport-offset: calc((var(--modal-height-offset) + var(--modal-padding) + var(--popup-border-width)) * 2);
+}
+
+@media screen and (min-width: 750px) {
+  quick-add-modal .product-media-container.constrain-height {
+    --constrained-min-height: 400px;
+  }
+}
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -1210,18 +1210,10 @@ a.product__text {
 }
 
 .thumbnail img {
-  pointer-events: none;
-}
-
-.thumbnail--narrow img {
-  height: 100%;
-  width: auto;
-  max-width: 100%;
-}
-
-.thumbnail--wide img {
-  height: auto;
+  object-fit: cover;
   width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
 
 .thumbnail__badge .icon {
@@ -1391,14 +1383,72 @@ a.product__text {
 /* Product-thumbnail snippet */
 
 .product-media-container {
+  --aspect-ratio: var(--preview-ratio);
+  --ratio-percent: calc(1 / var(--aspect-ratio) * 100%);
+  position: relative;
   width: 100%;
   max-width: calc(100% - calc(var(--media-border-width) * 2));
 }
 
+.product-media-container.constrain-height {
+  /* arbitrary offset value based on average theme spacing and header height */
+  --viewport-offset: 400px;
+  --constrained-min-height: 300px;
+  --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%;
   }
+
+  .product-media-container:not(.media-type-image) {
+    /* override to use actual media ratio (not poster ratio) for video/models on desktop */
+    --aspect-ratio: var(--ratio);
+  }
+
+  .product-media-container.constrain-height {
+    --viewport-offset: 170px;
+    --constrained-min-height: 500px;
+  }
+
+  .product-media-container.media-fit-cover,
+  .product-media-container.media-fit-cover .product__modal-opener,
+  .product-media-container.media-fit-cover .media {
+    height: 100%;
+  }
+
+  .product-media-container.media-fit-cover .deferred-media__poster img {
+    object-fit: cover;
+    width: 100%;
+  }
 }
 
 .product-media-container .product__modal-opener {
@@ -1411,7 +1461,3 @@ a.product__text {
     display: none;
   }
 }
-
-.product-media-container .media {
-  padding-top: var(--ratio-percent);
-}
diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -1886,7 +1886,7 @@
           }
         },
         "media_size": {
-          "label": "Velikost multimédií v počítači",
+          "label": "Šířka multimédií v počítači",
           "info": "Multimédia se automaticky optimalizují pro mobilní prostředí.",
           "options__1": {
             "label": "Malá"
@@ -1932,6 +1932,18 @@
           "options__3": {
             "label": "Bez zvětšení"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Zmenšit multimédia na výšku obrazovky"
+        },
+        "media_fit": {
+          "label": "Přizpůsobení multimédií",
+          "options__1": {
+            "label": "Originál"
+          },
+          "options__2": {
+            "label": "Výplň"
+          }
         }
       }
     },

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -1886,7 +1886,7 @@
           }
         },
         "media_size": {
-          "label": "Mediestørrelse til computer",
+          "label": "Computermediets bredde",
           "options__1": {
             "label": "Lille"
           },
@@ -1932,6 +1932,18 @@
           "options__3": {
             "label": "Ingen zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Begræns mediet til skærmhøjden"
+        },
+        "media_fit": {
+          "label": "Medietilpasning",
+          "options__1": {
+            "label": "Oprindelig"
+          },
+          "options__2": {
+            "label": "Udfyld"
+          }
         }
       }
     },

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -1885,7 +1885,7 @@
           }
         },
         "media_size": {
-          "label": "Mediengröße für Desktop",
+          "label": "Medienbreite für Desktop",
           "options__1": {
             "label": "Klein"
           },
@@ -1931,6 +1931,18 @@
           "options__3": {
             "label": "Nicht zoomen"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Medien auf Bildschirmhöhe beschränken"
+        },
+        "media_fit": {
+          "label": "Medienanpassung",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Füllung"
+          }
         }
       },
       "name": "Produktinformationen"

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -2043,8 +2043,11 @@
             "label": "Thumbnail carousel"
           }
         },
+        "constrain_to_viewport": {
+          "label": "Constrain media to screen height"
+        },
         "media_size": {
-          "label": "Desktop media size",
+          "label": "Desktop media width",
           "info": "Media is automatically optimized for mobile.",
           "options__1": {
             "label": "Small"
@@ -2079,6 +2082,15 @@
             "label": "Right"
           }
         },
+        "media_fit": {
+          "label": "Media fit",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Fill"
+          }
+        },
         "mobile_thumbnails": {
           "label": "Mobile layout",
           "options__1": {

diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -1886,7 +1886,7 @@
           }
         },
         "media_size": {
-          "label": "Tamaño de elementos multimedia en computadoras",
+          "label": "Ancho del elemento multimedia en computadora",
           "info": "Los elementos multimedia se optimizan automáticamente para dispositivos móviles.",
           "options__1": {
             "label": "Pequeño"
@@ -1932,6 +1932,18 @@
           "options__3": {
             "label": "Sin zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Ajustar el elemento multimedia a la altura de la pantalla"
+        },
+        "media_fit": {
+          "label": "Ajuste del elemento multimedia",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Rellenar"
+          }
         }
       }
     },

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -1885,7 +1885,7 @@
           }
         },
         "media_size": {
-          "label": "Median koko tietokoneella",
+          "label": "Median leveys tietokoneella",
           "options__1": {
             "label": "Pieni"
           },
@@ -1931,6 +1931,18 @@
           "options__3": {
             "label": "Ei zoomausta"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Sovita media näytön korkeuteen"
+        },
+        "media_fit": {
+          "label": "Median sovitus",
+          "options__1": {
+            "label": "Alkuperäinen"
+          },
+          "options__2": {
+            "label": "Täyttö"
+          }
         }
       },
       "name": "Tuotetiedot"

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -1885,7 +1885,7 @@
           }
         },
         "media_size": {
-          "label": "Taille du support de bureau",
+          "label": "Largeur des supports multimédias sur ordinateur",
           "info": "Les médias sont automatiquement optimisés pour les mobiles.",
           "options__1": {
             "label": "Petit"
@@ -1931,6 +1931,18 @@
           "options__3": {
             "label": "Pas de zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Limiter les supports multimédias à la hauteur de l’écran"
+        },
+        "media_fit": {
+          "label": "Taille des supports multimédias",
+          "options__1": {
+            "label": "Taille d’origine"
+          },
+          "options__2": {
+            "label": "Remplir"
+          }
         }
       },
       "name": "Informations produits"