Merge branch 'feature/80752' into develop

SnowdogApps · Jul 22, 2021 · 3a81878 · 3a81878
2 parents 540d5d0 + f9c0b01
commit 3a81878
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -122,6 +122,11 @@
             max-height: none;
         }
 
+        &:is(picture).ratio-image {
+            width: 100%;
+            height: 100%;
+        }
+
         &.ratio-image {
             @include mq($screen-l) {
                 top: 50%;