diff --git a/blocks/blog-teaser/blog-teaser.css b/blocks/blog-teaser/blog-teaser.css index 1d066a9b7..9924085e2 100644 --- a/blocks/blog-teaser/blog-teaser.css +++ b/blocks/blog-teaser/blog-teaser.css @@ -32,7 +32,7 @@ transition: transform .5s ease-in-out; width: 100%; height: auto; - max-height: 575px; + max-height: 290px; object-fit: cover; } @@ -40,6 +40,10 @@ transform: scale(1.1); } +.blog-teaser.featured .blog-teaser-item .blog-teaser-thumb img{ + max-height: 575px; +} + .blog-teaser-item .blog-teaser-caption { padding: 40px 30px; text-align: center; diff --git a/blocks/blog-teaser/blog-teaser.js b/blocks/blog-teaser/blog-teaser.js index 6365dad98..49c4a6166 100644 --- a/blocks/blog-teaser/blog-teaser.js +++ b/blocks/blog-teaser/blog-teaser.js @@ -7,7 +7,7 @@ import { getMetadata, } from '../../scripts/lib-franklin.js'; import { fetchFragment, formatDate } from '../../scripts/scripts.js'; -import ffetch from '../../scripts/ffetch.js'; +import { getBlogsAndPublications } from '../recent-news-carousel/recent-news-carousel.js'; function renderBlockTeaser(blogData) { /* eslint-disable indent */ @@ -63,12 +63,9 @@ export default async function decorate(block) { const link = a({ href: (new URL(featuredPostUrl)).pathname }); blogPostLinks.push(link); } else { - const recentPostLinks = await ffetch('/query-index.json') - .sheet('blog') - .filter((post) => featuredPostUrl.indexOf(post.path) === -1) - .chunks(5) - .limit(3) - .all(); + const recentPostLinks = await getBlogsAndPublications(); + recentPostLinks.splice(3); + recentPostLinks.forEach((post) => { const link = a({ href: post.path }); blogPostLinks.push(link); diff --git a/blocks/card-list-filter/card-list-filter.js b/blocks/card-list-filter/card-list-filter.js index 7c8a9b3be..3e7fbff47 100644 --- a/blocks/card-list-filter/card-list-filter.js +++ b/blocks/card-list-filter/card-list-filter.js @@ -43,9 +43,7 @@ function scrollBlockIntoView(block) { left: 0, behavior: 'smooth', }); - }, - 1000, - ); + }, 1000); } }); }); diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index 08615351e..df416570a 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -1,9 +1,4 @@ /* stylelint-disable no-descending-specificity */ - -/* COMMONS */ - -/* Desktop - Style like a list */ - main .section.card-list-container .default-content-wrapper h2 { text-align: center; margin-top: 20px; @@ -146,7 +141,7 @@ main .card-list.blog { } .card-list.blog .card-caption { - padding: 15px; + padding: 15px 15px 20px; color: #34393d; } @@ -214,10 +209,7 @@ main .section div.card-list-wrapper.assay-kits { padding: 0; } -main .card-list.accessories-and-consumables { - justify-content: center; -} - +main .card-list.accessories-and-consumables, main .card-list.card-list.accessories-and-consumables .card { justify-content: center; } @@ -230,7 +222,6 @@ main .card-list.assay-kits .card { .card-list.accessories-and-consumables .card-caption, .card-list.assay-kits .card-caption { padding: 15px; - color: #34393d; } .card-list.accessories-and-consumables .card-caption h3, @@ -240,6 +231,8 @@ main .card-list.assay-kits .card { margin-bottom: 8px; } +.card-list.accessories-and-consumables .card-caption, +.card-list.assay-kits .card-caption, .card-list.accessories-and-consumables .card-caption h3 a, .card-list.assay-kits .card-caption h3 a { color: #34393d; @@ -254,10 +247,10 @@ main .card-list.assay-kits .card { .card-list.accessories-and-consumables .button-container, .card-list.assay-kits .button-container { text-align: left; -} +} .card-list.assay-kits .card .badge { - background: #6db43e; + background: ; color: #fff; text-align: center; padding: 5px 0; diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 235b45f4c..403661477 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -2,6 +2,7 @@ import ffetch from '../../scripts/ffetch.js'; import { createCarousel } from '../carousel/carousel.js'; import { createCard } from '../card/card.js'; import { div, h2 } from '../../scripts/dom-helpers.js'; +import { getBlogsAndPublications } from '../recent-news-carousel/recent-news-carousel.js'; const viewAllCategory = 'viewall'; @@ -25,6 +26,7 @@ const thumbnailAndLinkCardRender = await createCard({ }); const blogCardRender = await createCard({ + showType: true, descriptionLength: 85, }); @@ -239,17 +241,20 @@ const VARIANTS = { cardRenderer: blogCardRender, async getData() { - return ffetch('/query-index.json') - .sheet('blog') - .all(); + const data = await getBlogsAndPublications(); + return data; }, getCategories(item) { - const category = item.path + let category = item.path .split('/')[2]; if (!category || category === 'blog') return null; + if (category === 'in-the-news' && item.category !== '0') { + category = item.category.split(' ').join('-'); + } + const filterableCategory = category.split('-') .map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase()) .join('-'); @@ -317,8 +322,8 @@ const VARIANTS = { products = products.filter( (product) => product.subCategory === 'Accessories and Consumables' - && product.locale !== 'ZH' - && product.path !== '/products/accessories-consumables', + && product.locale !== 'ZH' + && product.path !== '/products/accessories-consumables', ); products.sort((product1, product2) => product1.h1.localeCompare(product2.h1)); diff --git a/blocks/card/card.css b/blocks/card/card.css index 9938c105e..46ff70668 100644 --- a/blocks/card/card.css +++ b/blocks/card/card.css @@ -57,6 +57,16 @@ main .card .card-category { z-index: 1; } +main .card .card-type, +main .card .card-display-type { + display: block; + text-align: left; + text-transform: uppercase; + color: #6eb43f; + font-size: 14px; + margin: 5px 0; +} + main .card-caption { display: flex; flex-direction: column; @@ -132,10 +142,6 @@ main .card-caption .c2a .compare-checkbox.selected { border-color: var(--background-color-green); } -main .card-type { - display: none; -} - main .card-date { font-size: var(--body-font-size-xs); font-family: var(--ff-proxima-light); diff --git a/blocks/card/card.js b/blocks/card/card.js index 442ee5928..dd1eb24fa 100644 --- a/blocks/card/card.js +++ b/blocks/card/card.js @@ -65,6 +65,8 @@ class Card { this.c2aLinkIconFull = false; this.showDate = false; this.showCategory = false; + this.showType = false; + this.showDisplayType = false; // Apply overwrites Object.assign(this, config); @@ -155,7 +157,8 @@ class Card { item.badgeText ? div({ class: 'badge' }, item.badgeText) : '', this.showCategory ? span({ class: 'card-category' }, item.subCategory && item.subCategory !== '0' ? item.subCategory : item.category) : '', div({ class: 'card-caption' }, - item.displayType ? div({ class: 'card-type' }, item.displayType) : '', + this.showDisplayType ? div({ class: 'card-display-type' }, item.displayType) : '', + this.showType ? div({ class: 'card-type' }, item.type) : '', this.showDate ? div({ class: 'card-date' }, formatDateUTCSeconds(item.date)) : '', h3( this.titleLink ? a({ href: cardLink }, cardTitle) : cardTitle, diff --git a/blocks/latest-resources/latest-resources.css b/blocks/latest-resources/latest-resources.css index fe4fdee03..b5cf06cb8 100644 --- a/blocks/latest-resources/latest-resources.css +++ b/blocks/latest-resources/latest-resources.css @@ -29,15 +29,6 @@ main .latest-resources .carousel-item { margin: 0; } -main .latest-resources .card .card-type { - display: block; - text-align: left; - text-transform: uppercase; - color: #6eb43f; - font-size: 14px; - margin: 5px 0; -} - main .latest-resources .card .card-thumb { height: 190px; min-height: 190px; diff --git a/blocks/latest-resources/latest-resources.js b/blocks/latest-resources/latest-resources.js index 3f311cc72..8fdfcb914 100644 --- a/blocks/latest-resources/latest-resources.js +++ b/blocks/latest-resources/latest-resources.js @@ -70,6 +70,7 @@ export default async function decorate(block) { const placeholders = await fetchPlaceholders(); const resourceCard = await createCard({ showDate: true, + showDisplayType: true, defaultButtonText: placeholders.learnMore || 'Learn more', descriptionLength: block.classList.contains('list') ? 180 : 75, }); diff --git a/blocks/recent-blogs-carousel/recent-blogs-carousel.js b/blocks/recent-blogs-carousel/recent-blogs-carousel.js index c46818f76..0e5b3b94b 100644 --- a/blocks/recent-blogs-carousel/recent-blogs-carousel.js +++ b/blocks/recent-blogs-carousel/recent-blogs-carousel.js @@ -1,9 +1,12 @@ -import ffetch from '../../scripts/ffetch.js'; +/* eslint-disable import/no-cycle */ import { createCarousel } from '../carousel/carousel.js'; import { createCard } from '../card/card.js'; +import { getBlogsAndPublications } from '../recent-news-carousel/recent-news-carousel.js'; export async function createRecentResourceCarousel(block, data) { - const cardRenderer = await createCard(); + const cardRenderer = await createCard({ + showType: true, + }); const resources = data .filter((resource) => resource.path !== window.location.pathname) .slice(0, 6); @@ -31,29 +34,7 @@ export async function createRecentResourceCarousel(block, data) { } export default async function decorate(block) { - let data = []; - const publications = await ffetch('/query-index.json') - .sheet('resources') - .filter((resource) => resource.type === 'Publication' && resource.publicationType === 'Full Article') - .limit(7) - .all(); - - const blogs = await ffetch('/query-index.json') - .sheet('blog') - .limit(7) - .all(); - - data = [...publications, ...blogs]; - - data.sort((x, y) => { - if (x.date > y.date) { - return -1; - } - if (x.date < y.date) { - return 1; - } - return 0; - }); + let data = await getBlogsAndPublications(); data = data.slice(0, 7); await createRecentResourceCarousel(block, data); diff --git a/blocks/recent-news-carousel/recent-news-carousel.js b/blocks/recent-news-carousel/recent-news-carousel.js index 96c6103b8..7fb5f7e51 100644 --- a/blocks/recent-news-carousel/recent-news-carousel.js +++ b/blocks/recent-news-carousel/recent-news-carousel.js @@ -1,17 +1,16 @@ +/* eslint-disable import/no-cycle */ import ffetch from '../../scripts/ffetch.js'; import { createRecentResourceCarousel } from '../recent-blogs-carousel/recent-blogs-carousel.js'; -export default async function decorate(block) { +export async function getBlogsAndPublications() { let data = []; const publications = await ffetch('/query-index.json') .sheet('resources') .filter((resource) => resource.type === 'Publication' && resource.publicationType === 'Full Article') - .limit(7) .all(); const blogs = await ffetch('/query-index.json') .sheet('blog') - .limit(7) .all(); data = [...publications, ...blogs]; @@ -25,6 +24,11 @@ export default async function decorate(block) { } return 0; }); + return data; +} + +export default async function decorate(block) { + let data = await getBlogsAndPublications(); data = data.slice(0, 7); await createRecentResourceCarousel(block, data); diff --git a/templates/blog/blog.css b/templates/blog/blog.css index fc8d70fcf..4238d2e81 100644 --- a/templates/blog/blog.css +++ b/templates/blog/blog.css @@ -83,7 +83,10 @@ .blog main .card-caption h3 { line-height: 1.1; - margin-top: 0; +} + +.blog main .card-caption p.button-container { + margin-bottom: 0; } .blog main .section > div:not(.hero-wrapper, .card-list-filter-wrapper, .blog-teaser-wrapper) {