Skip to content
7 changes: 6 additions & 1 deletion assets/quick-add.css
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
.quick-add-modal__content {
bottom: 3.2rem;
}

.quick-add-modal__content-info > * {
max-height: 100%;
}
Expand Down Expand Up @@ -209,3 +209,8 @@ quick-add-modal .product-form__buttons {
min-width: 100%;
box-sizing: border-box;
}

quick-add-modal .product-media-container.constrain-height .media {
/* constrain behavior tbd, negate constrain effects on quick add modal for now */
padding-top: var(--ratio-percent);
}
62 changes: 58 additions & 4 deletions assets/section-main-product.css
Original file line number Diff line number Diff line change
Expand Up @@ -1366,14 +1366,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 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this needs as much specificity, this seems to work both on mobile and desktop:

Suggested change
.product-media-container.constrain-height.media-fit-contain {
.media-fit-contain {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I intend for media-fit-contain/cover and constrain-height to become the common naming conventions for any section to offer either of these features, so cutting out .product-media-container would probably be shortsighted even if it's not required presently.

I know you didn't have the full picture with the media fit setting when you first looked, but for context, these other classes and the specific combinations of them are deliberate and shouldn't be removed for specificity. I did think about using :where() for maintaining minimal specificity in these cases, but decided against it because browser support is still relatively recent, just barely being within our requirements.

--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 {
Expand All @@ -1386,7 +1444,3 @@ a.product__text {
display: none;
}
}

.product-media-container .media {
padding-top: var(--ratio-percent);
}
14 changes: 13 additions & 1 deletion locales/cs.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1862,7 +1862,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á"
Expand Down Expand Up @@ -1908,6 +1908,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ň"
}
}
}
},
Expand Down
14 changes: 13 additions & 1 deletion locales/da.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1862,7 +1862,7 @@
}
},
"media_size": {
"label": "Mediestørrelse til computer",
"label": "Computermediets bredde",
"options__1": {
"label": "Lille"
},
Expand Down Expand Up @@ -1908,6 +1908,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"
}
}
}
},
Expand Down
14 changes: 13 additions & 1 deletion locales/de.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1861,7 +1861,7 @@
}
},
"media_size": {
"label": "Mediengröße für Desktop",
"label": "Medienbreite für Desktop",
"options__1": {
"label": "Klein"
},
Expand Down Expand Up @@ -1907,6 +1907,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"
Expand Down
14 changes: 13 additions & 1 deletion locales/en.default.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -2019,8 +2019,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"
Expand Down Expand Up @@ -2055,6 +2058,15 @@
"label": "Right"
}
},
"media_fit": {
"label": "Media fit",
"options__1": {
"label": "Original"
},
"options__2": {
"label": "Fill"
}
},
"mobile_thumbnails": {
"label": "Mobile layout",
"options__1": {
Expand Down
14 changes: 13 additions & 1 deletion locales/es.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1862,7 +1862,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"
Expand Down Expand Up @@ -1908,6 +1908,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"
}
}
}
},
Expand Down
14 changes: 13 additions & 1 deletion locales/fi.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1861,7 +1861,7 @@
}
},
"media_size": {
"label": "Median koko tietokoneella",
"label": "Median leveys tietokoneella",
"options__1": {
"label": "Pieni"
},
Expand Down Expand Up @@ -1907,6 +1907,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"
Expand Down
14 changes: 13 additions & 1 deletion locales/fr.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1861,7 +1861,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"
Expand Down Expand Up @@ -1907,6 +1907,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"
Expand Down
14 changes: 13 additions & 1 deletion locales/it.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1862,7 +1862,7 @@
}
},
"media_size": {
"label": "Dimensioni contenuti multimediali desktop",
"label": "Larghezza dei contenuti multimediali su desktop",
"options__1": {
"label": "Piccola"
},
Expand Down Expand Up @@ -1908,6 +1908,18 @@
"options__3": {
"label": "Nessuno zoom"
}
},
"constrain_to_viewport": {
"label": "Adatta i contenuti multimediali all'altezza dello schermo"
},
"media_fit": {
"label": "Adattamento dei contenuti multimediali",
"options__1": {
"label": "Originale"
},
"options__2": {
"label": "Riempi"
}
}
}
},
Expand Down
14 changes: 13 additions & 1 deletion locales/ja.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1862,7 +1862,7 @@
}
},
"media_size": {
"label": "デスクトップのメディアサイズ",
"label": "デスクトップメディアの幅",
"options__1": {
"label": "小"
},
Expand Down Expand Up @@ -1908,6 +1908,18 @@
"options__3": {
"label": "ズームなし"
}
},
"constrain_to_viewport": {
"label": "メディアを画面の高さに制限する"
},
"media_fit": {
"label": "適合したメディア",
"options__1": {
"label": "オリジナル"
},
"options__2": {
"label": "塗りつぶし"
}
}
}
},
Expand Down
14 changes: 13 additions & 1 deletion locales/ko.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -1862,7 +1862,7 @@
}
},
"media_size": {
"label": "데스크톱 미디어 사이즈",
"label": "데스크톱 미디어 너비",
"options__1": {
"label": "작게"
},
Expand Down Expand Up @@ -1908,6 +1908,18 @@
"options__3": {
"label": "확대/축소 안 함"
}
},
"constrain_to_viewport": {
"label": "미디어를 화면 높이로 제한"
},
"media_fit": {
"label": "미디어 맞춤",
"options__1": {
"label": "원본"
},
"options__2": {
"label": "채우기"
}
}
}
},
Expand Down
Loading