diff --git a/blocks/code/code.js b/blocks/code/code.js index 30a15a4567..db3022bd34 100644 --- a/blocks/code/code.js +++ b/blocks/code/code.js @@ -1,18 +1,20 @@ -import { decoratePlaceholder } from '../../scripts/scripts.js'; -import { mobileHeaderAnalytics } from './code-analytics.js'; +import { decoratePlaceholder } from "../../scripts/scripts.js"; +import { mobileHeaderAnalytics } from "./code-analytics.js"; +import { decorateTable } from "./table.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) { - const titleElement = document.createElement('div'); - titleElement.innerHTML = titleData; - block.append(titleElement); - } + block.innerHTML = await decoratePlaceholder(block); + if(block.classList.contains('table')){ + decorateTable(block) + return block + } + const titleData = block.children[0]?.querySelector('p')?.textContent.trim() || ''; + block.innerHTML = ''; + if (titleData) { + const titleElement = document.createElement('div'); + titleElement.innerHTML = titleData; + block.append(titleElement); + } const iframe = block.querySelectorAll('iframe'); if (iframe.length != 0) { diff --git a/blocks/code/table.js b/blocks/code/table.js index 4ac7425430..8dee80262f 100644 --- a/blocks/code/table.js +++ b/blocks/code/table.js @@ -5,49 +5,49 @@ */ function buildCell(rowIndex) { - const cell = rowIndex ? document.createElement('td') : document.createElement('th'); - if (!rowIndex) cell.setAttribute('scope', 'col'); - return cell; + 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'); + 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); + 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.querySelector('ul')?.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.querySelector('ul')?.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); + block.innerHTML = ''; + div.append(table); + block.append(div); } diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index fad2e11523..9e972a085a 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -2,13 +2,8 @@ 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`); diff --git a/component-models.json b/component-models.json index c8c2d5d677..1e2d7292cb 100644 --- a/component-models.json +++ b/component-models.json @@ -143,23 +143,6 @@ { "id": "columns", "fields": [ - { - "component": "multiselect", - "name": "classes", - "label": "Style", - "valueType": "string", - "options": [ - { - "name": "Type", - "children": [ - { - "name": "Table", - "value": "table" - } - ] - } - ] - }, { "component": "text", "valueType": "number", @@ -2212,6 +2195,10 @@ { "name": "Table", "value": "table" + }, + { + "name": "test", + "value": "test" } ] } diff --git a/styles/fixed-headset/fixed-headset.css b/styles/fixed-headset/fixed-headset.css index 61421ebb4d..bce7727513 100644 --- a/styles/fixed-headset/fixed-headset.css +++ b/styles/fixed-headset/fixed-headset.css @@ -8,14 +8,14 @@ width: 56px; overflow: hidden; transition: width .1s; - background-color: #20303f; + background-color: var(--midnight); border-radius: 100px; cursor: pointer; z-index: 12; } .section.fixed-headset-wrapper .default-content-wrapper p { - background-color: #20303f; + background-color: var(--midnight); height: 56px; width: 56px; border-radius: 100px; @@ -30,7 +30,7 @@ height: 32px; } .section.fixed-headset-wrapper .default-content-wrapper:hover p { - border: 1px solid #999; + border: 1px solid var(--dustygrey); } .section.fixed-headset-wrapper .default-content-wrapper ul { @@ -44,17 +44,17 @@ font-size: 14px; padding-left: 12px; font-weight: 700; - color: #fff; - font-family: Nunito-Regular, 'sans-serif'; + color: var(--white); + font-family: 'Nunito-Regular', 'sans-serif'; } .section.fixed-headset-wrapper .default-content-wrapper ul li a { - color: #fff; + color: var(--white); text-decoration: none; - font-family: Nunito-Bold, 'sans-serif'; + font-family: 'Nunito-Bold', 'sans-serif'; } .section.fixed-headset-wrapper .default-content-wrapper ul li:first-child a { - color: #f58667; + color: var(--orange); text-decoration: underline; } .section.fixed-headset-wrapper .default-content-wrapper:hover { @@ -64,7 +64,7 @@ .section.fixed-headset-wrapper:hover .default-content-wrapper ul { display: flex; - background-color: #20303f; + background-color: var(--midnight); } @media screen and (max-width: 768px) { diff --git a/styles/table/table.css b/styles/table/table.css index f09b698b33..ebfa4eb184 100644 --- a/styles/table/table.css +++ b/styles/table/table.css @@ -496,8 +496,8 @@ .section.fees-charges-wrapper.three-col-table .code-wrapper .code>div>table>tbody>tr>td>p>img { width: 12px; height: 12px; - left: -12px; - top: 2px; + left: -14px; + top: 6px; border-radius: unset; } } @@ -507,7 +507,7 @@ .section.fees-charges-wrapper.three-col-table .code-wrapper .code>div>table>tbody>tr>td>p>img { width: 12px; height: 12px; - left: 39%; + left: 35%; top: -12px; border-radius: unset; }