From ac61b37f489017e7d6ddd77ec21a477430dee598 Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Mon, 22 Apr 2024 11:01:27 +0530 Subject: [PATCH 1/5] blog filters --- blocks/card-list/card-list.js | 29 ++++++++++++++++++++++++++--- blocks/card/card.css | 4 ---- blocks/card/card.js | 5 ++++- 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 235b45f4c..e345691b3 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -25,6 +25,7 @@ const thumbnailAndLinkCardRender = await createCard({ }); const blogCardRender = await createCard({ + showType: true, descriptionLength: 85, }); @@ -239,9 +240,31 @@ const VARIANTS = { cardRenderer: blogCardRender, async getData() { - return ffetch('/query-index.json') + 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; + }); + + return data; }, getCategories(item) { @@ -317,8 +340,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..85c64b10a 100644 --- a/blocks/card/card.css +++ b/blocks/card/card.css @@ -132,10 +132,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..a8046b650 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, From 28370ec577efe6229d853d8181ca8ad8b1926831 Mon Sep 17 00:00:00 2001 From: Deepti Rathor <31531837+bluedeepart@users.noreply.github.com> Date: Mon, 22 Apr 2024 11:49:46 +0530 Subject: [PATCH 2/5] added resources tag --- blocks/card-list-filter/card-list-filter.js | 4 +--- blocks/card-list/card-list.css | 19 ++++++------------- blocks/card-list/card-list.js | 2 -- blocks/card/card.css | 10 ++++++++++ blocks/card/card.js | 4 ++-- blocks/latest-resources/latest-resources.css | 9 --------- blocks/latest-resources/latest-resources.js | 1 + .../recent-blogs-carousel.js | 4 +++- templates/blog/blog.css | 5 ++++- 9 files changed, 27 insertions(+), 31 deletions(-) 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 e345691b3..73da5ca57 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -244,12 +244,10 @@ const VARIANTS = { 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]; diff --git a/blocks/card/card.css b/blocks/card/card.css index 85c64b10a..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; diff --git a/blocks/card/card.js b/blocks/card/card.js index a8046b650..dd1eb24fa 100644 --- a/blocks/card/card.js +++ b/blocks/card/card.js @@ -65,8 +65,8 @@ class Card { this.c2aLinkIconFull = false; this.showDate = false; this.showCategory = false; - this.showType = false, - this.showDisplayType = false, + this.showType = false; + this.showDisplayType = false; // Apply overwrites Object.assign(this, config); 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..cc5bff373 100644 --- a/blocks/recent-blogs-carousel/recent-blogs-carousel.js +++ b/blocks/recent-blogs-carousel/recent-blogs-carousel.js @@ -3,7 +3,9 @@ import { createCarousel } from '../carousel/carousel.js'; import { createCard } from '../card/card.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); 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) { From cfed9a91e66730da408e9cd8b520dd87af99785f Mon Sep 17 00:00:00 2001 From: Deepti Rathor <31531837+bluedeepart@users.noreply.github.com> Date: Mon, 22 Apr 2024 13:14:25 +0530 Subject: [PATCH 3/5] fixed category filter --- blocks/blog-teaser/blog-teaser.css | 6 +++++- blocks/blog-teaser/blog-teaser.js | 23 +++++++++++++++++++++-- blocks/card-list/card-list.js | 6 +++++- 3 files changed, 31 insertions(+), 4 deletions(-) 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..aeb3b4937 100644 --- a/blocks/blog-teaser/blog-teaser.js +++ b/blocks/blog-teaser/blog-teaser.js @@ -63,12 +63,31 @@ 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') + const publications = await ffetch('/query-index.json') + .sheet('resources') + .filter((resource) => resource.type === 'Publication' && resource.publicationType === 'Full Article') + .limit(3) + .all(); + + const blogs = await ffetch('/query-index.json') .sheet('blog') .filter((post) => featuredPostUrl.indexOf(post.path) === -1) - .chunks(5) .limit(3) .all(); + + const recentPostLinks = [...publications, ...blogs]; + + recentPostLinks.sort((x, y) => { + if (x.date > y.date) { + return -1; + } + if (x.date < y.date) { + return 1; + } + return 0; + }); + recentPostLinks.splice(3); + recentPostLinks.forEach((post) => { const link = a({ href: post.path }); blogPostLinks.push(link); diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 73da5ca57..c7f95644e 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -266,11 +266,15 @@ const VARIANTS = { }, 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('-'); From 8ff1082eaf89b1c208fef5f963b164ff46e9750a Mon Sep 17 00:00:00 2001 From: Deepti Rathor <31531837+bluedeepart@users.noreply.github.com> Date: Mon, 22 Apr 2024 15:06:14 +0530 Subject: [PATCH 4/5] codeoptimization --- blocks/blog-teaser/blog-teaser.js | 25 ++--------------- blocks/card-list/card-list.js | 24 ++--------------- .../recent-blogs-carousel.js | 27 +++---------------- .../recent-news-carousel.js | 9 ++++--- 4 files changed, 13 insertions(+), 72 deletions(-) diff --git a/blocks/blog-teaser/blog-teaser.js b/blocks/blog-teaser/blog-teaser.js index aeb3b4937..673f0186c 100644 --- a/blocks/blog-teaser/blog-teaser.js +++ b/blocks/blog-teaser/blog-teaser.js @@ -8,6 +8,7 @@ import { } 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,29 +64,7 @@ export default async function decorate(block) { const link = a({ href: (new URL(featuredPostUrl)).pathname }); blogPostLinks.push(link); } else { - const publications = await ffetch('/query-index.json') - .sheet('resources') - .filter((resource) => resource.type === 'Publication' && resource.publicationType === 'Full Article') - .limit(3) - .all(); - - const blogs = await ffetch('/query-index.json') - .sheet('blog') - .filter((post) => featuredPostUrl.indexOf(post.path) === -1) - .limit(3) - .all(); - - const recentPostLinks = [...publications, ...blogs]; - - recentPostLinks.sort((x, y) => { - if (x.date > y.date) { - return -1; - } - if (x.date < y.date) { - return 1; - } - return 0; - }); + const recentPostLinks = await getBlogsAndPublications(); recentPostLinks.splice(3); recentPostLinks.forEach((post) => { diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index c7f95644e..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'; @@ -240,28 +241,7 @@ const VARIANTS = { cardRenderer: blogCardRender, async getData() { - let data = []; - const publications = await ffetch('/query-index.json') - .sheet('resources') - .filter((resource) => resource.type === 'Publication' && resource.publicationType === 'Full Article') - .all(); - - const blogs = await ffetch('/query-index.json') - .sheet('blog') - .all(); - - data = [...publications, ...blogs]; - - data.sort((x, y) => { - if (x.date > y.date) { - return -1; - } - if (x.date < y.date) { - return 1; - } - return 0; - }); - + const data = await getBlogsAndPublications(); return data; }, diff --git a/blocks/recent-blogs-carousel/recent-blogs-carousel.js b/blocks/recent-blogs-carousel/recent-blogs-carousel.js index cc5bff373..0e5b3b94b 100644 --- a/blocks/recent-blogs-carousel/recent-blogs-carousel.js +++ b/blocks/recent-blogs-carousel/recent-blogs-carousel.js @@ -1,6 +1,7 @@ -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({ @@ -33,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..74be357b6 100644 --- a/blocks/recent-news-carousel/recent-news-carousel.js +++ b/blocks/recent-news-carousel/recent-news-carousel.js @@ -1,17 +1,15 @@ 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 +23,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); From 7c589502d8c14411ecbf2e18b467e9f511037a2c Mon Sep 17 00:00:00 2001 From: Deepti Rathor <31531837+bluedeepart@users.noreply.github.com> Date: Mon, 22 Apr 2024 15:08:45 +0530 Subject: [PATCH 5/5] lint fixes --- blocks/blog-teaser/blog-teaser.js | 1 - blocks/recent-news-carousel/recent-news-carousel.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/blog-teaser/blog-teaser.js b/blocks/blog-teaser/blog-teaser.js index 673f0186c..49c4a6166 100644 --- a/blocks/blog-teaser/blog-teaser.js +++ b/blocks/blog-teaser/blog-teaser.js @@ -7,7 +7,6 @@ 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) { diff --git a/blocks/recent-news-carousel/recent-news-carousel.js b/blocks/recent-news-carousel/recent-news-carousel.js index 74be357b6..7fb5f7e51 100644 --- a/blocks/recent-news-carousel/recent-news-carousel.js +++ b/blocks/recent-news-carousel/recent-news-carousel.js @@ -1,3 +1,4 @@ +/* eslint-disable import/no-cycle */ import ffetch from '../../scripts/ffetch.js'; import { createRecentResourceCarousel } from '../recent-blogs-carousel/recent-blogs-carousel.js';