From 1adf0523dfe0f868ff45569c19a1a2bfbfd4d4a3 Mon Sep 17 00:00:00 2001 From: Mujtaba Sayed Date: Tue, 25 Jun 2024 20:18:44 +0530 Subject: [PATCH 1/4] key features done --- blocks/footer/footer.css | 12 ++- blocks/keyfeatures/keyfeatures.css | 140 +++++++++++++++++++++++++++++ blocks/keyfeatures/keyfeatures.js | 59 +++++++++--- 3 files changed, 198 insertions(+), 13 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index fc72b7063a..2a495d78fe 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -222,7 +222,7 @@ color: #F58667; font-size: 0.75rem; line-height: 1rem; color: #fff; - margin-left: -40px; + /* margin-left: -40px; */ margin-top: 0.5rem; } .footer-section-second .columns > div { @@ -276,4 +276,14 @@ color: #F58667; .footer-section-first .columns > div > div:last-child { margin-right: 20%; } + .footer-section-second .columns-2-cols ul li p:first-child{ + padding-bottom: unset; + } + .footer-section-third .imgwithlink-wrapper .imgwithlink .image-href-mobile img{ + height: 2.375rem; + width: 100%; + } + .footer-section-third { + flex-direction: column; + } } diff --git a/blocks/keyfeatures/keyfeatures.css b/blocks/keyfeatures/keyfeatures.css index e69de29bb2..caebf01eac 100644 --- a/blocks/keyfeatures/keyfeatures.css +++ b/blocks/keyfeatures/keyfeatures.css @@ -0,0 +1,140 @@ +/* .section.home-loans-products-wrapper.grid-container{ + display: grid; + grid-template-rows: auto 1fr; + grid-template-columns: repeat(3, 1fr); + gap: 10px; +} */ +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation{ + margin-top: 40px; + } + .section.home-loans-products-wrapper .default-content-wrapper #more-home-loan-products{ + color: #000; + font-family: Nunito-Extrabold, sans-serif; + font-size: 32px; + font-weight: 800; + line-height: 40px; + padding-bottom: 8px; + } +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container{ + display: grid; + grid-template-rows: auto 1fr; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper { + position: relative; +} +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link{ + background: #fff9f2; + border-radius: 9pt 9pt 0 0; + display: flex; + gap: 24px; + justify-content: start; + padding: 1pc 24px 40px; + flex-direction: column-reverse; +} +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures{ + /* padding: 0 24px 16px; */ +} +.homeloanteaser a:nth-child(2) img{ + position: absolute; + top: 17px; + right: 24px; + height: 32px; + width: 32px; +} + +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link:hover{ + text-decoration: none; +} + +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__content p{ + color: #666; + font-family: Nunito-Regular, sans-serif; + font-size: 1pc; + font-weight: 400; + line-height: 24px; +} + +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__content p:nth-child(1) strong{ + color: #000; + font-family: Nunito-Extrabold, sans-serif; + font-size: 18px; + font-weight: 800; + line-height: 28px; +} +.cmp-teaser__link .cmp-teaser__image img{ + height: 12px; + width: 137px; +} + +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__image .cmp-image__image{ + height: 12px; + width: 137px; +} +.homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info { + position: relative; + background-color: #fff4e7; + border-radius: 8px; + height: 100%; + position: relative; + z-index: 20; +} +.homeloanteaser .cmp-teaser .keyfeature-container{ + border-top: 1px solid #eeebeb; +} +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .plusicon, + +.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .minusicon{ + height: 16px; + width: 16px; + position: absolute; + top: 20px; + z-index: -1; + top: 20px; + right: 24px +} +.homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .heading{ + color: #333; + cursor: pointer; + font-family: Nunito-Bold, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 24px; + padding: 16px 24px; +} + +.homeloanteaser .keyfeature-container .keyfeatures .feature{ + position: relative; + display: flex; + align-items: center; + padding-top: 24px; +} +.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details{ + padding-left: 16px; +} + +.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details div p:first-child{ + color: #666; + font-family: Nunito-Regular, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; +} +.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details div p:last-child strong{ + color: #333; + font-family: Nunito-Bold, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 26px; + padding-top: 4px; +} +.keyfeature-container .keyfeatures-info .keyfeatures{ + padding: 0 24px 16px; +} + +@media screen and (max-width: 767.99px) { + .section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container{ + grid-template-columns: 1fr; + } +} diff --git a/blocks/keyfeatures/keyfeatures.js b/blocks/keyfeatures/keyfeatures.js index 1c0b3e1ea1..69c084706f 100644 --- a/blocks/keyfeatures/keyfeatures.js +++ b/blocks/keyfeatures/keyfeatures.js @@ -1,31 +1,36 @@ export default function decorate(block) { - const props = [...block.children].map( row => row); + const props = [...block.children].map(row => row); const getHTML = generateFeatureHTML(props); const newDivFeature = document.createElement('div'); newDivFeature.innerHTML = getHTML; block.innerHTML = ''; block.append(newDivFeature); + try { + featureDropDownClick() + } catch (error) { + console.log(error) + } } function generateFeatureHTML(props) { let [ - containerLink, - cardDescription, - leftSideImage, - leftSideImageAlt, - rightSideImage, + containerLink, + cardDescription, + leftSideImage, + leftSideImageAlt, + rightSideImage, rightSideImageAlt, rightSideImageLink, keyFeatureTitle, keyFeatureImagePlus, keyFeatureImageMinus, - keyFeatureInnerImage1, + keyFeatureInnerImage1, keyFeatureInnerText1, - keyFeatureInnerImage2, + keyFeatureInnerImage2, keyFeatureInnerText2, keyFeatureInnerImage3, keyFeatureInnerText3, - ] + ] = props; containerLink = containerLink.textContent.trim(); @@ -46,8 +51,8 @@ function generateFeatureHTML(props) { keyFeatureInnerImage2 = keyFeatureInnerImage2.querySelector('div > picture > img').src; keyFeatureInnerImage3 = keyFeatureInnerImage3.querySelector('div > picture > img').src; - // Generate HTML - const html = `
+ // Generate HTML + const html = `
@@ -109,6 +114,36 @@ function generateFeatureHTML(props) {
` -return html; + return html; } + +function featureDropDownClick() { + var featureClick = document.querySelectorAll('.keyfeatures-info .heading') + featureClick.forEach(function (btn) { + btn.addEventListener('click', function (e) { + e.stopImmediatePropagation(); + var wrapperContainer = this.closest('.wrapper-creation-container'); + var keyfeaturesList = wrapperContainer.querySelectorAll('.keyfeatures-info .keyfeatures'); + keyfeaturesList.forEach(function (keyfeatures) { + if (keyfeatures.style.display === 'none') { + keyfeatures.style.display = 'block'; + document.querySelectorAll('.plusicon').forEach(function (icon) { + icon.style.display = 'none'; + }) + document.querySelectorAll('.minusicon').forEach(function (icon) { + icon.style.display = 'block'; + }) + } else { + keyfeatures.style.display = 'none'; + document.querySelectorAll('.plusicon').forEach(function (icon) { + icon.style.display = 'block'; + }) + document.querySelectorAll('.minusicon').forEach(function (icon) { + icon.style.display = 'none'; + }) + } + }); + }) + }) +} \ No newline at end of file From 1809db04ade12da9f3fc8a6cc5b7c4c4b29770f2 Mon Sep 17 00:00:00 2001 From: Smit Shah Date: Tue, 25 Jun 2024 20:28:36 +0530 Subject: [PATCH 2/4] src removed --- blocks/keyfeatures/keyfeatures.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/blocks/keyfeatures/keyfeatures.js b/blocks/keyfeatures/keyfeatures.js index 69c084706f..1f3418e6d2 100644 --- a/blocks/keyfeatures/keyfeatures.js +++ b/blocks/keyfeatures/keyfeatures.js @@ -62,8 +62,7 @@ function generateFeatureHTML(props) {
- ${leftSideImageAlt} + ${leftSideImageAlt}
From acd7dfae1dfb29fe117fceece52ef1f4c83be12c Mon Sep 17 00:00:00 2001 From: Vaibhav sasulkar Date: Tue, 25 Jun 2024 20:35:03 +0530 Subject: [PATCH 3/4] background color added for banner --- styles/styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 8be8f05a74..f186619401 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -417,11 +417,11 @@ main img { /* common classes for banner background start */ -.teaser.block.bg--lilen>.background{ +.teaser.block.--lilen>.background{ background-color: var(--lilen); } -.teaser.block.bg--rosewhite>.background{ +.teaser.block.--rosewhite>.background{ background-color: var(--rosewhite); } @@ -430,7 +430,7 @@ main img { background-size: 100% 100%; } -.teaser.block.bg----skyblue>.background { +.teaser.block.--skyblue>.background { background-color: var(--skyblue); } /* common classes for banner background end */ From abd4d2ea0c384ecfcc15efbff4b24bdbde3c7da4 Mon Sep 17 00:00:00 2001 From: Smit Shah Date: Tue, 25 Jun 2024 20:48:52 +0530 Subject: [PATCH 4/4] columns filter --- component-filters.json | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/component-filters.json b/component-filters.json index 41486a3229..8b7bc54e9c 100644 --- a/component-filters.json +++ b/component-filters.json @@ -26,8 +26,19 @@ "imgwithlink", "carousel", "teaser", + "tab-container", "tabs", - "accordion-group" + "detailed-teaser", + "accordion-group", + "teaserv2", + "code", + "contentfragment", + "experiencefragment", + "wrappercreation", + "container", + "mycontainer", + "keyfeatures", + "embed" ] }, {