diff --git a/blocks/anniversary-blogs/anniversary-blogs.js b/blocks/anniversary-blogs/anniversary-blogs.js index ce82105..79c8582 100644 --- a/blocks/anniversary-blogs/anniversary-blogs.js +++ b/blocks/anniversary-blogs/anniversary-blogs.js @@ -1,6 +1,7 @@ import { div, a, p, h3, } from '../../scripts/dom-builder.js'; +import { createOptimizedPicture } from '../../scripts/aem.js'; async function fetchPostData() { try { @@ -21,44 +22,21 @@ function truncateText(text, maxLength) { function createAnniversaryBlogCard(post) { const card = div({ class: 'blog-card' }); - - const picture = document.createElement('picture'); - const sourceWebp = document.createElement('source'); - sourceWebp.setAttribute('type', 'image/webp'); - sourceWebp.setAttribute('srcset', `${post.image}?width=2000&format=webply&optimize=medium`); - sourceWebp.setAttribute('media', '(min-width: 600px)'); - - const sourcePng = document.createElement('source'); - sourcePng.setAttribute('type', 'image/png'); - sourcePng.setAttribute('srcset', `${post.image}?width=2000&format=png&optimize=medium`); - sourcePng.setAttribute('media', '(min-width: 600px)'); - - const img = document.createElement('img'); - img.setAttribute('loading', 'lazy'); - img.setAttribute('alt', post.title); - img.setAttribute('src', `${post.image}?width=750&format=png&optimize=medium`); - img.setAttribute('width', '1000'); - img.setAttribute('height', '562'); - - const link = a({ href: post.path }); - link.appendChild(picture); - picture.appendChild(sourceWebp); - picture.appendChild(sourcePng); - picture.appendChild(img); - - card.appendChild(link); - - const image = div({ class: 'blog-card-content' }); + const image = div( + { class: 'blog-card-content' }, + a({ + href: post.path, + title: post.title, + }, createOptimizedPicture(post.image, post.title)), + ); const title = h3({ class: 'blog-title' }, post.title); const description = p({ class: 'blog-description' }, truncateText(post.description, 180)); const readMore = a({ href: post.path, class: 'read-more' }, 'Read more >>'); + card.appendChild(image); card.appendChild(title); card.appendChild(description); card.appendChild(readMore); - - card.appendChild(image); - return card; } @@ -96,7 +74,7 @@ export default async function decorate(block) { const wrapper = div({ class: 'content' }); const blogsContainer = div({ class: 'col recent-blogs' }); let sortedResults = []; - const filteredResults = postData.filter((item) => item.path.includes('/25th-anniversary/')); + const filteredResults = postData.filter((item) => item.path.includes('/advancing-every-day/')); if (filteredResults.length) { sortedResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date); } diff --git a/styles/list.css b/styles/list.css index 9ea49ff..9bf750a 100644 --- a/styles/list.css +++ b/styles/list.css @@ -11,7 +11,7 @@ font-size: 36px; padding-top: 6px; margin-top: 0; - line-height: 0.8; + line-height: 1; border-bottom: 2px solid #ccc; } diff --git a/templates/Event/Event.css b/templates/Event/Event.css index 3756e47..e43f59a 100644 --- a/templates/Event/Event.css +++ b/templates/Event/Event.css @@ -87,3 +87,13 @@ main .section > div { width: auto } } + +@media (max-width: 600px) { + .popup-message button { + float: left !important; + display: block; + width: 90%; + margin-bottom: 10px; + padding: 10px; + } +}