From b8cfad48ea5d0678e66451570f7a06f20261e5c7 Mon Sep 17 00:00:00 2001 From: Vaibhav sasulkar Date: Thu, 4 Jul 2024 11:40:44 +0530 Subject: [PATCH 1/3] dobe --- blocks/header/header.css | 22 ++++++++++++++-------- blocks/testimonial/testimonial.css | 2 +- styles/piramal-since/piramal-since.css | 1 - 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index e816094032..ab337f35f6 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -375,7 +375,7 @@ header nav .nav-sections .nav-drop::after{ .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul { width: 100%; left: 0; - padding: 0 8.7%; + padding: 0 11%; background-color: rgb(239 239 239); position: absolute; top: 100%; @@ -383,9 +383,9 @@ header nav .nav-sections .nav-drop::after{ } .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li { - width: 25%; + /* width: 25%; display: flex; - flex-wrap: wrap; + flex-wrap: wrap; */ padding-left: 8px; padding-right: 8px; height: max-content; @@ -423,11 +423,17 @@ header nav .nav-sections .nav-drop::after{ } .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li[aria-expanded="true"]>ul { - display: flex; + /* display: flex; flex-wrap: wrap; - gap: unset; + gap: unset; */ padding-top: 1rem; padding-bottom: 1rem; + column-gap: 20px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin: 0 auto; + max-width: 100%; + row-gap: 20px; } .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop>p { @@ -550,9 +556,9 @@ header nav .nav-sections .nav-drop::after{ display: none; } -.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li:last-child ul>li { +/* .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li:last-child ul>li { width: 12%; -} +} */ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { content: none; @@ -611,7 +617,7 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper > ul > li:nth-child(6) > ul > li:nth-child(1) > ul>li:nth-child(5)::after { content: "New"; position: absolute; - right: 30%; + right: 25%; background-color: #41c66e; border-radius: 4px; color: #fff; diff --git a/blocks/testimonial/testimonial.css b/blocks/testimonial/testimonial.css index 67ae1125b9..82ea260bbe 100644 --- a/blocks/testimonial/testimonial.css +++ b/blocks/testimonial/testimonial.css @@ -726,7 +726,7 @@ .section.testimonial-content-wrapper { padding: 64px 0; - background-color: var(--cloud); + background-color: rgba(235,238,240,0.3); } .section.testimonial-content-wrapper .default-content-wrapper h2 { diff --git a/styles/piramal-since/piramal-since.css b/styles/piramal-since/piramal-since.css index 1159d1d153..6bad9f72bd 100644 --- a/styles/piramal-since/piramal-since.css +++ b/styles/piramal-since/piramal-since.css @@ -27,7 +27,6 @@ display: grid; grid-template-columns: auto auto auto auto; gap: 44px 86px; - justify-content: space-between; text-align: center; } From afcec218f01ea28e118ea183dbbac9968378895f Mon Sep 17 00:00:00 2001 From: Vaibhav sasulkar Date: Thu, 4 Jul 2024 11:46:38 +0530 Subject: [PATCH 2/3] homepage header done --- blocks/carousel/carousel.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 9db53fc085..9f3e411231 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -201,6 +201,7 @@ position: absolute; left: 160px; bottom: 60px; + gap: 8px; } .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container>button { From aace93c3cc07ba9f21190b7eb97bd42e7ec2bef8 Mon Sep 17 00:00:00 2001 From: Vaibhav sasulkar Date: Thu, 4 Jul 2024 11:59:04 +0530 Subject: [PATCH 3/3] homepage banner background done --- blocks/teaser/teaser.js | 13 +++++++------ scripts/scripts.js | 30 +++++++++++++++++------------- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/blocks/teaser/teaser.js b/blocks/teaser/teaser.js index b81c021b4a..b12c4502bd 100644 --- a/blocks/teaser/teaser.js +++ b/blocks/teaser/teaser.js @@ -1,3 +1,5 @@ +import { targetObject } from "../../scripts/scripts.js"; + export function decorateButtons(...buttons) { return buttons .map((div) => { @@ -41,7 +43,7 @@ export function generateTeaserDOM(props, classes) { ctaImageUrl3, mobileImage, ] = props; - + const bgPicture = pictureBgContainer.querySelector("picture"); const picture = pictureContainer.querySelector("picture"); const hasShortDescr = shortDescr.textContent.trim() !== ""; @@ -55,13 +57,12 @@ export function generateTeaserDOM(props, classes) { const bgPictureStyle = bgPicture?.querySelector('img')?.src || ""; const mobileImageStyle = mobileImage?.querySelector('img')?.src || ""; let bgImageAllow = bgPictureStyle; - const isMobile = window.matchMedia('(max-width: 768px)'); - if(isMobile){ - bgImageAllow = mobileImageStyle; + if (targetObject.isMobile) { + bgImageAllow = mobileImageStyle; } const teaserDOM = document.createRange().createContextualFragment( - ` + `
${picture ? picture.outerHTML : ""}
@@ -80,7 +81,7 @@ export function generateTeaserDOM(props, classes) {
${ctaImageAnchor3 ? ctaImageAnchor3.outerHTML : ""}
- ` + ` ); // set the mobile background color diff --git a/scripts/scripts.js b/scripts/scripts.js index 544d5f0d64..3f73da1faf 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -23,7 +23,7 @@ export function moveAttributes(from, to, attributes) { /* helper script start */ export let targetObject = { model: null, - isMobile:window.matchMedia("(max-width: 1024px)").matches + isMobile: window.matchMedia("(max-width: 1024px)").matches }; export function renderHelper(data, template, callBack) { @@ -143,10 +143,10 @@ export function createCarousle(block, prevButton, nextButton) { carousel.addEventListener("touchmove", drag); carousel.addEventListener("wheel", scrollEvent); // Add scroll event listener - window.addEventListener("resize", () => { + function carouselResizeEventHandler() { visibleSlides = getVisibleSlides(); setPositionByIndex(); - }); + } function dragStart(event) { isDragging = true; @@ -249,6 +249,10 @@ export function createCarousle(block, prevButton, nextButton) { checkLastChildVisibility(); } +window.addEventListener("resize", () => { + targetObject.isMobile = window.matchMedia("(max-width: 1024px)").matches; + carouselResizeEventHandler(); +}); export function createButton(text, picture) { const button = document.createElement("button"); button.classList.add("carousel-control", text); @@ -425,15 +429,15 @@ body?.addEventListener("click", function (e) { document.querySelector(".modal-overlay").classList.remove("overlay"); document.querySelector(".modal-overlay").classList.add("dp-none"); } else if (!e.target.closest(".stake-pop-up")) { - document.querySelectorAll(".stake-pop-up").forEach((ele) => { - ele.classList.remove("dp-block"); - ele.classList.add("dp-none"); - document.body.style.overflow = "auto"; - }); - /* var overlay = document.querySelector('.overlay'); - if (overlay) { - document.body.removeChild(overlay); - } */ - e.currentTarget.querySelector(".stake-pop-up.dp-block")?.classList.remove("dp-block"); + document.querySelectorAll(".stake-pop-up").forEach((ele) => { + ele.classList.remove("dp-block"); + ele.classList.add("dp-none"); + document.body.style.overflow = "auto"; + }); + /* var overlay = document.querySelector('.overlay'); + if (overlay) { + document.body.removeChild(overlay); + } */ + e.currentTarget.querySelector(".stake-pop-up.dp-block")?.classList.remove("dp-block"); } });