From bf57bab672990933e6e22504952093bbc4043175 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Fri, 17 Nov 2023 09:48:16 +0530 Subject: [PATCH 01/11] Updated the sidebar-rte block with sidebar bug fixes --- blocks/forms/forms.js | 26 +++++++-------------- blocks/sidebar-form/sidebar-form.js | 27 ++++++++-------------- blocks/sidebar-rte/sidebar-rte.css | 29 +++++++++++++++++++++++ blocks/sidebar-rte/sidebar-rte.js | 20 ++++++++++++++++ blocks/tabs/tabs.js | 1 - scripts/aem.js | 34 +++++++++++++++++++++++++++ scripts/delayed.js | 5 ++-- styles/Typo.css | 17 ++++++++++++++ styles/template.css | 36 ----------------------------- 9 files changed, 119 insertions(+), 76 deletions(-) create mode 100644 blocks/sidebar-rte/sidebar-rte.css create mode 100644 blocks/sidebar-rte/sidebar-rte.js diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index 18eaf384..78058457 100644 --- a/blocks/forms/forms.js +++ b/blocks/forms/forms.js @@ -1,25 +1,15 @@ -import { readBlockConfig } from '../../scripts/aem.js'; +import { passFormConfig, extractTableData } from '../../scripts/aem.js'; let formConfig = {}; -export default function decorate(block) { - formConfig = readBlockConfig(block); +export default async function decorate(block) { + const table = block.querySelector('table'); + formConfig = await extractTableData(table); const form = document.createElement('div'); form.id = formConfig.target; form.classList.add('content'); - block.textContent = ''; - block.append(form); -} - -export function isForm() { - return !!formConfig.target; -} - -export function buildForm(hbspt) { - hbspt.forms.create({ - region: formConfig.region, - portalId: formConfig.portalid, - formId: formConfig.formid, - target: `#${formConfig.target}`, - }); + if (table) { + table.replaceWith(form); + } + passFormConfig(formConfig); } diff --git a/blocks/sidebar-form/sidebar-form.js b/blocks/sidebar-form/sidebar-form.js index 1058fd1e..78058457 100644 --- a/blocks/sidebar-form/sidebar-form.js +++ b/blocks/sidebar-form/sidebar-form.js @@ -1,24 +1,15 @@ -import { readBlockConfig } from '../../scripts/aem.js'; +import { passFormConfig, extractTableData } from '../../scripts/aem.js'; let formConfig = {}; -export default function decorate(block) { - formConfig = readBlockConfig(block); +export default async function decorate(block) { + const table = block.querySelector('table'); + formConfig = await extractTableData(table); const form = document.createElement('div'); form.id = formConfig.target; - block.textContent = ''; - block.append(form); -} - -export function isForm() { - return !!formConfig.target; -} - -export function buildForm(hbspt) { - hbspt.forms.create({ - region: formConfig.region, - portalId: formConfig.portalid, - formId: formConfig.formid, - target: `#${formConfig.target}`, - }); + form.classList.add('content'); + if (table) { + table.replaceWith(form); + } + passFormConfig(formConfig); } diff --git a/blocks/sidebar-rte/sidebar-rte.css b/blocks/sidebar-rte/sidebar-rte.css new file mode 100644 index 00000000..b7379544 --- /dev/null +++ b/blocks/sidebar-rte/sidebar-rte.css @@ -0,0 +1,29 @@ +.sidebar-rte { + padding: 7%; + margin-top: 25px; + background-color: transparent; + border: none; + box-shadow: 0 2px 15px rgba(0 0 0 / 10%); + border-radius: 4px; + display: block; +} + +.sidebar-rte ul li::before { + content: ''!important; +} + +.sidebar-rte ul li { + padding-left: 0.5em 0 0.5em 0!important; + font-size: 16px!important; + color: #0d233e!important; +} + +.sidebar-rte ul li a { + font-size: 16px!important; + color: #0d233e!important; +} + +.sidebar-rte img { + width: 100%; + max-width: 100%; +} diff --git a/blocks/sidebar-rte/sidebar-rte.js b/blocks/sidebar-rte/sidebar-rte.js new file mode 100644 index 00000000..763ce81e --- /dev/null +++ b/blocks/sidebar-rte/sidebar-rte.js @@ -0,0 +1,20 @@ +export default function decorate(block) { + if (block.classList.contains('hyperlink')) { + const images = block.querySelectorAll('picture'); + images.forEach((image) => { + const { parentElement } = image; + const { nextSibling } = parentElement; + if (nextSibling) { + const nextNextSibling = nextSibling.nextSibling; + if (nextNextSibling) { + const link = nextNextSibling.querySelector('a'); + if (link && link.classList.contains('secondary')) { + link.innerHTML = ''; // Clear the existing content of the link + const imageClone = image.cloneNode(true); // Clone the image + link.appendChild(imageClone); // Insert the cloned image into the link + } + } + } + }); + } +} diff --git a/blocks/tabs/tabs.js b/blocks/tabs/tabs.js index 1261fc8f..d33c06ba 100644 --- a/blocks/tabs/tabs.js +++ b/blocks/tabs/tabs.js @@ -19,7 +19,6 @@ function activeFirstElements(content) { export default function decorate(block) { const tabComponent = document.createElement('div'); tabComponent.className = 'mmg-tabs'; - tabComponent.classList.add('outer'); const ul = document.createElement('div'); ul.className = 'tablist'; const tabContent = document.createElement('div'); diff --git a/scripts/aem.js b/scripts/aem.js index 92c52e89..57647c54 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -21,6 +21,7 @@ * @param {string} data.target subject of the checkpoint event, * for instance the href of a link, or a search term */ +const formConfigData = []; function sampleRUM(checkpoint, data = {}) { sampleRUM.defer = sampleRUM.defer || []; const defer = (fnname) => { @@ -254,6 +255,35 @@ async function loadCSS(href) { }); } +function extractTableData(table) { + const tableData = {}; + table.querySelectorAll('tbody tr').forEach((row) => { + const key = row.cells[0].textContent.toLowerCase(); + const value = row.cells[1].textContent; + tableData[key] = value; + }); + return tableData; +} + +function passFormConfig(config) { + formConfigData.push(config); +} + +function isForm() { + return formConfigData.length; +} + +function buildForm(hbspt) { + formConfigData.forEach((formData) => { + hbspt.forms.create({ + region: formData.region, + portalId: formData.portalid, + formId: formData.formid, + target: `#${formData.target}`, + }); + }); +} + /** * Loads a non module JS file. * @param {string} src URL to the JS file @@ -718,4 +748,8 @@ export { updateSectionsStatus, waitForLCP, capitalizeWords, + passFormConfig, + isForm, + buildForm, + extractTableData, }; diff --git a/scripts/delayed.js b/scripts/delayed.js index c28753b5..1f84e209 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,6 +1,5 @@ // eslint-disable-next-line import/no-cycle -import { sampleRUM } from './aem.js'; -import { buildForm, isForm } from '../blocks/forms/forms.js'; +import { sampleRUM, buildForm, isForm } from './aem.js'; // Core Web Vitals RUM collection sampleRUM('cwv'); @@ -50,7 +49,7 @@ function loadHubSpot() { hsScriptEl.src = '//js.hsforms.net/forms/v2.js'; document.querySelector('head').append(hsScriptEl); hsScriptEl.addEventListener('load', () => { - buildForm(hbspt); // eslint-disable-line + buildForm(hbspt); // eslint-disable-line }); } diff --git a/styles/Typo.css b/styles/Typo.css index 43fd7ebb..f45f53c4 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -625,6 +625,23 @@ input[type="submit"] { width: auto } +.button.secondary { + background-color: transparent; + padding: 0; + border: none; + color: #ec8f2d; + text-transform: none; + font-style: normal; + transition: all .3s ease-in-out; +} + +.button.secondary:hover { + border: none; + color: #ec8f2d; + text-decoration: underline; + transition: all .3s ease-in-out; +} + .blog-pagination a:hover, .button:hover, .cta_button:hover, diff --git a/styles/template.css b/styles/template.css index d67df59c..8a831d91 100644 --- a/styles/template.css +++ b/styles/template.css @@ -503,42 +503,6 @@ body.full-width #main { width: 100% } -#references { - clear: both; - font-size: 12px; - padding-top: 30px; - width: 100% -} - -#references h6 { - border-top: 1px solid #ccc; - color: inherit; - padding: 20px 0 0 -} - -#references ol { - counter-reset: li; - list-style: none -} - -#references ol li { - line-height: normal; - margin-left: 0; - padding: .4em 0 .4em 1em; - position: relative -} - -#references ol li::before { - color: #000; - content: counter(li); - counter-increment: li; - font-size: 1em; - left: 0; - line-height: 100%; - position: absolute; - top: 10% -} - #sidebar { float: right; font-size: 16px; From 4d20e9f5c81690c101f6a15600573dd54c862e68 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Fri, 17 Nov 2023 11:08:59 +0530 Subject: [PATCH 02/11] Minor bugs fixed --- blocks/sidebar-rte/sidebar-rte.css | 4 ++++ blocks/sidebar-rte/sidebar-rte.js | 5 ++--- styles/Typo.css | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/blocks/sidebar-rte/sidebar-rte.css b/blocks/sidebar-rte/sidebar-rte.css index b7379544..4976808a 100644 --- a/blocks/sidebar-rte/sidebar-rte.css +++ b/blocks/sidebar-rte/sidebar-rte.css @@ -27,3 +27,7 @@ width: 100%; max-width: 100%; } + +.sidebar-rte .button { + width: 100%; +} diff --git a/blocks/sidebar-rte/sidebar-rte.js b/blocks/sidebar-rte/sidebar-rte.js index 763ce81e..f120024f 100644 --- a/blocks/sidebar-rte/sidebar-rte.js +++ b/blocks/sidebar-rte/sidebar-rte.js @@ -9,9 +9,8 @@ export default function decorate(block) { if (nextNextSibling) { const link = nextNextSibling.querySelector('a'); if (link && link.classList.contains('secondary')) { - link.innerHTML = ''; // Clear the existing content of the link - const imageClone = image.cloneNode(true); // Clone the image - link.appendChild(imageClone); // Insert the cloned image into the link + link.innerHTML = ''; + link.appendChild(image); } } } diff --git a/styles/Typo.css b/styles/Typo.css index c2a6d377..f45f53c4 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -247,7 +247,7 @@ body { a { background: transparent; - color: #ec8f2d; + color: var(--primary-color); text-decoration: none; } From 95a417b91f37a9acd37638de77b56c9621e1cf8c Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Fri, 17 Nov 2023 20:10:53 +0530 Subject: [PATCH 03/11] padding margin font issues fixed --- blocks/articlecards/articlecards.css | 57 ++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/blocks/articlecards/articlecards.css b/blocks/articlecards/articlecards.css index fc52bd0b..6b5652f9 100644 --- a/blocks/articlecards/articlecards.css +++ b/blocks/articlecards/articlecards.css @@ -193,6 +193,27 @@ ul.posts li.post:last-child { flex: 1 1 auto; } +#main .articlecards .posts .post::before { + content: "" !important; +} + +#main .articlecards ul.posts li.post:first-child .article-card-body { + padding: 0; +} + +#main .articlecards .post:not(:first-child) .article-card-body .entry-title{ + font-size: 14px; + margin: .35em 0 0.5em; +} + +#main .articlecards ul.posts li.post:not(:first-child) { + padding: .65em 0 0; +} + +#main .articlecards ul.posts li.post:first-child .entry-title { + font-size: 18px; +} + @media only screen and (max-width: 479px) { .horizontal .article-card { flex-direction: column!important; @@ -252,6 +273,24 @@ ul.posts li.post:last-child { ul.posts li.post:last-child .article-card-body{ padding-bottom: 30px; } + + #main .articlecards ul.posts li.post:last-child .article-card-body{ + padding-bottom: 0px; + } + + #main .articlecards ul.posts li.post:not(:first-child) .entry-title { + margin: 1em 0 .5em; + font-size: 18px; + } + + #main .articlecards-wrapper{ + padding: 55px 0; + } + + #main .articlecards ul.posts li.post{ + padding: 0 0 30px !important; + } + } @media (min-width: 479px) and (max-width: 767px) { @@ -269,6 +308,10 @@ ul.posts li.post:last-child { ul.posts:not(:first-child) li.post:first-child .article-card-subtitle{ margin-top: 30px; } + + #main .articlecards ul.posts li.post:not(:first-child){ + padding: 0; + } } @media only screen and (max-width: 414px) { @@ -276,4 +319,18 @@ ul.posts li.post:last-child { padding: 0 0 .5em; font-size: 24px; } + + #main .articlecards .post:first-child .entry-title { + font-size: 24px; + } + + #main .articlecards ul.posts li.post:not(:first-child){ + padding: 0 0 30px; + margin: 0; + } + + #main .articlecards-wrapper{ + padding: 50px 0 !important; + } + } \ No newline at end of file From be06b282f15281dee048a27b0131bc4330886b44 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Fri, 17 Nov 2023 20:12:01 +0530 Subject: [PATCH 04/11] padding margin font issues fixed --- blocks/articlecards/articlecards.css | 57 ++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/blocks/articlecards/articlecards.css b/blocks/articlecards/articlecards.css index fc52bd0b..6b5652f9 100644 --- a/blocks/articlecards/articlecards.css +++ b/blocks/articlecards/articlecards.css @@ -193,6 +193,27 @@ ul.posts li.post:last-child { flex: 1 1 auto; } +#main .articlecards .posts .post::before { + content: "" !important; +} + +#main .articlecards ul.posts li.post:first-child .article-card-body { + padding: 0; +} + +#main .articlecards .post:not(:first-child) .article-card-body .entry-title{ + font-size: 14px; + margin: .35em 0 0.5em; +} + +#main .articlecards ul.posts li.post:not(:first-child) { + padding: .65em 0 0; +} + +#main .articlecards ul.posts li.post:first-child .entry-title { + font-size: 18px; +} + @media only screen and (max-width: 479px) { .horizontal .article-card { flex-direction: column!important; @@ -252,6 +273,24 @@ ul.posts li.post:last-child { ul.posts li.post:last-child .article-card-body{ padding-bottom: 30px; } + + #main .articlecards ul.posts li.post:last-child .article-card-body{ + padding-bottom: 0px; + } + + #main .articlecards ul.posts li.post:not(:first-child) .entry-title { + margin: 1em 0 .5em; + font-size: 18px; + } + + #main .articlecards-wrapper{ + padding: 55px 0; + } + + #main .articlecards ul.posts li.post{ + padding: 0 0 30px !important; + } + } @media (min-width: 479px) and (max-width: 767px) { @@ -269,6 +308,10 @@ ul.posts li.post:last-child { ul.posts:not(:first-child) li.post:first-child .article-card-subtitle{ margin-top: 30px; } + + #main .articlecards ul.posts li.post:not(:first-child){ + padding: 0; + } } @media only screen and (max-width: 414px) { @@ -276,4 +319,18 @@ ul.posts li.post:last-child { padding: 0 0 .5em; font-size: 24px; } + + #main .articlecards .post:first-child .entry-title { + font-size: 24px; + } + + #main .articlecards ul.posts li.post:not(:first-child){ + padding: 0 0 30px; + margin: 0; + } + + #main .articlecards-wrapper{ + padding: 50px 0 !important; + } + } \ No newline at end of file From 4d5557531af18ec3d4227b485f98f2e5aa836c2d Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Mon, 20 Nov 2023 12:43:46 +0530 Subject: [PATCH 05/11] fixed bg-color for article cards two variants --- blocks/articlecards/articlecards.css | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/blocks/articlecards/articlecards.css b/blocks/articlecards/articlecards.css index 6b5652f9..f7d427f8 100644 --- a/blocks/articlecards/articlecards.css +++ b/blocks/articlecards/articlecards.css @@ -1,11 +1,25 @@ -.articlecards-wrapper{ - padding: 80px 0; +.articlecards { + padding: 80px 0px; + text-align: left; } -.section.articlecards-container { +.articlecards .wrapper{ + padding: 0 20px; +} + +#main .articlecards .wrapper{ + padding: 0; +} + +.grey-article-outer { background-color: #ededed; } +.grey-article-outer > div { + max-width: 980px; + margin: 0 auto; +} + .wrapper{ display: grid; grid-template-columns: 1fr 1fr; @@ -283,7 +297,7 @@ ul.posts li.post:last-child { font-size: 18px; } - #main .articlecards-wrapper{ + #main .articlecards{ padding: 55px 0; } @@ -301,7 +315,7 @@ ul.posts li.post:last-child { } @media (max-width: 767px) { - .articlecards-wrapper{ + .articlecards{ padding: 60px 0; } @@ -329,7 +343,7 @@ ul.posts li.post:last-child { margin: 0; } - #main .articlecards-wrapper{ + #main .articlecards{ padding: 50px 0 !important; } From a6346b8a63f6f56730aed0506aa5b02431cd750c Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Tue, 21 Nov 2023 10:28:48 +0530 Subject: [PATCH 06/11] Updated the code with latest redirect url --- scripts/aem.js | 8 ++++++-- styles/Typo.css | 8 ++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/scripts/aem.js b/scripts/aem.js index 57647c54..8380180e 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -275,12 +275,16 @@ function isForm() { function buildForm(hbspt) { formConfigData.forEach((formData) => { - hbspt.forms.create({ + const config = { region: formData.region, portalId: formData.portalid, formId: formData.formid, target: `#${formData.target}`, - }); + }; + if (formData.redirecturl) { + config.redirectUrl = formData.redirecturl; + } + hbspt.forms.create(config); }); } diff --git a/styles/Typo.css b/styles/Typo.css index ff679400..fd9c931a 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -509,6 +509,7 @@ body.purple #content ul li::before { button, input, optgroup, +.hs-form input[type="submit"], select, textarea { color: inherit; @@ -629,6 +630,7 @@ textarea:focus { button, input[type="button"], input[type="reset"], +.hs-form input[type="submit"], input[type="submit"] { background-color: var(--primary-color); border-radius: 5px; @@ -674,6 +676,7 @@ input[type="submit"] { .hs-button:hover, .readmore:hover, button:hover, +.hs-form input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { @@ -1582,3 +1585,8 @@ form.hs-form .hs-input[type="checkbox"] { .hs-blog-social-share-list .hs-blog-social-share-item::before { content: ''!important; } + +.block.subscribe .hs_submit { + padding-bottom: 0 +} + From 62f633654e470d87e5a41f5d7f897a02788e1b44 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Tue, 21 Nov 2023 10:39:20 +0530 Subject: [PATCH 07/11] Updated the order --- blocks/social-share/social-share.js | 2 +- templates/Blog/Blog.js | 2 +- templates/News/News.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/social-share/social-share.js b/blocks/social-share/social-share.js index 0311d1d8..926a16b2 100644 --- a/blocks/social-share/social-share.js +++ b/blocks/social-share/social-share.js @@ -25,7 +25,7 @@ function createShareButton(network, url, title) { } function renderShareButtons(container, url, title) { - const networks = ['twitter', 'linkedin', 'facebook']; + const networks = ['twitter', 'facebook', 'linkedin']; const list = document.createElement('ul'); list.className = 'hs-blog-social-share-list'; diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js index 89796279..f89f3d8f 100644 --- a/templates/Blog/Blog.js +++ b/templates/Blog/Blog.js @@ -213,7 +213,7 @@ function createShareButton(network, url, title) { } function renderShareButtons(container, url, title) { - const networks = ['twitter', 'linkedin', 'facebook']; + const networks = ['twitter', 'facebook', 'linkedin']; const list = document.createElement('ul'); list.className = 'hs-blog-social-share-list'; diff --git a/templates/News/News.js b/templates/News/News.js index 9badbeb0..beed8d74 100644 --- a/templates/News/News.js +++ b/templates/News/News.js @@ -212,7 +212,7 @@ function createShareButton(network, url, title) { } function renderShareButtons(container, url, title) { - const networks = ['twitter', 'linkedin', 'facebook']; + const networks = ['twitter', 'facebook', 'linkedin']; const list = document.createElement('ul'); list.className = 'hs-blog-social-share-list'; From 534dca0b28879a3146ede6d8b4a37d3b45952f1e Mon Sep 17 00:00:00 2001 From: Swapnamayee Sahoo Date: Tue, 21 Nov 2023 14:36:28 +0530 Subject: [PATCH 08/11] 95: transition issue fixed --- blocks/accordion/accordion.css | 2 +- blocks/accordion/accordion.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index aa152dfe..b1d7dc62 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -75,7 +75,7 @@ main .accordion.faq-accordion .faq-answer { overflow: hidden; font-size: 16px; max-height: 0; - transition: all 0.5s ease-in-out; + transition: all 0.3s ease-in-out; text-align: left; } diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js index ffc8317b..54a450ca 100644 --- a/blocks/accordion/accordion.js +++ b/blocks/accordion/accordion.js @@ -63,7 +63,10 @@ export default function decorate(block) { const openfaq = block.querySelector('.faq-question.active'); if (openfaq && !currentFaq) { openfaq.classList.toggle('active'); - openfaq.nextElementSibling.classList.toggle('active'); + openfaq.nextElementSibling.style.maxHeight = 0; + setTimeout(() => { + openfaq.nextElementSibling.classList.toggle('active'); + }, 300); } const faqAnswer = e.currentTarget.nextElementSibling; e.currentTarget.classList.toggle('active'); From c0177759c44d8f4a1076a2d861ea7c8f42c38519 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Tue, 21 Nov 2023 17:22:40 +0530 Subject: [PATCH 09/11] padding issue cleared for block and template --- blocks/articlecards/articlecards.css | 148 ++++++++------------------- 1 file changed, 40 insertions(+), 108 deletions(-) diff --git a/blocks/articlecards/articlecards.css b/blocks/articlecards/articlecards.css index f7d427f8..58ced9cc 100644 --- a/blocks/articlecards/articlecards.css +++ b/blocks/articlecards/articlecards.css @@ -1,18 +1,15 @@ .articlecards { - padding: 80px 0px; + padding: 20px 0; text-align: left; } -.articlecards .wrapper{ - padding: 0 20px; -} - #main .articlecards .wrapper{ padding: 0; } .grey-article-outer { background-color: #ededed; + padding: 80px 0; } .grey-article-outer > div { @@ -20,86 +17,79 @@ margin: 0 auto; } -.wrapper{ +.articlecards .wrapper{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4%; + padding: 0 20px; } @media only screen and (max-width: 768px) { - .wrapper{ + .articlecards .wrapper{ grid-template-columns: 1fr; grid-gap: 0; } } -ul.posts { +.articlecards ul.posts { margin: 0; padding: 0; } -ul.posts li.post { +.articlecards ul.posts li.post { padding: 0; margin-bottom: 25px; } -.entry-title { +.articlecards .entry-title { padding: 0; line-height: 18px; } -ul.posts li.post:not(:first-child) .entry-title .redirect-link { +.articlecards ul.posts li.post:not(:first-child) .entry-title .redirect-link { font-size: 14px; } -ul.posts:not(:first-child) li.post:first-child { +.articlecards ul.posts:not(:first-child) li.post:first-child { padding-left: 0; } -ul.posts li.post:not(:first-child) { +.articlecards ul.posts li.post:not(:first-child) { display: flex; flex-direction: row; align-items: flex-start; gap: 0; } -ul.posts li.post:not(:first-child) a.article-card-img { +.articlecards ul.posts li.post:not(:first-child) a.article-card-img { flex-shrink: 0.9; padding: 0; margin: 5px 0 0; } -ul.posts li.post:first-child a.article-card-img img { +.articlecards ul.posts li.post:first-child a.article-card-img img { /* width: 470px; height: 264px; */ width: 100%; height: 100%; } -ul.posts li.post:first-child .article-card-body{ +.articlecards ul.posts li.post:first-child .article-card-body{ padding-top: 20px; } -.article-card-body a{ +.articlecards .article-card-body a{ font-weight: bold; font-size: 18px; letter-spacing: -0.02em; } -.article-card-body a:hover{ +.articlecards .article-card-body a:hover{ color: #000; text-decoration: none; } -.pt-80 { - padding-top: 80px; -} - -.pb-80 { - padding-bottom: 80px; -} - -.article-lists { +.articlecards .article-lists { display: flex; justify-content: center; grid-gap: 4%; @@ -107,7 +97,7 @@ ul.posts li.post:first-child .article-card-body{ padding: 0; } -.article-card { +.articlecards .article-card { position: relative; display: flex; flex: 2 1 auto; @@ -129,61 +119,35 @@ ul.posts li.post:first-child .article-card-body{ padding: 0 0 30px; } -.article-cards .article-card-body .description { - padding : 0; - font-size: 16px; - letter-spacing: -0.02em; - line-height: 23px; -} - -.horizontal .article-card { - grid-gap: 0.75rem; - flex-direction: var(--custom-direction, row); - padding-bottom: 30px; -} - -.horizontal .article-card .article-card-img + * { - flex-shrink: 4; -} - -.horizontal .article-card .article-card-body { - padding: 0; -} - -.horizontal .article-card .article-card-body .redirect-link { - font-size: 14px; - padding: 0; -} - -ul.posts li.post:first-child .description{ +.articlecards ul.posts li.post:first-child .description{ padding: .5em 0 0; } -ul.posts li.post:not(:first-child) .description { +.articlecards ul.posts li.post:not(:first-child) .description { font-size: 14px; padding: .5em 0 0; width: 101%; } -ul.posts:not(:first-child) li.post:first-child .article-card-subtitle{ +.articlecards ul.posts:not(:first-child) li.post:first-child .article-card-subtitle{ margin-top: 0; } -ul.posts li.post:last-child { +.articlecards ul.posts li.post:last-child { margin-bottom: 30px; } -.article-card-img img { +.articlecards .article-card-img img { width: 88%; height: 100%; } -.article-card .article-card-title { +.articlecards .article-card .article-card-title { font-size: var(--text-size, 1.5rem); line-height: var(--text-line-height, 1.5rem); } -.article-card-subtitle { +.articlecards .article-card-subtitle { font-family: Brown-Ald,Helvetica,Arial,sans-serif; font-weight: 700; font-size: 30px; @@ -193,7 +157,7 @@ ul.posts li.post:last-child { padding: 0 0 0.5em; } -.article-card .redirect-link { +.articlecards .article-card .redirect-link { padding-top: 20px; font-size: 18px; font-family: Brown-Ald,Helvetica,Arial,sans-serif; @@ -203,7 +167,7 @@ ul.posts li.post:last-child { margin: 0; } -.article-card .article-card-body { +.articlecards .article-card .article-card-body { flex: 1 1 auto; } @@ -229,34 +193,21 @@ ul.posts li.post:last-child { } @media only screen and (max-width: 479px) { - .horizontal .article-card { - flex-direction: column!important; - } - - .outer { - padding-left: 20px; - padding-right: 20px; - } - - .horizontal .article-card .article-card-img img { - max-width: 100%!important; - } - - ul.posts li.post { + .articlecards .ul.posts li.post { padding: 0 0 30px; margin: 0; } - ul.posts li.post:last-child { + .articlecards ul.posts li.post:last-child { padding: 0; margin-bottom: 0; } - ul.posts li.post:not(:first-child){ + .articlecards ul.posts li.post:not(:first-child){ display: block; } - ul.posts li.post:first-child a.article-card-img img { + .articlecards ul.posts li.post:first-child a.article-card-img img { height: auto; } @@ -264,32 +215,28 @@ ul.posts li.post:last-child { padding: 8px 0 0; } - .mmg-rich-columns .recent-posts .post p{ - padding: 7px; - } - - ul.posts:not(:first-child) { + .articlecards ul.posts:not(:first-child) { padding: 0; } - ul.posts li.post:not(:first-child) .entry-title { + .articlecards ul.posts li.post:not(:first-child) .entry-title { padding: 20px 0 0; } - ul.posts li.post:not(:first-child) .entry-title .redirect-link { + .articlecards ul.posts li.post:not(:first-child) .entry-title .redirect-link { font-size: 18px; } - .article-card-img img{ + .articlecards .article-card-img img{ width:100%; } - ul.posts li.post:last-child .article-card-body{ + .articlecards ul.posts li.post:last-child .article-card-body{ padding-bottom: 30px; } #main .articlecards ul.posts li.post:last-child .article-card-body{ - padding-bottom: 0px; + padding-bottom: 0; } #main .articlecards ul.posts li.post:not(:first-child) .entry-title { @@ -297,29 +244,18 @@ ul.posts li.post:last-child { font-size: 18px; } - #main .articlecards{ - padding: 55px 0; - } - #main .articlecards ul.posts li.post{ padding: 0 0 30px !important; } } -@media (min-width: 479px) and (max-width: 767px) { - .horizontal .article-card { - flex-direction: row!important; - width: 100%; - } -} - @media (max-width: 767px) { - .articlecards{ + .grey-article-outer { padding: 60px 0; } - ul.posts:not(:first-child) li.post:first-child .article-card-subtitle{ + .articlecards ul.posts:not(:first-child) li.post:first-child .article-card-subtitle{ margin-top: 30px; } @@ -329,7 +265,7 @@ ul.posts li.post:last-child { } @media only screen and (max-width: 414px) { - .article-card-subtitle{ + .articlecards .article-card-subtitle{ padding: 0 0 .5em; font-size: 24px; } @@ -343,8 +279,4 @@ ul.posts li.post:last-child { margin: 0; } - #main .articlecards{ - padding: 50px 0 !important; - } - } \ No newline at end of file From 82ff0f92b0f92fc41424c3dd1861c12069d60f90 Mon Sep 17 00:00:00 2001 From: Swapnamayee Sahoo Date: Tue, 21 Nov 2023 17:39:00 +0530 Subject: [PATCH 10/11] 95: transition effect issue fixed --- blocks/accordion/accordion.css | 2 +- blocks/accordion/accordion.js | 22 ++++++++++++---------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index b1d7dc62..19cd3f3b 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -75,7 +75,7 @@ main .accordion.faq-accordion .faq-answer { overflow: hidden; font-size: 16px; max-height: 0; - transition: all 0.3s ease-in-out; + transition: all 0.4s ease-in-out; text-align: left; } diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js index 54a450ca..7b2f65e1 100644 --- a/blocks/accordion/accordion.js +++ b/blocks/accordion/accordion.js @@ -68,17 +68,19 @@ export default function decorate(block) { openfaq.nextElementSibling.classList.toggle('active'); }, 300); } - const faqAnswer = e.currentTarget.nextElementSibling; - e.currentTarget.classList.toggle('active'); - if (e.currentTarget.classList.contains('active')) { - faqAnswer.classList.toggle('active'); - faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`; - } else { - faqAnswer.style.maxHeight = 0; - setTimeout(() => { + setTimeout(() => { + const faqAnswer = e.target.nextElementSibling; + e.target.classList.toggle('active'); + if (e.target.classList.contains('active')) { faqAnswer.classList.toggle('active'); - }, 300); - } + faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`; + } else { + faqAnswer.style.maxHeight = 0; + setTimeout(() => { + faqAnswer.classList.toggle('active'); + }, 300); + } + }, 300, e); }); const faqAnswer = [...row.children][1]; faqAnswer.classList.add('faq-answer'); From 5be23a98eb9ee32b5f3820bbd33b2f821af0b8f6 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Tue, 21 Nov 2023 18:32:33 +0530 Subject: [PATCH 11/11] Updated the author and tabs components --- blocks/author/author.css | 21 +++++++++++++++++++-- blocks/tabs/tabs.css | 7 ++++++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/blocks/author/author.css b/blocks/author/author.css index f6106f7c..56ada876 100644 --- a/blocks/author/author.css +++ b/blocks/author/author.css @@ -1,5 +1,5 @@ .author { - padding: 20px 0; + margin: 1.5rem 0; border: 1px solid #999; } @@ -33,6 +33,7 @@ .author .mmg-tabs .tabpanel img { border-radius: 50%; border: 1px solid #CCC; + height: auto; } .author p { @@ -50,6 +51,19 @@ justify-content: space-between; } +.author .author-avatar { + width: 25%; +} + +.author .author-avatar img { + width: 100%; + height: auto; +} + +.author .author-info.has-avatar { + width: 75%; +} + .author .author-recent-posts { font-size: 14px; line-height: normal @@ -91,13 +105,16 @@ } .author .author-avatar { - /* float: none; */ width: 100%; display: block; text-align: center; padding-bottom: 1em } + .author .author-info.has-avatar { + width: 100%; + } + .author .author-avatar img { width: 80%; max-width: 300px; diff --git a/blocks/tabs/tabs.css b/blocks/tabs/tabs.css index c74c4ca1..b987e1e6 100644 --- a/blocks/tabs/tabs.css +++ b/blocks/tabs/tabs.css @@ -5,4 +5,9 @@ .tabpanel table tr:first-child td { background-color: var(--primary-color)!important; /* Specify your desired background color here */ color: var(--text-color); -} \ No newline at end of file +} + +.tabs .tabpanel ul + p > em { + margin-left: 18px; + display: block; +}