From c6f75fd03f80ac1dcf3c2bbff69d578cef3abe1f Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Sat, 2 Dec 2023 22:55:11 -0500 Subject: [PATCH 01/10] Update styles.css --- cigaradvisor/styles/styles.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index ae28d6f8..902c7ab3 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -83,3 +83,18 @@ a:active, a:hover { outline-width: 0; } + +.article-teaser-container{ + display: flex; +} +/* 2 column layout */ +main .section[data-layout="50/50"] .layout-content-wrapper > div.separator-wrapper { + flex-basis: 100%; + padding: 2em 0; +} + +main .section[data-layout="50/50"] .layout-content-wrapper > div.separator-wrapper hr { + border: none; + border-top: 1px solid var(--gray); + margin: 0; +} From fcd87f7c2b00fbf00efc9df16291f4f1711bfd6f Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Sun, 3 Dec 2023 16:49:13 -0500 Subject: [PATCH 02/10] main css --- cigaradvisor/blocks/imagecta/imagecta.css | 6 ++--- cigaradvisor/styles/styles.css | 30 +++++++++++++++++++++++ 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css index 8a053fdd..e7cf03c2 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.css +++ b/cigaradvisor/blocks/imagecta/imagecta.css @@ -1,9 +1,7 @@ .home-tall-banner > a img{ display: block; position: relative; - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; + width: 100%; + height: 100%; border: 1px solid #000; } \ No newline at end of file diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 902c7ab3..b889de8e 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -88,6 +88,36 @@ a:active, a:hover { display: flex; } /* 2 column layout */ + +main{ + display: flex; + flex-direction: row; + max-width: 1080px; + height: auto; + width: auto; +} + + +@media screen and (max-width: 900px){ + main{ + width: 100%; + flex-direction: column; + } +} + + +main .section[data-layout="50/50"] { + display: flex; + flex-basis: 100%; + flex-direction: column; + padding: 10px; +} +.article-teaser-wrapper{ + padding: 10px; +} +.imagecta-wrapper{ + padding: 10px; +} main .section[data-layout="50/50"] .layout-content-wrapper > div.separator-wrapper { flex-basis: 100%; padding: 2em 0; From a0e3f81dcd1e784682d9c1607ea7c6d201608df8 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 4 Dec 2023 08:24:47 -0500 Subject: [PATCH 03/10] styling fixes --- cigaradvisor/blocks/imagecta/imagecta.css | 17 ++++++++++++++--- cigaradvisor/styles/styles.css | 4 +++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css index e7cf03c2..868d560e 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.css +++ b/cigaradvisor/blocks/imagecta/imagecta.css @@ -1,7 +1,18 @@ -.home-tall-banner > a img{ +.home-tall-banner>a picture { + display: block; + height: 100%; +} + +.home-tall-banner>a img { display: block; position: relative; - width: 100%; + width: 100%; height: 100%; - border: 1px solid #000; + object-fit: cover; +} + +@media screen and (min-width: 1200px) { + .home-tall-banner>a img { + border: 1px solid #000; + } } \ No newline at end of file diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index b889de8e..ce619385 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -110,12 +110,14 @@ main .section[data-layout="50/50"] { display: flex; flex-basis: 100%; flex-direction: column; - padding: 10px; } .article-teaser-wrapper{ padding: 10px; } + .imagecta-wrapper{ + display: flex; + flex-basis: 100%; padding: 10px; } main .section[data-layout="50/50"] .layout-content-wrapper > div.separator-wrapper { From f05d87731c1badd355565f1a5bc64a34e5b8860b Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 14:55:46 -0500 Subject: [PATCH 04/10] Update styles.css --- cigaradvisor/styles/styles.css | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index ce619385..cf7eb1b9 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -87,7 +87,6 @@ a:active, a:hover { .article-teaser-container{ display: flex; } -/* 2 column layout */ main{ display: flex; @@ -111,22 +110,13 @@ main .section[data-layout="50/50"] { flex-basis: 100%; flex-direction: column; } -.article-teaser-wrapper{ + +main .section[data-layout="50/50"] .article-teaser-wrapper{ padding: 10px; } -.imagecta-wrapper{ +main .section[data-layout="50/50"] .imagecta-wrapper{ display: flex; flex-basis: 100%; padding: 10px; -} -main .section[data-layout="50/50"] .layout-content-wrapper > div.separator-wrapper { - flex-basis: 100%; - padding: 2em 0; -} - -main .section[data-layout="50/50"] .layout-content-wrapper > div.separator-wrapper hr { - border: none; - border-top: 1px solid var(--gray); - margin: 0; -} +} \ No newline at end of file From 396a9844cd4ec48f628284f8b4d23f3dd12ba32c Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 10:33:01 -0500 Subject: [PATCH 05/10] gridlayout --- cigaradvisor/blocks/separator/separator.js | 0 cigaradvisor/scripts/scripts.js | 38 ++++++++++++++++++++++ cigaradvisor/styles/styles.css | 13 ++++---- 3 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 cigaradvisor/blocks/separator/separator.js diff --git a/cigaradvisor/blocks/separator/separator.js b/cigaradvisor/blocks/separator/separator.js new file mode 100644 index 00000000..e69de29b diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 0211c1dd..1ca0655b 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -30,6 +30,43 @@ function buildHeroBlock(main) { } } +/** + * Builds two column grid. + * @param {Element} main The container element + */ +function buildTwoColumnGrid(main) { + main.querySelectorAll(':scope > div div.section-metadata').forEach((metadata) => { + let style; + [...metadata.querySelectorAll(':scope > div')].every((div) => { + const match = div.children[1]?.textContent.toLowerCase().trim().match(/50\/50/i); + if (div.children[0]?.textContent.toLowerCase().trim() === 'layout' && match) { + style = match[0].replaceAll(/\s/g, '-'); + return false; + } + return true; + }); + if (style) { + const section = metadata.parentElement; + const left = []; + const right = []; + let flag = true; + [...section.children].forEach((child) => { + console.log(child); + const picture = child.querySelector(':scope > picture'); + if (picture) { + right.push(picture); + child.remove(); + } else if (!child.classList.contains('section-metadata')) { + left.push(child); + } + }); + const block = buildBlock('floating-images', [[{ elems: left }, { elems: right }]]); + block.classList.add(style); + section.prepend(block); + } + }); +} + /** * load fonts.css and set a session storage flag */ @@ -49,6 +86,7 @@ async function loadFonts() { function buildAutoBlocks(main) { try { buildHeroBlock(main); + buildTwoColumnGrid(main); } catch (error) { // eslint-disable-next-line no-console console.error('Auto Blocking failed', error); diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index cf7eb1b9..45cf417d 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -84,10 +84,7 @@ a:active, a:hover { } -.article-teaser-container{ - display: flex; -} - +/* 50-50 grid */ main{ display: flex; flex-direction: row; @@ -98,7 +95,7 @@ main{ @media screen and (max-width: 900px){ - main{ + main .section[data-layout="50/50"] { width: 100%; flex-direction: column; } @@ -107,8 +104,10 @@ main{ main .section[data-layout="50/50"] { display: flex; - flex-basis: 100%; - flex-direction: column; + flex-direction: row; + max-width: 1080px; + height: auto; + width: auto; } main .section[data-layout="50/50"] .article-teaser-wrapper{ From b61733286c40f5da4b342559f9046430aa0ec108 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 11:43:49 -0500 Subject: [PATCH 06/10] changes --- cigaradvisor/blocks/separator/separator.css | 62 +++++++++++++++++++ .../blocks/two-col-grid/two-col-grid.css | 62 +++++++++++++++++++ .../blocks/two-col-grid/two-col-grid.js | 7 +++ cigaradvisor/scripts/scripts.js | 22 ++++--- 4 files changed, 146 insertions(+), 7 deletions(-) create mode 100644 cigaradvisor/blocks/separator/separator.css create mode 100644 cigaradvisor/blocks/two-col-grid/two-col-grid.css create mode 100644 cigaradvisor/blocks/two-col-grid/two-col-grid.js diff --git a/cigaradvisor/blocks/separator/separator.css b/cigaradvisor/blocks/separator/separator.css new file mode 100644 index 00000000..c3bdf53d --- /dev/null +++ b/cigaradvisor/blocks/separator/separator.css @@ -0,0 +1,62 @@ +/* styles for the floating images auto block */ + + +.block.floating-images > div { + display: flex; + flex-direction: column-reverse; + gap: 1em; + } + + .block.floating-images > div > div { + flex: 1; + } + + .block.floating-images .image picture { + display: block; + position: relative; + height: 100%; + width: 100%; + } + + .block.floating-images .image img { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + } + + .block.floating-images .content { + border-left: 3px solid var(--red); + padding: 0 24px; + } + + .block.floating-images .content ul { + margin-left: 1em; + margin-bottom: 1em; + list-style-type: disc; + } + + .block.floating-images .content ul li { + margin-bottom: 1.5em; + padding-left: 1em; + } + + @media screen and (min-width: 600px) { + .block.floating-images > div { + flex-direction: row; + align-items: center; + } + + .block.floating-images.image-left > div { + flex-direction: row-reverse; + } + } + + @media screen and (min-width: 1200px) { + .block.floating-images > div { + gap: 30px; + } + } \ No newline at end of file diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.css b/cigaradvisor/blocks/two-col-grid/two-col-grid.css new file mode 100644 index 00000000..c3bdf53d --- /dev/null +++ b/cigaradvisor/blocks/two-col-grid/two-col-grid.css @@ -0,0 +1,62 @@ +/* styles for the floating images auto block */ + + +.block.floating-images > div { + display: flex; + flex-direction: column-reverse; + gap: 1em; + } + + .block.floating-images > div > div { + flex: 1; + } + + .block.floating-images .image picture { + display: block; + position: relative; + height: 100%; + width: 100%; + } + + .block.floating-images .image img { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + } + + .block.floating-images .content { + border-left: 3px solid var(--red); + padding: 0 24px; + } + + .block.floating-images .content ul { + margin-left: 1em; + margin-bottom: 1em; + list-style-type: disc; + } + + .block.floating-images .content ul li { + margin-bottom: 1.5em; + padding-left: 1em; + } + + @media screen and (min-width: 600px) { + .block.floating-images > div { + flex-direction: row; + align-items: center; + } + + .block.floating-images.image-left > div { + flex-direction: row-reverse; + } + } + + @media screen and (min-width: 1200px) { + .block.floating-images > div { + gap: 30px; + } + } \ No newline at end of file diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.js b/cigaradvisor/blocks/two-col-grid/two-col-grid.js new file mode 100644 index 00000000..9937fc19 --- /dev/null +++ b/cigaradvisor/blocks/two-col-grid/two-col-grid.js @@ -0,0 +1,7 @@ +import { buildBlock } from '../../scripts/aem.js'; + +export default function decorate(block) { + const container = block.querySelector(':scope > div'); + container.children[0].classList.add('left-column'); + container.children[1].classList.add('right-column'); +} diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 1ca0655b..f228cf47 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -52,15 +52,23 @@ function buildTwoColumnGrid(main) { let flag = true; [...section.children].forEach((child) => { console.log(child); - const picture = child.querySelector(':scope > picture'); - if (picture) { - right.push(picture); - child.remove(); - } else if (!child.classList.contains('section-metadata')) { - left.push(child); + const blockName = child.classList.item(0); + const childBlock = buildBlock(blockName, ''); + child.append(childBlock); + if (child.classList.contains('separator')) { + flag = false; } + if (!child.classList.contains('section-metadata') && !child.classList.contains('separator')) { + if (flag) { + left.push(childBlock); + } else { + right.push(childBlock); + } + } + console.log('left', left); + console.log('right', right); }); - const block = buildBlock('floating-images', [[{ elems: left }, { elems: right }]]); + const block = buildBlock('two-col-grid', [[{ elems: left }, { elems: right }]]); block.classList.add(style); section.prepend(block); } From 61e202a9b9cb977fa0282094a40f7e374af5b825 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 12:45:48 -0500 Subject: [PATCH 07/10] changes --- cigaradvisor/blocks/separator/separator.css | 62 ---------------- cigaradvisor/blocks/separator/separator.js | 0 .../blocks/two-col-grid/two-col-grid.css | 72 ++++++------------- .../blocks/two-col-grid/two-col-grid.js | 26 +++++-- cigaradvisor/scripts/scripts.js | 21 +++--- cigaradvisor/styles/styles.css | 37 ---------- 6 files changed, 57 insertions(+), 161 deletions(-) delete mode 100644 cigaradvisor/blocks/separator/separator.css delete mode 100644 cigaradvisor/blocks/separator/separator.js diff --git a/cigaradvisor/blocks/separator/separator.css b/cigaradvisor/blocks/separator/separator.css deleted file mode 100644 index c3bdf53d..00000000 --- a/cigaradvisor/blocks/separator/separator.css +++ /dev/null @@ -1,62 +0,0 @@ -/* styles for the floating images auto block */ - - -.block.floating-images > div { - display: flex; - flex-direction: column-reverse; - gap: 1em; - } - - .block.floating-images > div > div { - flex: 1; - } - - .block.floating-images .image picture { - display: block; - position: relative; - height: 100%; - width: 100%; - } - - .block.floating-images .image img { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - object-fit: cover; - object-position: center; - } - - .block.floating-images .content { - border-left: 3px solid var(--red); - padding: 0 24px; - } - - .block.floating-images .content ul { - margin-left: 1em; - margin-bottom: 1em; - list-style-type: disc; - } - - .block.floating-images .content ul li { - margin-bottom: 1.5em; - padding-left: 1em; - } - - @media screen and (min-width: 600px) { - .block.floating-images > div { - flex-direction: row; - align-items: center; - } - - .block.floating-images.image-left > div { - flex-direction: row-reverse; - } - } - - @media screen and (min-width: 1200px) { - .block.floating-images > div { - gap: 30px; - } - } \ No newline at end of file diff --git a/cigaradvisor/blocks/separator/separator.js b/cigaradvisor/blocks/separator/separator.js deleted file mode 100644 index e69de29b..00000000 diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.css b/cigaradvisor/blocks/two-col-grid/two-col-grid.css index c3bdf53d..66507e02 100644 --- a/cigaradvisor/blocks/two-col-grid/two-col-grid.css +++ b/cigaradvisor/blocks/two-col-grid/two-col-grid.css @@ -1,62 +1,34 @@ /* styles for the floating images auto block */ -.block.floating-images > div { - display: flex; - flex-direction: column-reverse; - gap: 1em; - } - - .block.floating-images > div > div { - flex: 1; - } - - .block.floating-images .image picture { +.section.two-col-grid-container { display: block; - position: relative; - height: 100%; - width: 100%; - } - - .block.floating-images .image img { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - object-fit: cover; - object-position: center; - } - - .block.floating-images .content { - border-left: 3px solid var(--red); - padding: 0 24px; - } - - .block.floating-images .content ul { - margin-left: 1em; - margin-bottom: 1em; - list-style-type: disc; +} + +.two-col-grid.block{ + display: flex; + flex-direction: row; + max-width: 1080px; + height: auto; + width: auto; } - .block.floating-images .content ul li { - margin-bottom: 1.5em; - padding-left: 1em; - } - @media screen and (min-width: 600px) { - .block.floating-images > div { - flex-direction: row; - align-items: center; + @media screen and (max-width: 900px){ + .two-col-grid.block{ + width: 100%; + flex-direction: column; } + } + + .two-col-grid.block .left-col - .block.floating-images.image-left > div { - flex-direction: row-reverse; - } + main .section[data-layout="50/50"] .article-teaser-wrapper{ + padding: 10px; } - @media screen and (min-width: 1200px) { - .block.floating-images > div { - gap: 30px; - } + main .section[data-layout="50/50"] .imagecta-wrapper{ + display: flex; + flex-basis: 100%; + padding: 10px; } \ No newline at end of file diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.js b/cigaradvisor/blocks/two-col-grid/two-col-grid.js index 9937fc19..93c25658 100644 --- a/cigaradvisor/blocks/two-col-grid/two-col-grid.js +++ b/cigaradvisor/blocks/two-col-grid/two-col-grid.js @@ -1,7 +1,25 @@ -import { buildBlock } from '../../scripts/aem.js'; +import { buildBlock, decorateBlock, loadBlock } from '../../scripts/aem.js'; export default function decorate(block) { - const container = block.querySelector(':scope > div'); - container.children[0].classList.add('left-column'); - container.children[1].classList.add('right-column'); + const container = block.querySelector(':scope > div'); + container.children[0].classList.add('left-column'); + [...container.children[0].children].forEach((child) => { + const blockName = child.classList.item(0); + const childBlock = buildBlock(blockName, child); + block.append(childBlock); + //console.log(childBlock.parentElement); + decorateBlock(childBlock); + loadBlock(childBlock); + container.children[0].append(childBlock); + }); + container.children[1].classList.add('right-column'); + [...container.children[1].children].forEach((child) => { + const blockName = child.classList.item(0); + const childBlock = buildBlock(blockName, child); + block.append(childBlock); + //console.log(childBlock.parentElement); + decorateBlock(childBlock); + loadBlock(childBlock); + container.children[1].append(childBlock); + }); } diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index f228cf47..b275af8f 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -7,10 +7,12 @@ import { decorateIcons, decorateSections, decorateBlocks, + decorateBlock, decorateTemplateAndTheme, waitForLCP, loadBlocks, loadCSS, + loadBlock, } from './aem.js'; const LCP_BLOCKS = []; // add your LCP blocks to the list @@ -51,23 +53,26 @@ function buildTwoColumnGrid(main) { const right = []; let flag = true; [...section.children].forEach((child) => { - console.log(child); - const blockName = child.classList.item(0); - const childBlock = buildBlock(blockName, ''); - child.append(childBlock); + // console.log(child); + // const blockName = child.classList.item(0); + // const childBlock = buildBlock(blockName, child); + // console.log(childBlock.parentElement); + // decorateBlock(childBlock); + // loadBlock(childBlock); + // child.append(childBlock); if (child.classList.contains('separator')) { flag = false; } if (!child.classList.contains('section-metadata') && !child.classList.contains('separator')) { if (flag) { - left.push(childBlock); + left.push(child); } else { - right.push(childBlock); + right.push(child); } } - console.log('left', left); - console.log('right', right); }); + console.log('left', left); + console.log('right', right); const block = buildBlock('two-col-grid', [[{ elems: left }, { elems: right }]]); block.classList.add(style); section.prepend(block); diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index f6d4ea0c..37c45e22 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -78,41 +78,4 @@ a:hover { a:active, a:hover { outline-width: 0; -} - - -/* 50-50 grid */ -main{ - display: flex; - flex-direction: row; - max-width: 1080px; - height: auto; - width: auto; -} - - -@media screen and (max-width: 900px){ - main .section[data-layout="50/50"] { - width: 100%; - flex-direction: column; - } -} - - -main .section[data-layout="50/50"] { - display: flex; - flex-direction: row; - max-width: 1080px; - height: auto; - width: auto; -} - -main .section[data-layout="50/50"] .article-teaser-wrapper{ - padding: 10px; -} - -main .section[data-layout="50/50"] .imagecta-wrapper{ - display: flex; - flex-basis: 100%; - padding: 10px; } \ No newline at end of file From b2a23acdc24a3c0ab106c179adc4b4882c0d35bf Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 13:20:38 -0500 Subject: [PATCH 08/10] working code --- .../blocks/two-col-grid/two-col-grid.css | 35 ++++++++++++---- .../blocks/two-col-grid/two-col-grid.js | 40 +++++++++---------- cigaradvisor/scripts/scripts.js | 11 ----- 3 files changed, 47 insertions(+), 39 deletions(-) diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.css b/cigaradvisor/blocks/two-col-grid/two-col-grid.css index 66507e02..9b956c96 100644 --- a/cigaradvisor/blocks/two-col-grid/two-col-grid.css +++ b/cigaradvisor/blocks/two-col-grid/two-col-grid.css @@ -13,22 +13,43 @@ width: auto; } - - @media screen and (max-width: 900px){ - .two-col-grid.block{ + .two-col-grid.block > div { + display: flex; + } + + + @media screen and (max-width: 600px){ + .two-col-grid.block > div{ width: 100%; flex-direction: column; } } - .two-col-grid.block .left-col + .two-col-grid.block > div > div { + display: flex; + flex-basis: 100%; + flex-direction: column; + } - main .section[data-layout="50/50"] .article-teaser-wrapper{ + .two-col-grid.block .left-column > div{ padding: 10px; } - main .section[data-layout="50/50"] .imagecta-wrapper{ + .two-col-grid.block .right-column > div{ + padding: 10px; + } + + .two-col-grid.block .imagecta.block{ display: flex; flex-basis: 100%; - padding: 10px; + } + + .two-col-grid.block .imagecta.block > a{ + flex-basis: 100%; + } + + @media screen and (min-width: 1200px) { + .two-col-grid.block .imagecta.block>a img { + border: 1px solid #000; + } } \ No newline at end of file diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.js b/cigaradvisor/blocks/two-col-grid/two-col-grid.js index 93c25658..06a54fd5 100644 --- a/cigaradvisor/blocks/two-col-grid/two-col-grid.js +++ b/cigaradvisor/blocks/two-col-grid/two-col-grid.js @@ -1,25 +1,23 @@ import { buildBlock, decorateBlock, loadBlock } from '../../scripts/aem.js'; export default function decorate(block) { - const container = block.querySelector(':scope > div'); - container.children[0].classList.add('left-column'); - [...container.children[0].children].forEach((child) => { - const blockName = child.classList.item(0); - const childBlock = buildBlock(blockName, child); - block.append(childBlock); - //console.log(childBlock.parentElement); - decorateBlock(childBlock); - loadBlock(childBlock); - container.children[0].append(childBlock); - }); - container.children[1].classList.add('right-column'); - [...container.children[1].children].forEach((child) => { - const blockName = child.classList.item(0); - const childBlock = buildBlock(blockName, child); - block.append(childBlock); - //console.log(childBlock.parentElement); - decorateBlock(childBlock); - loadBlock(childBlock); - container.children[1].append(childBlock); - }); + const container = block.querySelector(':scope > div'); + container.children[0].classList.add('left-column'); + [...container.children[0].children].forEach((child) => { + const blockName = child.classList.item(0); + const childBlock = buildBlock(blockName, child); + block.append(childBlock); + decorateBlock(childBlock); + loadBlock(childBlock); + container.children[0].append(childBlock); + }); + container.children[1].classList.add('right-column'); + [...container.children[1].children].forEach((child) => { + const blockName = child.classList.item(0); + const childBlock = buildBlock(blockName, child); + block.append(childBlock); + decorateBlock(childBlock); + loadBlock(childBlock); + container.children[1].append(childBlock); + }); } diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index b275af8f..64e97dd8 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -7,12 +7,10 @@ import { decorateIcons, decorateSections, decorateBlocks, - decorateBlock, decorateTemplateAndTheme, waitForLCP, loadBlocks, loadCSS, - loadBlock, } from './aem.js'; const LCP_BLOCKS = []; // add your LCP blocks to the list @@ -53,13 +51,6 @@ function buildTwoColumnGrid(main) { const right = []; let flag = true; [...section.children].forEach((child) => { - // console.log(child); - // const blockName = child.classList.item(0); - // const childBlock = buildBlock(blockName, child); - // console.log(childBlock.parentElement); - // decorateBlock(childBlock); - // loadBlock(childBlock); - // child.append(childBlock); if (child.classList.contains('separator')) { flag = false; } @@ -71,8 +62,6 @@ function buildTwoColumnGrid(main) { } } }); - console.log('left', left); - console.log('right', right); const block = buildBlock('two-col-grid', [[{ elems: left }, { elems: right }]]); block.classList.add(style); section.prepend(block); From a577352bf5ad6ddac4c8ee70d37d049c94aaff98 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 13:43:12 -0500 Subject: [PATCH 09/10] aligning center --- cigaradvisor/blocks/two-col-grid/two-col-grid.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.css b/cigaradvisor/blocks/two-col-grid/two-col-grid.css index 9b956c96..2bdb20d6 100644 --- a/cigaradvisor/blocks/two-col-grid/two-col-grid.css +++ b/cigaradvisor/blocks/two-col-grid/two-col-grid.css @@ -1,8 +1,15 @@ -/* styles for the floating images auto block */ - - .section.two-col-grid-container { - display: block; + display: block !important; +} + +.section.two-col-grid-container > .two-col-grid-wrapper{ + padding-left: 0; + padding-right: 0; + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; + box-sizing: border-box; } .two-col-grid.block{ From b17e43be5e0aadc764c4a6e5454f67c8cb769645 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 15:54:52 -0500 Subject: [PATCH 10/10] refactored --- .../blocks/two-col-grid/two-col-grid.css | 62 ------------------- .../blocks/two-col-grid/two-col-grid.js | 23 ------- cigaradvisor/scripts/scripts.js | 44 +++++-------- cigaradvisor/styles/styles.css | 53 ++++++++++++++++ 4 files changed, 67 insertions(+), 115 deletions(-) delete mode 100644 cigaradvisor/blocks/two-col-grid/two-col-grid.css delete mode 100644 cigaradvisor/blocks/two-col-grid/two-col-grid.js diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.css b/cigaradvisor/blocks/two-col-grid/two-col-grid.css deleted file mode 100644 index 2bdb20d6..00000000 --- a/cigaradvisor/blocks/two-col-grid/two-col-grid.css +++ /dev/null @@ -1,62 +0,0 @@ -.section.two-col-grid-container { - display: block !important; -} - -.section.two-col-grid-container > .two-col-grid-wrapper{ - padding-left: 0; - padding-right: 0; - width: 100%; - margin-left: auto; - margin-right: auto; - max-width: 1080px; - box-sizing: border-box; -} - -.two-col-grid.block{ - display: flex; - flex-direction: row; - max-width: 1080px; - height: auto; - width: auto; - } - - .two-col-grid.block > div { - display: flex; - } - - - @media screen and (max-width: 600px){ - .two-col-grid.block > div{ - width: 100%; - flex-direction: column; - } - } - - .two-col-grid.block > div > div { - display: flex; - flex-basis: 100%; - flex-direction: column; - } - - .two-col-grid.block .left-column > div{ - padding: 10px; - } - - .two-col-grid.block .right-column > div{ - padding: 10px; - } - - .two-col-grid.block .imagecta.block{ - display: flex; - flex-basis: 100%; - } - - .two-col-grid.block .imagecta.block > a{ - flex-basis: 100%; - } - - @media screen and (min-width: 1200px) { - .two-col-grid.block .imagecta.block>a img { - border: 1px solid #000; - } - } \ No newline at end of file diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.js b/cigaradvisor/blocks/two-col-grid/two-col-grid.js deleted file mode 100644 index 06a54fd5..00000000 --- a/cigaradvisor/blocks/two-col-grid/two-col-grid.js +++ /dev/null @@ -1,23 +0,0 @@ -import { buildBlock, decorateBlock, loadBlock } from '../../scripts/aem.js'; - -export default function decorate(block) { - const container = block.querySelector(':scope > div'); - container.children[0].classList.add('left-column'); - [...container.children[0].children].forEach((child) => { - const blockName = child.classList.item(0); - const childBlock = buildBlock(blockName, child); - block.append(childBlock); - decorateBlock(childBlock); - loadBlock(childBlock); - container.children[0].append(childBlock); - }); - container.children[1].classList.add('right-column'); - [...container.children[1].children].forEach((child) => { - const blockName = child.classList.item(0); - const childBlock = buildBlock(blockName, child); - block.append(childBlock); - decorateBlock(childBlock); - loadBlock(childBlock); - container.children[1].append(childBlock); - }); -} diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 64e97dd8..96fb1770 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -35,37 +35,21 @@ function buildHeroBlock(main) { * @param {Element} main The container element */ function buildTwoColumnGrid(main) { - main.querySelectorAll(':scope > div div.section-metadata').forEach((metadata) => { - let style; - [...metadata.querySelectorAll(':scope > div')].every((div) => { - const match = div.children[1]?.textContent.toLowerCase().trim().match(/50\/50/i); - if (div.children[0]?.textContent.toLowerCase().trim() === 'layout' && match) { - style = match[0].replaceAll(/\s/g, '-'); - return false; + main.querySelectorAll(':scope > .section[data-layout="50/50"]').forEach((section) => { + const leftDiv = document.createElement('div'); + leftDiv.classList.add('left-grid'); + const rightDiv = document.createElement('div'); + rightDiv.classList.add('right-grid'); + let current = leftDiv; + [...section.children].forEach((child) => { + if (child.classList.contains('separator-wrapper')) { + current = rightDiv; + child.remove(); + return; } - return true; + current.append(child); }); - if (style) { - const section = metadata.parentElement; - const left = []; - const right = []; - let flag = true; - [...section.children].forEach((child) => { - if (child.classList.contains('separator')) { - flag = false; - } - if (!child.classList.contains('section-metadata') && !child.classList.contains('separator')) { - if (flag) { - left.push(child); - } else { - right.push(child); - } - } - }); - const block = buildBlock('two-col-grid', [[{ elems: left }, { elems: right }]]); - block.classList.add(style); - section.prepend(block); - } + section.append(leftDiv, rightDiv); }); } @@ -88,7 +72,6 @@ async function loadFonts() { function buildAutoBlocks(main) { try { buildHeroBlock(main); - buildTwoColumnGrid(main); } catch (error) { // eslint-disable-next-line no-console console.error('Auto Blocking failed', error); @@ -107,6 +90,7 @@ export function decorateMain(main) { buildAutoBlocks(main); decorateSections(main); decorateBlocks(main); + buildTwoColumnGrid(main); } /** diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 37c45e22..0e30054a 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -78,4 +78,57 @@ a:hover { a:active, a:hover { outline-width: 0; +} + +/* Two-column grid */ +main .section[data-layout="50/50"]{ + padding-left: 0; + padding-right: 0; + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; + box-sizing: border-box; + display: flex; +} + +@media screen and (max-width: 600px){ + main .section[data-layout="50/50"]{ + width: 100%; + flex-direction: column; + } +} + +main .section[data-layout="50/50"] > div { + display: flex; + flex-basis: 100%; + flex-direction: column; +} + +main .section[data-layout="50/50"] .left-grid > div{ + padding: 10px; +} + +main .section[data-layout="50/50"] .right-grid > div{ + padding: 10px; +} + +main .section[data-layout="50/50"] .imagecta-wrapper{ + display: flex; + flex-basis: 100%; +} + +main .section[data-layout="50/50"] .imagecta.block{ + display: flex; + flex-basis: 100%; +} + +main .section[data-layout="50/50"] .imagecta.block > a{ + flex-basis: 100%; +} + +@media screen and (min-width: 1200px) { + main .section[data-layout="50/50"] .imagecta.block>a img { + border: 1px solid #000; + } } \ No newline at end of file