Merge pull request #8 from WWWPiramalFinanceCOM/feature/homepage-bugf…

…ixes Feature/homepage bugfixes
WWWPiramalFinanceCOM · Jul 4, 2024 · a9b4961 · a9b4961
2 parents 3701706 + 67d700e
commit a9b4961
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 19 deletions.
diff --git 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 {

diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -375,17 +375,17 @@ 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%;
   margin-top: 0;
 }
 
 .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/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(
-  `
+    `
     <div class='background' style='background-image:url(${bgImageAllow})'>
       <div class="front-picture">${picture ? picture.outerHTML : ""}</div>
       <div class='foreground'>
@@ -80,7 +81,7 @@ export function generateTeaserDOM(props, classes) {
           <div class="cta-image">${ctaImageAnchor3 ? ctaImageAnchor3.outerHTML : ""}</div>
         </div>
       </div>
-  ` 
+  `
   );
 
   // set the mobile background color

diff --git 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/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);

diff --git 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;
 }