From 25dc3329bbe951dddae9eee9ad43bff2f4a422ab Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Mon, 22 Jul 2024 23:57:42 -0700 Subject: [PATCH] Set precise card heights This change removes excessive padding in some cards to improve the masonry layout. Setting max-block-size is required when there are not enough cards to fill the screen height (e.g. on search). --- script.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/script.js b/script.js index 5cc6af3..5770d61 100644 --- a/script.js +++ b/script.js @@ -88,13 +88,11 @@ function buildHomeComponent(metadata) { // Sets grid-row-end for each card when the homepage is resized. Required to implement masonry layout. new ResizeObserver(_ => { - const halfRemHeight = parseFloat(getComputedStyle(document.documentElement).fontSize) / 2; - for (let card of home.children) { - let contentHeight = 0; - for (let child of card.children) { - contentHeight += child.clientHeight; - } - card.style.gridRowEnd = `span ${Math.ceil(contentHeight / halfRemHeight)}`; + for (const card of home.children) { + const contentHeight = Array.from(card.children).reduce((acc, cur) => acc + cur.clientHeight, 0); + const cardHeight = contentHeight + 128; // 6 * 16px gaps + 2 * 16px padding + card.style.gridRowEnd = `span ${Math.ceil(cardHeight / 16)}`; // 16px grid gap + card.style.maxBlockSize = `${cardHeight}px`; } }).observe(home); -- 2.47.3