Merge pull request #180 from hlxsites/bug/zoomed-image-generic-issue

Bug/zoomed image generic issue
hlxsites · Nov 25, 2023 · 99033aa · 99033aa
2 parents d4f5b15 + 173690d
commit 99033aa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/blocks/model-image/model-image.css b/blocks/model-image/model-image.css
@@ -55,7 +55,7 @@
 }
 
 .picture-wrapper {
-  overflow: scroll;
+  overflow: auto;
 }
 
 #cboxContent .button {
@@ -149,3 +149,16 @@
   position: absolute;
   z-index: 999;
 }
+
+.picture-overflow-wrap {
+  width: calc(100vw - 400px);
+
+  /* height: calc(100vh - 60px); */
+  max-height: 80vh;
+  overflow: auto;
+
+  @media only screen and (max-width: 860px) {
+    width: calc(100vw - 100px);
+  }
+
+}
diff --git a/blocks/model-image/model-image.js b/blocks/model-image/model-image.js
@@ -24,7 +24,7 @@ const setAttributes = (ele, attributes) => {
 
 export default function decorate(block) {
   const imgWrap = creteEleAddCls({ targetEle: 'div', classes: ['img-colorbox-popup', 'cboxElement'] });
-  const pictureTag = block.querySelector('img');
+  const pictureTag = block.querySelector('picture');
   const pictureTagForZoom = pictureTag.cloneNode(true);
   addStyles(pictureTagForZoom, { cursor: 'pointer' });
   imgWrap.append(pictureTag);
@@ -59,8 +59,6 @@ export default function decorate(block) {
   const pictureWrapperDiv = creteEleAddCls({ targetEle: 'div', classes: ['picture-wrapper'] });
   const pictureOverflowWrapperDiv = creteEleAddCls({ targetEle: 'div', classes: ['picture-overflow-wrap'] });
   pictureOverflowWrapperDiv.append(pictureTagForZoom);
-  pictureTagForZoom.style.width = '100%';
-  pictureTagForZoom.style.height = '100%';
   pictureWrapperDiv.append(pictureOverflowWrapperDiv);
   colorboxDiv.append(pictureWrapperDiv);
   const cboxWrapperSecondChildCboxbtnIconSearch = creteEleAddCls({ targetEle: 'span', classes: ['button', 'icon-search'] });
@@ -95,10 +93,7 @@ export default function decorate(block) {
     addStyles(colorboxDiv, {
       display: 'none',
     });
-    pictureTagForZoom.style.width = '100%';
-    pictureTagForZoom.style.height = 'auto';
-    pictureTagForZoom.style.maxWidth = '100%';
-    pictureTagForZoom.style.maxHeight = '100%';
+    addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': '100%' });
   });
   overlayDiv.addEventListener('click', (e) => {
     e.stopPropagation();
@@ -108,21 +103,14 @@ export default function decorate(block) {
     addStyles(colorboxDiv, {
       display: 'none',
     });
-    pictureTagForZoom.style.width = '100%';
-    pictureTagForZoom.style.height = 'auto';
-    pictureTagForZoom.style.maxWidth = '100%';
-    pictureTagForZoom.style.maxHeight = '100%';
+    addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': '100%' });
   });
   pictureTagForZoom.addEventListener('click', (e) => {
     e.stopPropagation();
-    pictureTagForZoom.style.width = '150%';
-    pictureTagForZoom.style.height = '150%';
-    pictureTagForZoom.style.maxWidth = '150%';
+    addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': 'unset' });
   });
   block.querySelector('.button.icon-search').addEventListener('click', (e) => {
     e.stopPropagation();
-    pictureTagForZoom.style.width = '150%';
-    pictureTagForZoom.style.height = '150%';
-    pictureTagForZoom.style.maxWidth = '150%';
+    addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': 'unset' });
   });
 }
diff --git a/styles/Typo.css b/styles/Typo.css
@@ -919,6 +919,12 @@ body.purple input[type="submit"]:hover {
     background-color: #ededed;
 }
 
+.grid-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 2%;
+}
+
 .cols-row,
 .cols2-row,
 .cols3-row {
@@ -1410,6 +1416,10 @@ form.hs-form .hs-input[type="checkbox"] {
 }
 
 @media (max-width: 767px) {
+    .grid-2{
+        grid-template-columns: 1fr;
+    }
+
     .hero-carousel {
         height: 300px;
     }