diff --git a/CHANGELOG.md b/CHANGELOG.md index c49e9f295..c75c068f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file. - add to cart sticky shouldn't have focusable elements when it has `aria-hidden="true"` (#80420) - some a11y issues in checkout (#80424) - gallery navigation not showing on load (#80752) +- gallery placeholder not showing on load and jumping image on load (#80752) ### Changed - instead of using atomic classes for some page heading styles added in a lot of places, created a new class for easier customization (#80498) ### Updated diff --git a/Magento_Catalog/styles/modules/_fotorama.scss b/Magento_Catalog/styles/modules/_fotorama.scss index 1dfaa8005..981fa9423 100644 --- a/Magento_Catalog/styles/modules/_fotorama.scss +++ b/Magento_Catalog/styles/modules/_fotorama.scss @@ -1,3 +1,5 @@ +$_block-content-loading-margin-bottom: 30px !default; + .fotorama { width: 100%; @@ -195,9 +197,21 @@ } &._block-content-loading { + margin-bottom: $_block-content-loading-margin-bottom; + + @include mq($screen-m) { + margin-bottom: 0; + } + .fotorama__nav--dots, .fotorama__nav--thumbs { + position: absolute; + bottom: 0; opacity: 0; + + @include mq($screen-l) { + position: relative; + } } .loader { diff --git a/Snowdog_Components/components/Organisms/gallery/_gallery-variables.scss b/Snowdog_Components/components/Organisms/gallery/_gallery-variables.scss index 967d0524a..337b97c1f 100644 --- a/Snowdog_Components/components/Organisms/gallery/_gallery-variables.scss +++ b/Snowdog_Components/components/Organisms/gallery/_gallery-variables.scss @@ -31,5 +31,5 @@ $gallery__thumb-border-active--dots : 0 !default; $gallery__placeholder-width : auto !default; $gallery__placeholder-padding-bottom : $spacer--medium !default; $gallery__placeholder-padding-bottom\@medium: 0 !default; -$gallery__placeholder-transform\@large : translate(calc(-50% + #{$spacer--medium}), -50%) !default; +$gallery__placeholder-transform\@large : translate(calc(-50% + #{$spacer}), -50%) !default; $gallery__placeholder-padding-right\@large : calc(#{$gallery__thumb-width\@medium + 2px}) !default; diff --git a/Snowdog_Components/components/Organisms/gallery/_gallery.scss b/Snowdog_Components/components/Organisms/gallery/_gallery.scss index cc4486eee..4b7abe334 100644 --- a/Snowdog_Components/components/Organisms/gallery/_gallery.scss +++ b/Snowdog_Components/components/Organisms/gallery/_gallery.scss @@ -122,6 +122,11 @@ max-height: none; } + &:is(picture).ratio-image { + width: 100%; + height: 100%; + } + &.ratio-image { @include mq($screen-l) { top: 50%;