From 195335473bd5c62c9b232f24532f69b7c28c407c Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 13 Aug 2024 12:36:55 +0200 Subject: [PATCH 1/8] KAW-7745 Add columns variants --- blocks/columns/columns.css | 119 ++++++++++++++++++++++++++++++++++++- blocks/columns/columns.js | 34 +++++++++++ icons/kb4.svg | 20 +++++++ icons/kb4rc.svg | 56 +++++++++++++++++ styles/styles.css | 4 ++ 5 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 icons/kb4.svg create mode 100644 icons/kb4rc.svg diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 7acff5b..3f7e958 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ .columns > div { display: flex; flex-direction: column; @@ -44,6 +45,90 @@ padding: 0; } +/* styles for column gallery variant */ +.columns.gallery { + display: flex; + flex-direction: column; + gap: 30px; +} + +.columns.gallery > div { + flex-direction: row; +} + +.columns.gallery .columns-img-col { + position: relative; +} + +.columns.gallery .columns-img-col::after { + content: ''; + transition: .3s ease-out; + transition-property: opacity; + opacity: 0; + width: 100%; + height: 100%; + display: block; + top: 0; + position: absolute; + left: 0; + background: rgb(34 34 34 / 80%); +} + +.columns.gallery .columns-img-col:hover::after, +.columns.gallery .columns-img-col:hover:active { + opacity: 1; +} + +/* styles for columns location variant */ +.columns.locations { + display: flex; + flex-direction: column +} + +.columns.locations, +.columns.locations > div { + gap: 60px; +} + +.columns.locations > div > div { + gap: 60px; + margin: 0; + position: relative; + text-wrap: wrap; + overflow-wrap: anywhere; +} + +.columns.locations > div > div::after { + content: ""; + position: absolute; + border-top: 1px solid #e5e5e5; + left: 0; + width: 100%; + bottom: -30px; +} + +.columns.locations > div:last-of-type > div:last-of-type { + padding-bottom: 30px; +} + +.columns.locations > div:last-of-type > div:last-of-type::after { + border: unset; +} + +/* styles for produsts variant */ +.columns.products .icon { + max-width: 400px; + width: auto; + height: auto; + display: block; + margin: auto; +} + +/* ratio variants */ +.columns.ratio > div > div { + margin: unset; +} + @media (width >= 640px) { /* styles for column grid variant */ .columns.grid > div { @@ -84,8 +169,40 @@ padding-top: 0; } - .columns.grid > div .col-wide, + .columns.grid > div .col-wide, .columns.grid > div .col-narrow { flex-basis: 0; } + + /* styles for column gallery variant */ + .columns.gallery { + gap: 40px; + } + + .columns.locations { + padding-bottom: 40px; + } + + .columns.locations > div { + align-items: stretch; + } + + .columns.locations > div > div::after { + border-top: unset; + border-right: 1px solid #e5e5e5; + height: 100%; + right: -20px; + top: 0; + width: 1px; + left: unset; + } + + .columns.locations > div > div:last-of-type::after { + display: none; + } + + /* ratio variants */ + .columns.ratio > div { + display: grid; + } } diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index 5d371c6..f64a7f3 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -1,3 +1,5 @@ +import { createOptimizedPicture } from '../../scripts/aem.js'; + const borderClassName = 'border-top'; export default function decorate(block) { @@ -13,9 +15,25 @@ export default function decorate(block) { const isDownloadVariant = block.classList.contains('download'); const isGridVariant = block.classList.contains('grid'); + const isGalleryVariant = block.classList.contains('gallery'); + const ratioClass = [...block.classList].find((cl) => cl.startsWith('ratio-')); + let rationNumbers; + + if (ratioClass) { + const regex = /(\d+)/g; + + rationNumbers = [...ratioClass.matchAll(regex).map((match) => parseInt(match[1], 10))]; + block.classList.add('ratio'); + } + // setup image columns [...block.children].forEach((row) => { const rows = [...row.children]; + + if (rationNumbers) { + row.style.gridTemplateColumns = rationNumbers.map((v) => `${v}fr`).join(' '); + } + rows.forEach((col, index) => { const pic = col.querySelector('picture'); if (pic) { @@ -47,6 +65,22 @@ export default function decorate(block) { col.classList.add('col-narrow'); } } + + // handel gallery variant + if (isGalleryVariant) { + const imageSrc = pic.querySelector('img').src; + const breakpoints = [ + { media: '(min-width: 1800px)', width: '620' }, + { media: '(min-width: 1500px)', width: '460' }, + { media: '(min-width: 1200px)', width: '345' }, + { media: '(min-width: 960px)', width: '238' }, + { media: '(min-width: 640px)', width: '218' }, + { width: '138' }, + ]; + const newPic = createOptimizedPicture(imageSrc, '', false, breakpoints); + + pic.replaceWith(newPic); + } }); }); } diff --git a/icons/kb4.svg b/icons/kb4.svg new file mode 100644 index 0000000..8cf95a0 --- /dev/null +++ b/icons/kb4.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + diff --git a/icons/kb4rc.svg b/icons/kb4rc.svg new file mode 100644 index 0000000..7be9abc --- /dev/null +++ b/icons/kb4rc.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/styles.css b/styles/styles.css index 13706fd..4759305 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -116,6 +116,10 @@ address, dl, fieldset, figure, ol, p, pre, ul { margin: 0 0 20px; } +ul { + padding: 0 0 0 30px; +} + code { padding: 0.125em; } From 801324841a3d43748709deacffe8bafbe672886d Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 15 Aug 2024 12:27:07 +0200 Subject: [PATCH 2/8] Adjust location variants widt for smaller screen size --- blocks/columns/columns.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 3f7e958..ddc31e7 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -13,7 +13,7 @@ order: 1; } -.columns > div > div:not(.columns-img-col) { +.columns > div > div:not(.columns-img-col, .columns.locations > div > div) { max-width: 750px; margin-left: auto; margin-right: auto; From 4d019e6ec9fb99acc09355d7d380db6bb34daed2 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 16 Aug 2024 09:23:24 +0200 Subject: [PATCH 3/8] KAW-7745 Fix linting error --- styles/styles.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 4fade14..779bee2 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -128,16 +128,12 @@ blockquote { margin-bottom: 1em; } -ul { - padding-left: 30px; -} - address, dl, fieldset, figure, ol, p, pre, ul { margin: 0 0 20px; } ul { - padding: 0 0 0 30px; + padding: 0 30px; } code { From c18cb498bae5e32c5c1b9443172a870d61daa5d8 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 16 Aug 2024 11:22:04 +0200 Subject: [PATCH 4/8] KAW-7745 add aspect ratio to products logos --- blocks/columns/columns.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index ddc31e7..7b7958c 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -118,6 +118,7 @@ /* styles for produsts variant */ .columns.products .icon { max-width: 400px; + aspect-ratio: 106/75; width: auto; height: auto; display: block; From 16b187d22bbd297daf18eaef00eb8c3feb2f69f0 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 16 Aug 2024 11:42:10 +0200 Subject: [PATCH 5/8] KAW-7745 Update aspect ratio for images --- blocks/columns/columns.css | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 7b7958c..d67c855 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -19,7 +19,9 @@ margin-right: auto; } -.columns > div > .columns-img-col:not(.columns.image-no-order > div > .columns-img-col) { +.columns + > div + > .columns-img-col:not(.columns.image-no-order > div > .columns-img-col) { order: 0; } @@ -38,7 +40,7 @@ } .columns.download em { - color: var(--link-color) + color: var(--link-color); } .download .secondary:any-link { @@ -61,8 +63,8 @@ } .columns.gallery .columns-img-col::after { - content: ''; - transition: .3s ease-out; + content: ""; + transition: 0.3s ease-out; transition-property: opacity; opacity: 0; width: 100%; @@ -79,10 +81,14 @@ opacity: 1; } +.columns.gallery img { + aspect-ratio: 1 / 1; +} + /* styles for columns location variant */ .columns.locations { display: flex; - flex-direction: column + flex-direction: column; } .columns.locations, @@ -118,13 +124,17 @@ /* styles for produsts variant */ .columns.products .icon { max-width: 400px; - aspect-ratio: 106/75; + aspect-ratio: 106 / 75; width: auto; height: auto; display: block; margin: auto; } +.columns.products img { + aspect-ratio: 10 / 7; +} + /* ratio variants */ .columns.ratio > div > div { margin: unset; From 56db2b32a9ace07604dd9aca7358fd4b518d3861 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 16 Aug 2024 13:43:34 +0200 Subject: [PATCH 6/8] KAW-7745 Fixing cls --- blocks/columns/columns.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index d67c855..b462342 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -60,6 +60,7 @@ .columns.gallery .columns-img-col { position: relative; + width: calc((100% - 90px) / 4); } .columns.gallery .columns-img-col::after { @@ -131,7 +132,7 @@ margin: auto; } -.columns.products img { +.columns.products p > picture img { aspect-ratio: 10 / 7; } From a0bf6416c1fb9634eb9bf3835e9bb92ec02b804e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 19 Aug 2024 09:23:35 +0200 Subject: [PATCH 7/8] Add css fixes for text centering --- blocks/footer/footer.css | 2 +- blocks/text/text.css | 8 +++++++- styles/styles.css | 7 ++++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 5281b93..b6f30e2 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -119,7 +119,7 @@ footer { @media (width >= 768px) { .footer .section { - padding: 10px 30px 40px; + padding: 40px 30px; } .footer .columns > div { diff --git a/blocks/text/text.css b/blocks/text/text.css index 43029d3..b3a54d3 100644 --- a/blocks/text/text.css +++ b/blocks/text/text.css @@ -2,6 +2,12 @@ max-width: 750px; } +/* centering by variant */ .text.center > div { margin: auto; -} \ No newline at end of file +} + +/* centering by set the text aling in the document */ +.text [data-align="center"] { + text-align: center; +} diff --git a/styles/styles.css b/styles/styles.css index 8848524..a01bb8c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -251,7 +251,12 @@ main .section { padding: var(--section-y-padding) var(--section-x-padding); } -main .section:last-child { +main .section:first-child { + padding-top: 0; +} + +main .section:last-child, +main .section.padding-bottom-0 { padding-bottom: 0; } From f887a5c08268735b5fd14b7fe6e5ec9590b22e2f Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Tue, 13 Aug 2024 16:03:43 +0200 Subject: [PATCH 8/8] some css changes for alignment,padding --- blocks/text/text.css | 2 +- styles/styles.css | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/blocks/text/text.css b/blocks/text/text.css index b3a54d3..554b5e3 100644 --- a/blocks/text/text.css +++ b/blocks/text/text.css @@ -8,6 +8,6 @@ } /* centering by set the text aling in the document */ -.text [data-align="center"] { +.section-center .text { text-align: center; } diff --git a/styles/styles.css b/styles/styles.css index a01bb8c..2352a82 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -351,6 +351,11 @@ main .border-top { color: var(--text-color); } +.section-small { + max-width: 900px; + margin: auto; +} + .width-400 { max-width: 400px; margin: auto; @@ -389,3 +394,7 @@ main .border-top { } /* article styles - end */ +.section-center .button-container { + display: flex; + justify-content: center; +}