From ddacd80eba783e0b9de75ad898b0c62ce33e6264 Mon Sep 17 00:00:00 2001 From: piyushjindal Date: Thu, 5 Oct 2023 14:08:17 +0530 Subject: [PATCH 1/7] Feed and Card Block Changes --- blocks/cards/cards.css | 2 +- blocks/feed/feed.js | 7 +++++++ styles/styles.css | 7 ++++--- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index b4742731..353c9d5b 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -31,10 +31,10 @@ main .block.cards { border: none; transition: all 0.15s ease-in-out; width: 16.875rem; - padding: 12px 1rem; margin: 0 0 1rem; align-items: center; text-align: left; + flex: 1; } .cards > ul > li:hover { diff --git a/blocks/feed/feed.js b/blocks/feed/feed.js index 6aa164d0..fe2f6f51 100644 --- a/blocks/feed/feed.js +++ b/blocks/feed/feed.js @@ -64,6 +64,13 @@ export default async function decorate(block) { block.innerHTML = ''; const blockContents = resultParsers[blockType](results, blockCfg); const builtBlock = buildBlock(blockType, blockContents); + + [...block.classList].forEach((item) => { + if (item !== 'feed') { + builtBlock.classList.add(item); + } + }); + if (block.parentNode) { block.parentNode.replaceChild(builtBlock, block); } diff --git a/styles/styles.css b/styles/styles.css index 61cf51e9..b989c385 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -716,6 +716,10 @@ main .section.light-blue { background-color: var(--transparent-blue-light-color); } +main .section.no-padding .section-container { + padding: 0; +} + /* END Section Styles END */ /* START Keyframes START */ @@ -771,9 +775,6 @@ main .section.light-blue { display: block; } - - - /* START Section Styles START */ main .section .section-container { From 31e5d8b58447f26fcd885897da0ee25d356b6f1f Mon Sep 17 00:00:00 2001 From: piyushjindal Date: Thu, 5 Oct 2023 14:59:40 +0530 Subject: [PATCH 2/7] Minor change --- blocks/cards/cards.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 353c9d5b..da146cbe 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -35,6 +35,7 @@ main .block.cards { align-items: center; text-align: left; flex: 1; + background-color: var(--white); } .cards > ul > li:hover { From 50c9e2dbb8de4503a537c988737a0a3b70d79bed Mon Sep 17 00:00:00 2001 From: piyushjindal Date: Thu, 5 Oct 2023 15:50:56 +0530 Subject: [PATCH 3/7] Minor change wrt to feedback --- blocks/cards/cards.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index da146cbe..3bede26b 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -78,17 +78,25 @@ main .block.cards { } .cards .cards-card-body { - width: calc(100% - 1rem - 3.5rem); margin: 0 auto; - padding: 0 0 0 16px; text-align: left; color: var(--light-black); + padding: 10px 10px 0; } .cards .cards-card-body .title { margin-bottom: 1rem; } +.cards.large-text .cards-card-body .date { + font-size: 12px; +} + +.cards.large-text .cards-card-body .title { + font-size: 16px; + margin-bottom: 3rem; +} + .cards .cards-card-image img { width: 100%; height: 100%; @@ -282,6 +290,14 @@ main .cards.machine-parts ul > li { padding: 20px 0 0; } + .cards.large-text .cards-card-body .date { + font-size: 14px; + } + + .cards.large-text .cards-card-body .title { + font-size: 20px; + } + .cards .cards-card-body { font-size: 1rem; } From 70fe6b48bfe377d887b9b30f9e8ab863da942cb3 Mon Sep 17 00:00:00 2001 From: piyushjindal Date: Thu, 5 Oct 2023 16:47:51 +0530 Subject: [PATCH 4/7] Review Feedback changes --- blocks/cards/cards.css | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 3bede26b..27b13cc7 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -43,10 +43,9 @@ main .block.cards { } .cards > ul > li .date { - font-size: var(--body-font-size-xs); - color: var(--transparent-grey-color); - font-weight: var(--font-weight-medium); - padding-bottom: 0.5rem; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-medium); + padding-bottom: 0.5rem; } .cards > ul > li > a.button { @@ -89,11 +88,11 @@ main .block.cards { } .cards.large-text .cards-card-body .date { - font-size: 12px; + font-size: var(--body-font-size-xs); } .cards.large-text .cards-card-body .title { - font-size: 16px; + font-size: var(--body-font-size-m); margin-bottom: 3rem; } @@ -291,7 +290,7 @@ main .cards.machine-parts ul > li { } .cards.large-text .cards-card-body .date { - font-size: 14px; + font-size: var(--body-font-size-s); } .cards.large-text .cards-card-body .title { From 85d05bc4f2ad0c592e353f1ba55040c83b973ecc Mon Sep 17 00:00:00 2001 From: piyushjindal Date: Thu, 5 Oct 2023 21:01:23 +0530 Subject: [PATCH 5/7] Changes wrt to Cards Block --- blocks/cards/cards.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 27b13cc7..da3282db 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -18,7 +18,6 @@ main .block.cards { .cards > ul { display: flex; - justify-content: center; list-style: none; flex-flow: column nowrap; padding: 0; @@ -30,7 +29,6 @@ main .block.cards { box-shadow: 0 2px 12px 0 rgb(60 70 80 / 20%); border: none; transition: all 0.15s ease-in-out; - width: 16.875rem; margin: 0 0 1rem; align-items: center; text-align: left; @@ -197,6 +195,16 @@ main .cards.machine-parts ul > li { background: var(--transparent-blue-light-color); } +@media screen and (min-width: 48rem) { + .cards > ul > li { + margin: 0 7px; + } + + .cards > ul { + flex-flow: row nowrap; + } +} + @media screen and (min-width: 62rem) { .section.cards-container { margin: 5rem 0; @@ -218,7 +226,6 @@ main .cards.machine-parts ul > li { .cards > ul > li { padding: 0; text-align: center; - margin: 0 7px; } .cards > ul > li > a.button { From c9c4f8c5fe402a560dda0141a53d9a518cafbedc Mon Sep 17 00:00:00 2001 From: piyushjindal Date: Thu, 5 Oct 2023 23:09:16 +0530 Subject: [PATCH 6/7] Review Feedback --- blocks/social/social.css | 3 ++ blocks/social/social.js | 10 +++---- styles/styles.css | 4 +-- .../import-news-press-healthythinking.js | 29 +++++++++++++++++-- 4 files changed, 36 insertions(+), 10 deletions(-) diff --git a/blocks/social/social.css b/blocks/social/social.css index 17271ea5..ac6a5d9d 100644 --- a/blocks/social/social.css +++ b/blocks/social/social.css @@ -73,6 +73,9 @@ main .section.social-container h1 + p { main .section.social-container h4 { color: var(--light-black); margin-bottom: 0.5rem; + letter-spacing: 0.05rem; + font-size: var(--heading-font-size-xxs); + font-weight: var(--font-weight-bold); } main .section.social-container .section-container ul { diff --git a/blocks/social/social.js b/blocks/social/social.js index 2a59cd60..c5668cfe 100644 --- a/blocks/social/social.js +++ b/blocks/social/social.js @@ -51,10 +51,10 @@ export default async function decorate(block) { firstP.replaceWith(innerSpan); } - const firstH6 = socialContainer?.querySelector('h6'); + const firstH4 = socialContainer?.querySelector('h4'); - if (firstH6?.nextElementSibling?.tagName === 'H1') { - const { textContent } = firstH6; + if (firstH4?.nextElementSibling?.tagName === 'H1') { + const { textContent } = firstH4; const placeholders = await fetchPlaceholders(getLanguage()); const newMap = {}; Object.keys(placeholders).forEach((entry) => { @@ -67,8 +67,8 @@ export default async function decorate(block) { const a = document.createElement('a'); a.href = val; a.textContent = textContent; - firstH6.innerHTML = ''; - firstH6.appendChild(a); + firstH4.innerHTML = ''; + firstH4.appendChild(a); } decorateAnchors(block); diff --git a/styles/styles.css b/styles/styles.css index b989c385..8c794821 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -716,8 +716,8 @@ main .section.light-blue { background-color: var(--transparent-blue-light-color); } -main .section.no-padding .section-container { - padding: 0; +main .section.no-padding-left .section-container { + padding-left: 0; } /* END Section Styles END */ diff --git a/tools/importer/import-news-press-healthythinking.js b/tools/importer/import-news-press-healthythinking.js index a12d2169..54cc209e 100644 --- a/tools/importer/import-news-press-healthythinking.js +++ b/tools/importer/import-news-press-healthythinking.js @@ -40,6 +40,22 @@ const extractEmbed = (document) => { } }; +const createTextBlock = (title) => { + const block = []; + block.push(['Text (left-aligned)']); + block.push([title]); + return block; +}; + +const createSpacerBlock = () => { + const block = []; + block.push(['Spacer']); + block.push(['Mobile', '60px']); + block.push(['Desktop', '60px']); + block.push(['Tablet', '60px']); + return block; +}; + /** * Creates a Fragment block from a section * @param {HTMLDocument} document The document @@ -50,19 +66,25 @@ const createFragmentBlockFromSection = (document) => { const newsPressCard = document.querySelector('.news-featured'); let section; block.push(['Fragment']); + let title; if (healthifyThinkingCard) { block.push(['https://main--sunstar--hlxsites.hlx.page/fragments/related-articles']); section = healthifyThinkingCard; + title = document.querySelector('.related-article .slider-title'); } else if (newsPressCard) { block.push(['https://main--sunstar--hlxsites.hlx.page/fragments/featured-articles']); section = newsPressCard; + title = document.querySelector('.news-featured .slider-title'); } if (section) { const table = WebImporter.DOMUtils.createTable(block, document); + const spacerTable = WebImporter.DOMUtils.createTable(createSpacerBlock(), document); + const textTable = WebImporter.DOMUtils.createTable(createTextBlock(title), document); section.before(document.createElement('hr')); - section.before(document.querySelector('.slider-title')); + section.before(spacerTable); + section.before(textTable); section.after(document.createElement('hr')); section.replaceWith(table); } @@ -160,9 +182,10 @@ const removeRedundantTag = (document) => { const initialH6 = document.querySelector('h6.rabel'); if (initialH6) { + const h4 = document.createElement('h4'); const textContent = initialH6.querySelector('a')?.textContent; - initialH6.innerHTML = ''; - initialH6.textContent = textContent; + h4.textContent = textContent; + initialH6.replaceWith(h4); } }; From 60be35341ec767613d86b4f45edf9ca85e4050a5 Mon Sep 17 00:00:00 2001 From: piyushjindal Date: Fri, 6 Oct 2023 11:02:23 +0530 Subject: [PATCH 7/7] Review Comments incorporating --- styles/styles.css | 4 ---- .../import-news-press-healthythinking.js | 23 ------------------- 2 files changed, 27 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 8c794821..f233fb4d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -716,10 +716,6 @@ main .section.light-blue { background-color: var(--transparent-blue-light-color); } -main .section.no-padding-left .section-container { - padding-left: 0; -} - /* END Section Styles END */ /* START Keyframes START */ diff --git a/tools/importer/import-news-press-healthythinking.js b/tools/importer/import-news-press-healthythinking.js index 54cc209e..0bfeb71e 100644 --- a/tools/importer/import-news-press-healthythinking.js +++ b/tools/importer/import-news-press-healthythinking.js @@ -40,22 +40,6 @@ const extractEmbed = (document) => { } }; -const createTextBlock = (title) => { - const block = []; - block.push(['Text (left-aligned)']); - block.push([title]); - return block; -}; - -const createSpacerBlock = () => { - const block = []; - block.push(['Spacer']); - block.push(['Mobile', '60px']); - block.push(['Desktop', '60px']); - block.push(['Tablet', '60px']); - return block; -}; - /** * Creates a Fragment block from a section * @param {HTMLDocument} document The document @@ -66,25 +50,18 @@ const createFragmentBlockFromSection = (document) => { const newsPressCard = document.querySelector('.news-featured'); let section; block.push(['Fragment']); - let title; if (healthifyThinkingCard) { block.push(['https://main--sunstar--hlxsites.hlx.page/fragments/related-articles']); section = healthifyThinkingCard; - title = document.querySelector('.related-article .slider-title'); } else if (newsPressCard) { block.push(['https://main--sunstar--hlxsites.hlx.page/fragments/featured-articles']); section = newsPressCard; - title = document.querySelector('.news-featured .slider-title'); } if (section) { const table = WebImporter.DOMUtils.createTable(block, document); - const spacerTable = WebImporter.DOMUtils.createTable(createSpacerBlock(), document); - const textTable = WebImporter.DOMUtils.createTable(createTextBlock(title), document); section.before(document.createElement('hr')); - section.before(spacerTable); - section.before(textTable); section.after(document.createElement('hr')); section.replaceWith(table); }