refactored

hlxsites · Dec 6, 2023 · b17e43b · b17e43b
1 parent 43ccb2e
commit b17e43b
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 115 deletions.
diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.css b/cigaradvisor/blocks/two-col-grid/two-col-grid.css
diff --git a/cigaradvisor/blocks/two-col-grid/two-col-grid.js b/cigaradvisor/blocks/two-col-grid/two-col-grid.js
diff --git 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
@@ -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;
+  }
 }