From add002acbfe74eca7c2669d4d1f24d46d9a33d20 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Fri, 24 Nov 2023 16:54:46 +0530 Subject: [PATCH 1/5] zoomed image generic issue --- blocks/model-image/model-image.css | 14 +++++++++++++- blocks/model-image/model-image.js | 23 +++++------------------ 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/blocks/model-image/model-image.css b/blocks/model-image/model-image.css index e975bb3b..5e64b37c 100644 --- 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,15 @@ 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 index 52ee5ef1..8f4ab4b9 100644 --- a/blocks/model-image/model-image.js +++ b/blocks/model-image/model-image.js @@ -24,9 +24,9 @@ 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' }); + addStyles(pictureTagForZoom, { cursor: 'pointer'}); imgWrap.append(pictureTag); imgWrap.classList.add('image-wrapper'); block.textContent = ''; @@ -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,13 @@ 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%'; }); } From 2b3a46c09f69e9ccbbea04364aae003b729766fe Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Fri, 24 Nov 2023 17:13:48 +0530 Subject: [PATCH 2/5] zoomed func added to search btn --- blocks/model-image/model-image.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/model-image/model-image.js b/blocks/model-image/model-image.js index 8f4ab4b9..be7b2c64 100644 --- a/blocks/model-image/model-image.js +++ b/blocks/model-image/model-image.js @@ -111,5 +111,6 @@ export default function decorate(block) { }); block.querySelector('.button.icon-search').addEventListener('click', (e) => { e.stopPropagation(); + addStyles(pictureTagForZoom.querySelector('img'),{'max-width': 'unset'}); }); } From 081323b4e647b7c7f2f71083b85f25dd3e59c17c Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Fri, 24 Nov 2023 17:36:27 +0530 Subject: [PATCH 3/5] grid 2 added --- styles/Typo.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/styles/Typo.css b/styles/Typo.css index fd9c931a..3f8540f9 100644 --- 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,11 @@ form.hs-form .hs-input[type="checkbox"] { } @media (max-width: 767px) { + + .grid-2{ + grid-template-columns: 1fr; + } + .hero-carousel { height: 300px; } From 07bf73e3563eb360dbabd0671eb0a4ddd226b53c Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Fri, 24 Nov 2023 17:57:41 +0530 Subject: [PATCH 4/5] lint issues cleared model image --- blocks/model-image/model-image.css | 1 + blocks/model-image/model-image.js | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/blocks/model-image/model-image.css b/blocks/model-image/model-image.css index 5e64b37c..be3179f9 100644 --- a/blocks/model-image/model-image.css +++ b/blocks/model-image/model-image.css @@ -152,6 +152,7 @@ .picture-overflow-wrap { width: calc(100vw - 400px); + /* height: calc(100vh - 60px); */ max-height: 80vh; overflow: auto; diff --git a/blocks/model-image/model-image.js b/blocks/model-image/model-image.js index be7b2c64..802743c9 100644 --- a/blocks/model-image/model-image.js +++ b/blocks/model-image/model-image.js @@ -26,7 +26,7 @@ export default function decorate(block) { const imgWrap = creteEleAddCls({ targetEle: 'div', classes: ['img-colorbox-popup', 'cboxElement'] }); const pictureTag = block.querySelector('picture'); const pictureTagForZoom = pictureTag.cloneNode(true); - addStyles(pictureTagForZoom, { cursor: 'pointer'}); + addStyles(pictureTagForZoom, { cursor: 'pointer' }); imgWrap.append(pictureTag); imgWrap.classList.add('image-wrapper'); block.textContent = ''; @@ -93,7 +93,7 @@ export default function decorate(block) { addStyles(colorboxDiv, { display: 'none', }); - addStyles(pictureTagForZoom.querySelector('img'),{'max-width': '100%'}); + addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': '100%' }); }); overlayDiv.addEventListener('click', (e) => { e.stopPropagation(); @@ -103,14 +103,14 @@ export default function decorate(block) { addStyles(colorboxDiv, { display: 'none', }); - addStyles(pictureTagForZoom.querySelector('img'),{'max-width': '100%'}); + addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': '100%' }); }); pictureTagForZoom.addEventListener('click', (e) => { e.stopPropagation(); - addStyles(pictureTagForZoom.querySelector('img'),{'max-width': 'unset'}); + addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': 'unset' }); }); block.querySelector('.button.icon-search').addEventListener('click', (e) => { e.stopPropagation(); - addStyles(pictureTagForZoom.querySelector('img'),{'max-width': 'unset'}); + addStyles(pictureTagForZoom.querySelector('img'), { 'max-width': 'unset' }); }); } From 173690dc23da8ade8bb7563a64d3b3353b1a2bf3 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Fri, 24 Nov 2023 17:59:23 +0530 Subject: [PATCH 5/5] lint issues --- styles/Typo.css | 1 - 1 file changed, 1 deletion(-) diff --git a/styles/Typo.css b/styles/Typo.css index 3f8540f9..58014159 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -1416,7 +1416,6 @@ form.hs-form .hs-input[type="checkbox"] { } @media (max-width: 767px) { - .grid-2{ grid-template-columns: 1fr; }