diff --git a/blocks/boards/boards.js b/blocks/boards/boards.js index 4155420276..44b17d9199 100644 --- a/blocks/boards/boards.js +++ b/blocks/boards/boards.js @@ -19,7 +19,7 @@ export default async function decorate(block) { const tbody = document.createElement('tbody'); const header = !block.classList.contains('no-header'); - if (header) table.append(thead); + // if (header) table.append(thead); table.append(tbody); [...block.children].forEach((child, i) => { @@ -27,8 +27,8 @@ export default async function decorate(block) { // if (header && i === 0) thead.append(row); // else tbody.append(row); - // [...child.children].forEach((col) => { [...child.firstElementChild?.firstElementChild?.children]?.forEach((col) => { + // [...child.children].forEach((col) => { const cell = buildCell(header ? i : i + 1); if (col.innerHTML.includes('img') && col.textContent.trim()) { col.remove(); diff --git a/blocks/carousel/embed-banner-carousel.css b/blocks/carousel/embed-banner-carousel.css index 2633b1976a..d7fca072c1 100644 --- a/blocks/carousel/embed-banner-carousel.css +++ b/blocks/carousel/embed-banner-carousel.css @@ -244,7 +244,8 @@ @media (min-width:1025px) and (max-width:1300px) { .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background { - /* height: 380px; */ + height: 529px; + min-height: 529px; background-size: cover; background-position: center top; } @@ -265,11 +266,11 @@ padding: 0 14px; } - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground, - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel { - min-height: 380px; - height: 380px; - } + /* .section .carousel-wrapper .teaser.block.video-component-carousel .background .foreground, + .section .carousel-wrapper .teaser.block.video-component-carousel { + height: 529px; + min-height: 529px; + } */ .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel.teaser .background .foreground{ margin: calc((100% - 1025px) / 2); } diff --git a/blocks/code/code.js b/blocks/code/code.js index f40b3201a7..33d84a11cf 100644 --- a/blocks/code/code.js +++ b/blocks/code/code.js @@ -3,7 +3,9 @@ import { mobileHeaderAnalytics } from "./code-analytics.js"; export default async function decorate(block) { block.innerHTML = await decoratePlaceholder(block); - + if(block.classList.add('table')){ + decorateTable(block) + } const titleData = block.children[0]?.querySelector('p')?.textContent.trim() || ''; block.innerHTML = ''; if (titleData) { diff --git a/blocks/code/table.js b/blocks/code/table.js new file mode 100644 index 0000000000..20c90cec79 --- /dev/null +++ b/blocks/code/table.js @@ -0,0 +1,53 @@ +/* + * Table Block + * Recreate a table + * https://www.hlx.live/developer/block-collection/table + */ + +function buildCell(rowIndex) { + const cell = rowIndex ? document.createElement('td') : document.createElement('th'); + if (!rowIndex) cell.setAttribute('scope', 'col'); + return cell; +} + +export function decorateTable(block) { + block.classList.add('code'); + block.parentElement.classList.add('code-wrapper'); + const table = document.createElement('table'); + const div = document.createElement('div'); + const thead = document.createElement('thead'); + const tbody = document.createElement('tbody'); + + const header = !block.classList.contains('no-header'); + // if (header) table.append(thead); + table.append(tbody); + + [...block.children].forEach((child, i) => { + const row = document.createElement('tr'); + // if (header && i === 0) thead.append(row); + // else + tbody.append(row); + [...child.firstElementChild?.firstElementChild?.children]?.forEach((col) => { + // [...child.children].forEach((col) => { + const cell = buildCell(header ? i : i + 1); + if (col.innerHTML.includes('img') && col.textContent.trim()) { + col.remove(); + const p = document.createElement('p'); + const span = document.createElement('span'); + span.append(col.textContent.trim()); + p.append(col.querySelector('img')) + p.append(span) + cell.append(p); + } else if (col.innerHTML.includes('img')) { + col.remove(); + cell.append(col.querySelector('img')); + } else { + cell.innerHTML = col.innerHTML; + } + row.append(cell); + }); + }); + block.innerHTML = ''; + div.append(table); + block.append(div); +} \ No newline at end of file diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index ffa286b966..52d5026388 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -2,9 +2,13 @@ import { decorateViewMore } from "../../scripts/scripts.js"; import { statemasterGetStatesApi } from '../applyloanform/statemasterapi.js'; import { validationJSFunc } from '../applyloanform/validation.js'; import { formOpen } from '../applyloanform/applyloanforms.js'; - +import decorateTable from "../boards/boards.js"; export default function decorate(block) { + if (block.classList.contains('table')) { + decorateTable(block); + return block; + } decorateViewMore(block); const cols = [...block.firstElementChild.children]; block.classList.add(`columns-${cols.length}-cols`); @@ -31,16 +35,16 @@ export default function decorate(block) { } -function openFormColumn(block){ - var sectionBlock = block.closest(".section"); - if(sectionBlock.classList.contains('open-form-on-click-column')){ - sectionBlock.querySelector('.open-form-on-click-column .columns-wrapper').querySelectorAll('.button-container').forEach(function (eachApplyFormClick) { - eachApplyFormClick.addEventListener('click', async (e) => { - statemasterGetStatesApi(); - validationJSFunc(); - formOpen(); - e.preventDefault(); - }); +function openFormColumn(block) { + var sectionBlock = block.closest(".section"); + if (sectionBlock.classList.contains('open-form-on-click-column')) { + sectionBlock.querySelector('.open-form-on-click-column .columns-wrapper').querySelectorAll('.button-container').forEach(function (eachApplyFormClick) { + eachApplyFormClick.addEventListener('click', async (e) => { + statemasterGetStatesApi(); + validationJSFunc(); + formOpen(); + e.preventDefault(); }); - } + }); + } } diff --git a/component-models.json b/component-models.json index 0452186fa6..71f3027c05 100644 --- a/component-models.json +++ b/component-models.json @@ -16,6 +16,11 @@ "component": "text", "name": "theme", "label": "Theme" + }, + { + "component": "text", + "name": "twitter-title", + "label": "Twitter Title" } ] }, @@ -133,6 +138,23 @@ { "id": "columns", "fields": [ + { + "component": "multiselect", + "name": "classes", + "label": "Style", + "valueType": "string", + "options": [ + { + "name": "Type", + "children": [ + { + "name": "Table", + "value": "table" + } + ] + } + ] + }, { "component": "text", "valueType": "number", @@ -2173,6 +2195,23 @@ { "id": "code", "fields": [ + { + "component": "multiselect", + "name": "classes", + "label": "Style", + "valueType": "string", + "options": [ + { + "name": "Type", + "children": [ + { + "name": "Table", + "value": "table" + } + ] + } + ] + }, { "component": "text-area", "valueType": "string", @@ -2826,4 +2865,4 @@ } ] } -] +] \ No newline at end of file diff --git a/icons/headset.svg b/icons/headset.svg new file mode 100644 index 0000000000..91534c8b76 --- /dev/null +++ b/icons/headset.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/scripts.js b/scripts/scripts.js index 501acf5446..c7b5c883f9 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -779,6 +779,7 @@ async function loadingCustomCss() { `${window.hlx.codeBasePath}/styles/e-nach-registration/e-nach-registration.css`, `${window.hlx.codeBasePath}/styles/support-faq/support-faq.css`, `${window.hlx.codeBasePath}/styles/embed-carousel-wrapper/embed-carousel-wrapper.css`, + `${window.hlx.codeBasePath}/styles/fixed-headset/fixed-headset.css`, ]; loadCssArray.forEach(async (eachCss) => { diff --git a/styles/documents-required/documents-required.css b/styles/documents-required/documents-required.css index 299ffaa52f..7096c936c1 100644 --- a/styles/documents-required/documents-required.css +++ b/styles/documents-required/documents-required.css @@ -136,91 +136,23 @@ .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary::before{ content: none; } -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(1) details{ - position: relative; - padding-left: unset; - padding-right: 0; - padding-bottom: unset; -} -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(1) details::before{ - position: absolute; - background-image: url('/images/kycdoc.svg'); - left: 0; - top: 40px; - object-fit: contain; - content:''; - height: 32px; - margin-right: 24px; - width: 32px; +.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details { + padding: unset; } -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(2) details{ +.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary>div{ position: relative; - padding-left: unset; - padding-right: 0; - padding-bottom: unset; } -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(2) details::before{ +.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary>div p>span { position: absolute; - background-image: url('/images/income.svg'); - left: 0; - top: 40px; - object-fit: contain; - content:''; - height: 32px; - margin-right: 24px; - width: 32px; + left: 2px; + top: 12px; } -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(3) details{ - position: relative; - padding-left: unset; - padding-right: 0; - padding-bottom: unset; -} -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(3) details::before{ - position: absolute; - background-image: url('/images/property.svg'); - left: 0; - top: 40px; - object-fit: contain; - content:''; - height: 32px; - margin-right: 24px; +.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary>div p>span, +.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary>div p>span>img { width: 32px; -} -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(4) details{ - position: relative; - padding-left: unset; - padding-right: 0; - padding-bottom: unset; -} -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(4) details::before{ - position: absolute; - background-image: url('/images/coapplicants.svg'); - left: 0; - top: 30px; - object-fit: contain; - content:''; height: 32px; - margin-right: 24px; - width: 32px; -} -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(5) details{ - position: relative; - padding-left: unset; - padding-right: 0; - padding-bottom: unset; -} -.section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(5) details::before{ - position: absolute; - background-image: url('/images/photodocm.svg'); - left: 0; - top: 30px; - object-fit: contain; - content:''; - height: 32px; - margin-right: 24px; - width: 32px; } + .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion.block{ border-bottom: 1px dashed #ccc; } @@ -407,21 +339,21 @@ table { font-family: 'Nunito-Regular', sans-serif; } -.section.documents-required-brown.documents-required-img-align .accordion-group-wrapper .accordion-group .accordion details:not(:has(p))::before { - top: 30px; +.section.documents-required-brown.documents-required-img-align .accordion-group-wrapper .accordion-group .accordion details summary>div:not(:has(p:last-child)) p>span{ + top: -2px; } -.section.documents-required-brown.documents-required-img-align .accordion-group-wrapper .accordion-group .accordion details:not(:has(p)) summary>div::before { +.section.documents-required-brown.documents-required-img-align .accordion-group-wrapper .accordion-group .accordion details:not(:has(p:last-child)) summary>div::before { top: 0; } -.section.documents-required-brown.document-required-accordion-img-swap .accordion-group-wrapper .accordion-group .accordion:nth-last-child(2) details::before{ +/* .section.documents-required-brown.document-required-accordion-img-swap .accordion-group-wrapper .accordion-group .accordion:nth-last-child(2) details::before{ background-image: url('/images/coapplicants.svg'); -} +} */ -.section.documents-required-brown.document-required-accordion-img-swap .accordion-group-wrapper .accordion-group .accordion:last-child details::before{ +/* .section.documents-required-brown.document-required-accordion-img-swap .accordion-group-wrapper .accordion-group .accordion:last-child details::before{ background-image: url('/images/photodocm.svg'); -} +} */ .section.documents-required-brown.document-required-accordion-img table:nth-child(2) > tbody > tr> th:nth-child(3), .section.documents-required-brown.document-required-accordion-img table:nth-child(2) > tbody > tr> th:nth-child(2), @@ -517,18 +449,6 @@ table { /* top: unset; */ width: 100%; } - .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(1) details::before, - .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(2) details::before, - .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(3) details::before, - .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(4) details::before, - .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(5) details::before{ - height: 24px; - width: 24px; - margin-right: 16px; - background-size: 100%; - top: 26px; - margin-left: 12px; - } .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary div h3{ font-size: 0.875rem; line-height: 20px; @@ -546,11 +466,6 @@ table { .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(4) details summary div{ padding-left: 51px; } - .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(4) details::before, - .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion:nth-child(5) details::before{ - top: 15px; - margin-left: 12px; - } .section.documents-required-brown .accordion-group{ border-radius: 12px; padding: 12px 16px; @@ -697,6 +612,16 @@ table { .section.documents-required-brown.document-required-accordion-img table:nth-child(9) > tbody > tr > td:nth-last-child(2) { width: 20%; } + .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary>div p>span { + position: absolute; + left: 12px; + top: 10px; + } + .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary>div p>span, + .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary>div p>span>img { + width: 24px; + height: 24px; + } } @media screen and (min-width:768px) and (max-width:1024px) { .section.documents-required-brown .default-content-wrapper .button-container{ @@ -711,6 +636,9 @@ table { .section.documents-required-brown .accordion-group-wrapper { margin-bottom: unset; } + .section.documents-required-brown .accordion-group-wrapper .accordion-group .accordion details summary>div p>span { + top: 10px; + } } @media screen and (min-width: 1025px) and (max-width: 1300px){ diff --git a/styles/fixed-headset/fixed-headset.css b/styles/fixed-headset/fixed-headset.css new file mode 100644 index 0000000000..61421ebb4d --- /dev/null +++ b/styles/fixed-headset/fixed-headset.css @@ -0,0 +1,96 @@ +.section.fixed-headset-wrapper .default-content-wrapper { + display: flex; + align-items: center; + position: fixed; + bottom: 40px; + right: 40px; + height: 56px; + width: 56px; + overflow: hidden; + transition: width .1s; + background-color: #20303f; + border-radius: 100px; + cursor: pointer; + z-index: 12; +} + +.section.fixed-headset-wrapper .default-content-wrapper p { + background-color: #20303f; + height: 56px; + width: 56px; + border-radius: 100px; + text-align: center; + align-content: center; +} +.section.fixed-headset-wrapper .default-content-wrapper p span{ + display: contents; +} +.section.fixed-headset-wrapper .default-content-wrapper p span img{ + width: 32px; + height: 32px; +} +.section.fixed-headset-wrapper .default-content-wrapper:hover p { + border: 1px solid #999; +} + +.section.fixed-headset-wrapper .default-content-wrapper ul { + display: none; + justify-content: center; + flex-direction: column; + gap: 5px; +} + +.section.fixed-headset-wrapper .default-content-wrapper ul li { + font-size: 14px; + padding-left: 12px; + font-weight: 700; + color: #fff; + font-family: Nunito-Regular, 'sans-serif'; +} + +.section.fixed-headset-wrapper .default-content-wrapper ul li a { + color: #fff; + text-decoration: none; + font-family: Nunito-Bold, 'sans-serif'; +} +.section.fixed-headset-wrapper .default-content-wrapper ul li:first-child a { + color: #f58667; + text-decoration: underline; +} +.section.fixed-headset-wrapper .default-content-wrapper:hover { + width: 180px; + transition: width .1s; +} + +.section.fixed-headset-wrapper:hover .default-content-wrapper ul { + display: flex; + background-color: #20303f; +} + +@media screen and (max-width: 768px) { + .section.fixed-headset-wrapper .default-content-wrapper { + bottom: 16px; + right: 16px; + width: 48px; + height: 48px; + } + + .section.fixed-headset-wrapper .default-content-wrapper:hover { + width: 158px; + cursor: pointer; + transition: width .1s; + } + + .section.fixed-headset-wrapper .default-content-wrapper p { + height: 48px; + width: 48px; + } + .section.fixed-headset-wrapper .default-content-wrapper ul li{ + font-size: 12px; + padding-left: 9px; + } + .section.fixed-headset-wrapper .default-content-wrapper p span img{ + width: 22px; + height: 22px; + } +} \ No newline at end of file diff --git a/styles/grievance-redressal/grievance-redressal.css b/styles/grievance-redressal/grievance-redressal.css index a4164f86f4..ea12f114af 100644 --- a/styles/grievance-redressal/grievance-redressal.css +++ b/styles/grievance-redressal/grievance-redressal.css @@ -211,6 +211,7 @@ margin-top: -16px; font-size: 1.125rem; font-weight: 800; line-height: 27px; + min-height: 27px; } } /* Stakeholder Insurance Services End */