From c9b6ebde92a91a77eea03a40f393236cb3ae64d0 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Mon, 4 Dec 2023 22:26:10 +0530 Subject: [PATCH] Updated converter for column --- blocks/columns/columns.css | 2 +- blocks/columns/columns.js | 2 ++ styles/styles.css | 19 ++++++++---- .../test/fixtures/blog2-converted.html | 18 +++++------ .../test/fixtures/product1-converted.html | 2 +- tools/importer/transformers/twoColumns.js | 31 ++++++++++++------- 6 files changed, 46 insertions(+), 28 deletions(-) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 09e6e0937..6fddefccd 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -7,7 +7,7 @@ } .columns > div > div:first-child { - @apply align-text-top h-full pb-7 py-0 my-0; + @apply align-text-top pb-7 py-0 my-0; } .columns h2 { diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index 16686b73c..184e4a583 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -21,6 +21,8 @@ export default function decorate(block) { img.width = this.width; img.height = Math.floor(this.width / imageAspectRatio); }; + } else if (![...block.classList].includes('itemscenter')) { + col.classList.add('h-full'); } const pic = col.querySelector('picture'); diff --git a/styles/styles.css b/styles/styles.css index aa8f76d21..d17fc91f4 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -296,6 +296,11 @@ text-decoration-line: underline; text-decoration-color: #3bc7e5; text-decoration-thickness: 3px; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-duration: 700ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .application main .columns > div div > p:not(.button-container) a:hover { @@ -303,11 +308,14 @@ background-color: rgb(59 199 229 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-duration: 150ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +@media (min-width: 768px) { + + .application main .columns > div div > p:not(.button-container) a { + overflow-wrap: normal; + word-break: normal; + } } .testimonial>div { @@ -539,7 +547,6 @@ .columns > div > div:first-child { margin-top: 0px; margin-bottom: 0px; - height: 100%; padding-top: 0px; padding-bottom: 0px; padding-bottom: 1.75rem; diff --git a/tools/actions/convert/test/fixtures/blog2-converted.html b/tools/actions/convert/test/fixtures/blog2-converted.html index 846935c1a..716701568 100644 --- a/tools/actions/convert/test/fixtures/blog2-converted.html +++ b/tools/actions/convert/test/fixtures/blog2-converted.html @@ -20,7 +20,7 @@

9 Essential Products for Streamlining Your mRNA Development and Manufacturin

In the realm of life sciences, the tools you employ can significantly influence your work's efficiency and outcomes. For scientists, lab managers, and lab directors involved in mRNA development and manufacturing, having the right instruments at your fingertips can be a game-changer. Here, we spotlight nine indispensable products from Danaher Life Science companies that are revolutionizing this field.

-
+

1. Biomek i7 Automated Liquid Handlers

@@ -35,7 +35,7 @@

1. Biomek i7 Automated Liquid Handlers

-
+

2. Echo 525 Acoustic Liquid Handlers

@@ -50,7 +50,7 @@

2. Echo 525 Acoustic Liquid Handlers

-
+

3. Intabio ZT System

@@ -65,7 +65,7 @@

3. Intabio ZT System

-
+

4. IDBS Polar

@@ -80,7 +80,7 @@

4. IDBS Polar

-
+

5. Biophase 8800 Capillary Electrophoresis Systems

@@ -95,7 +95,7 @@

5. Biophase 8800 Capillary Electrophoresis Systems

-
+

6. SpectraMax Microplate Readers

@@ -110,7 +110,7 @@

6. SpectraMax Microplate Readers

-
+

7. ZenoTOF 7600 Mass Spectrometer

@@ -125,7 +125,7 @@

7. ZenoTOF 7600 Mass Spectrometer

-
+

8. BioZen Oligo Analytical HPLC Columns

@@ -140,7 +140,7 @@

8. BioZen Oligo Analytical HPLC Columns

-
+

9. Skyland PIMS

diff --git a/tools/actions/convert/test/fixtures/product1-converted.html b/tools/actions/convert/test/fixtures/product1-converted.html index 8e0ceaddb..fe6fe069d 100644 --- a/tools/actions/convert/test/fixtures/product1-converted.html +++ b/tools/actions/convert/test/fixtures/product1-converted.html @@ -148,7 +148,7 @@

Sciex

-

PRODUCT SPOTLIGHT

+

PRODUCT SPOTLIGHT

Intabio ZT System

Comprehensive charge variant analysis made simple. The Intabio ZT system couples icIEF separation and UV detection with high resolution mass spectrometry on the ZenoTOF 7600 system

Learn More

diff --git a/tools/importer/transformers/twoColumns.js b/tools/importer/transformers/twoColumns.js index dcfba573d..3fb4519cd 100644 --- a/tools/importer/transformers/twoColumns.js +++ b/tools/importer/transformers/twoColumns.js @@ -5,6 +5,10 @@ import { const createTwoColumn = (main, document) => { main.querySelectorAll('grid[columns="2"]').forEach((item) => { const columns = []; + const cells = []; + if (item?.getAttribute('itemscenter')) cells.push([['Columns (itemscenter)']]); + else cells.push([['Columns']]); + const templates = item.querySelectorAll('template'); [...templates].forEach((template) => { if (template.content.children.length > 0) { @@ -30,19 +34,27 @@ const createTwoColumn = (main, document) => { } } else if (element.className === 'heading-aem') { const heading = template.content.querySelector('div.heading-aem'); - if (heading) { - row.push(heading.firstElementChild); + if (heading.nextElementSibling && [...heading.nextElementSibling.classList].includes('featureimage')) { + const text = document.createElement('strong'); + text.textContent = heading.firstElementChild.textContent; + row.push(text); + } else row.push(heading.firstElementChild); } } else if (element.className === 'heading') { const heading = template.content.querySelector('div.heading'); - if (heading) { const headingEL = heading?.querySelector('heading'); - const hTag = headingEL?.getAttribute('headingtag') ? headingEL?.getAttribute('headingtag') : 'h1'; - const headEl = document.createElement(hTag); - headEl.textContent = headingEL?.getAttribute('heading'); - row.push(headEl); + if (heading.nextElementSibling && [...heading.nextElementSibling.classList].includes('featureimage')) { + const text = document.createElement('strong'); + text.textContent = headingEL?.getAttribute('heading'); + row.push(text); + } else { + const hTag = headingEL?.getAttribute('headingtag') ? headingEL?.getAttribute('headingtag') : 'h2'; + const headEl = document.createElement(hTag); + headEl.textContent = headingEL?.getAttribute('heading'); + row.push(headEl); + } } } else if (element.className === 'script') { const featureImage = template.content.querySelector('div.featureimage'); @@ -55,10 +67,7 @@ const createTwoColumn = (main, document) => { columns.push(row); } }); - const cells = [ - ['Columns'], - [...columns], - ]; + cells.push([...columns]); if (columns.length > 0) { const block = WebImporter.DOMUtils.createTable(cells, document);