From 06cd142f9aa65317de39263e076272b233861fbd Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 21 Nov 2024 17:39:22 +0200 Subject: [PATCH 1/8] add fragment block and style adjustments for medium image size --- _src/blocks/columns/columns.css | 8 +++++ _src/blocks/fragment/fragment.css | 0 _src/blocks/fragment/fragment.js | 52 +++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 _src/blocks/fragment/fragment.css create mode 100644 _src/blocks/fragment/fragment.js diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 65f0d1102..1a9104b67 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -1117,6 +1117,14 @@ main .section.two-columns .right-col .products.plans a.button:any-link { justify-content: center; } +.columns.medium-image-size p:has(picture) { + text-align: center; + + img { + width: 50%; + } +} + @media (max-width: 1399px) { .columns-wrapper { padding: 0 var(--section-large-desktop-padding); diff --git a/_src/blocks/fragment/fragment.css b/_src/blocks/fragment/fragment.css new file mode 100644 index 000000000..e69de29bb diff --git a/_src/blocks/fragment/fragment.js b/_src/blocks/fragment/fragment.js new file mode 100644 index 000000000..9dcb18b0b --- /dev/null +++ b/_src/blocks/fragment/fragment.js @@ -0,0 +1,52 @@ +/* + * Fragment Block + * Include content from one Helix page in another. + * https://www.hlx.live/developer/block-collection/fragment + */ + +import { + decorateMain, getLanguageCountryFromPath, +} from '../../scripts/scripts.js'; + +import { + loadBlocks, +} from '../../scripts/lib-franklin.js'; + +/** + * Loads a fragment. + * @param {string} path The path to the fragment + * @returns {HTMLElement} The root element of the fragment + */ +async function loadFragment(path) { + const { country, language } = getLanguageCountryFromPath(); + if (path && path.startsWith('/')) { + try { + // eslint-disable-next-line no-param-reassign + path = path.replace(/lang/g, `${language}-${country}`); + } catch (error) { + console.log(error); + } + const resp = await fetch(`${path}.plain.html`); + if (resp.ok) { + const main = document.createElement('main'); + main.innerHTML = await resp.text(); + decorateMain(main); + await loadBlocks(main); + return main; + } + } + return null; +} + +export default async function decorate(block) { + const link = block.querySelector('a'); + const path = link ? link.getAttribute('href') : block.textContent.trim(); + const fragment = await loadFragment(path); + if (fragment) { + const fragmentSection = fragment.querySelector(':scope .section'); + if (fragmentSection) { + block.closest('.section').classList.add(...fragmentSection.classList); + block.closest('.fragment-wrapper').replaceWith(...fragmentSection.childNodes); + } + } +} From e4168617844c63f9df2e4c9ec19fa918c743c938 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 21 Nov 2024 17:48:23 +0200 Subject: [PATCH 2/8] refactor columns styles for medium image size and disable stylelint warning --- _src/blocks/columns/columns.css | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 1a9104b67..1ab0753d5 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ .columns-wrapper { padding: 0 var(--body-padding); } @@ -33,6 +34,14 @@ line-height: 22px; } +.columns.medium-image-size p:has(picture) { + text-align: center; + + img { + width: 50%; + } +} + .columns.awards > div > div > p { margin: 0; padding: 0 5px; @@ -1117,14 +1126,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { justify-content: center; } -.columns.medium-image-size p:has(picture) { - text-align: center; - - img { - width: 50%; - } -} - @media (max-width: 1399px) { .columns-wrapper { padding: 0 var(--section-large-desktop-padding); From fa44cb3a41c413e7e28ef27c4cadc5fbf927aa88 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 21 Nov 2024 17:50:47 +0200 Subject: [PATCH 3/8] add initial fragment styles and improve error logging in loadFragment function --- _src/blocks/fragment/fragment.css | 3 +++ _src/blocks/fragment/fragment.js | 1 + 2 files changed, 4 insertions(+) diff --git a/_src/blocks/fragment/fragment.css b/_src/blocks/fragment/fragment.css index e69de29bb..15941f1cf 100644 --- a/_src/blocks/fragment/fragment.css +++ b/_src/blocks/fragment/fragment.css @@ -0,0 +1,3 @@ +.fragment { + +} \ No newline at end of file diff --git a/_src/blocks/fragment/fragment.js b/_src/blocks/fragment/fragment.js index 9dcb18b0b..8caf08b4f 100644 --- a/_src/blocks/fragment/fragment.js +++ b/_src/blocks/fragment/fragment.js @@ -24,6 +24,7 @@ async function loadFragment(path) { // eslint-disable-next-line no-param-reassign path = path.replace(/lang/g, `${language}-${country}`); } catch (error) { + // eslint-disable-next-line no-console console.log(error); } const resp = await fetch(`${path}.plain.html`); From 81f053cf3a3fba093e6201f87a2d251538509686 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 21 Nov 2024 17:53:30 +0200 Subject: [PATCH 4/8] add z-index to fragment styles for proper stacking context --- _src/blocks/fragment/fragment.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/fragment/fragment.css b/_src/blocks/fragment/fragment.css index 15941f1cf..2001f74ab 100644 --- a/_src/blocks/fragment/fragment.css +++ b/_src/blocks/fragment/fragment.css @@ -1,3 +1,3 @@ .fragment { - + z-index: 1; } \ No newline at end of file From 82850433941652bb2bdedbc9a9657a84831e256e Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 22 Nov 2024 10:47:25 +0200 Subject: [PATCH 5/8] add font size adjustment for smaller title in columns styles --- _src/blocks/columns/columns.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 1ab0753d5..74a2944d5 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -42,6 +42,10 @@ } } +.columns.smaller-title h4 { + font-size: 16px; +} + .columns.awards > div > div > p { margin: 0; padding: 0 5px; From 58c586b0afe246f6c676c0d3c64b724365464208 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 22 Nov 2024 11:06:35 +0200 Subject: [PATCH 6/8] update column image width to a fixed size of 140px --- _src/blocks/columns/columns.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 74a2944d5..cb7db4130 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -38,7 +38,7 @@ text-align: center; img { - width: 50%; + width: 140px; } } From 9740c3ece150ff538450d44d0d368a549c6658a7 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 22 Nov 2024 11:09:23 +0200 Subject: [PATCH 7/8] add fixed height of 144px for column images --- _src/blocks/columns/columns.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index cb7db4130..96a70c445 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -39,6 +39,7 @@ img { width: 140px; + height: 144px; } } From 3f48b33979a1ad395ac7a77d689407925ba2ed8d Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 22 Nov 2024 11:24:10 +0200 Subject: [PATCH 8/8] fixed awards image alignment --- _src/blocks/columns/columns.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 96a70c445..fe15e8f24 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -597,6 +597,10 @@ gap: 32px; } + .columns.awards-fragment > div{ + align-items: baseline; + } + .columns > div > div { flex: 1; order: unset;