From 8403cc4f374632314886c67292fa5405492dca4f Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 1 Jul 2024 22:14:26 +0200 Subject: [PATCH 1/2] Provide image height explicity --- .../LearningResourceCard.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx index 88b42dc883..a46e88571e 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx @@ -30,18 +30,22 @@ const SkeletonImage = styled(Skeleton)<{ aspect: number }>` padding-bottom: ${({ aspect }) => 100 / aspect}%; ` +const getImageDimensions = (size: Size, isMedia: boolean) => { + const dimensions = { + small: { width: 190, height: isMedia ? 190 : 120 }, + medium: { width: 298, height: isMedia ? 298 : 170 }, + } + return dimensions[size] +} + const getEmbedlyUrl = ( resource: LearningResource, size: Size, isMedia: boolean, ) => { - const dimensions = { - small: { width: 190, height: isMedia ? 190 : 120 }, - medium: { width: 298, height: isMedia ? 298 : 170 }, - } return embedlyCroppedImage(resource.image!.url!, { key: APP_SETTINGS.embedlyKey || process.env.EMBEDLY_KEY!, - ...dimensions[size], + ...getImageDimensions(size, isMedia), }) } @@ -99,7 +103,7 @@ const getStartDate = (resource: LearningResource, size: Size = "medium") => { if (!startDate) return null - return formatDate(startDate, `MMM${size === "medium" ? "M" : ""} DD, YYYY`) + return formatDate(startDate, `MM${size === "medium" ? "M" : ""} DD, YYYY`) } const StartDate: React.FC<{ resource: LearningResource; size?: Size }> = ({ @@ -188,7 +192,7 @@ const LearningResourceCard: React.FC = ({ : DEFAULT_RESOURCE_IMG } alt={resource.image?.alt ?? ""} - height="auto" + height={getImageDimensions(size, isMedia).height} /> From ac85a4a8380f1e696f09b792afe783ee97397fa7 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 1 Jul 2024 22:25:50 +0200 Subject: [PATCH 2/2] Revert overlapping date fix (should fix, but not for this PR) --- .../components/LearningResourceCard/LearningResourceCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx index a46e88571e..817c8503d0 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx @@ -103,7 +103,7 @@ const getStartDate = (resource: LearningResource, size: Size = "medium") => { if (!startDate) return null - return formatDate(startDate, `MM${size === "medium" ? "M" : ""} DD, YYYY`) + return formatDate(startDate, `MMM${size === "medium" ? "M" : ""} DD, YYYY`) } const StartDate: React.FC<{ resource: LearningResource; size?: Size }> = ({