From 530c6aa9173da9800cab075ccfb8c5040fd27b00 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 27 Jun 2024 18:51:16 +0200 Subject: [PATCH] Square aspect ratio for media resource images --- .../page-components/ResourceCarousel/types.ts | 7 ++----- .../mit-open/src/pages/HomePage/HomePage.tsx | 2 ++ .../mit-open/src/pages/HomePage/carousels.ts | 6 +++--- .../ol-components/src/components/Card/Card.tsx | 7 +++++-- .../LearningResourceCard.tsx | 18 +++++++++++++----- 5 files changed, 25 insertions(+), 15 deletions(-) diff --git a/frontends/mit-open/src/page-components/ResourceCarousel/types.ts b/frontends/mit-open/src/page-components/ResourceCarousel/types.ts index 765d95056d..85d750ae26 100644 --- a/frontends/mit-open/src/page-components/ResourceCarousel/types.ts +++ b/frontends/mit-open/src/page-components/ResourceCarousel/types.ts @@ -3,10 +3,7 @@ import type { LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest as SearchRequest, FeaturedApiFeaturedListRequest as FeaturedListParams, } from "api" - -type CardProps = { - size?: "small" | "medium" -} +import type { LearningResourceCardProps } from "ol-components" interface ResourceDataSource { type: "resources" @@ -27,7 +24,7 @@ type DataSource = ResourceDataSource | SearchDataSource | FeaturedDataSource type TabConfig = { label: React.ReactNode - cardProps?: CardProps + cardProps?: Pick data: D } diff --git a/frontends/mit-open/src/pages/HomePage/HomePage.tsx b/frontends/mit-open/src/pages/HomePage/HomePage.tsx index bf90af1250..dfb8c23fcf 100644 --- a/frontends/mit-open/src/pages/HomePage/HomePage.tsx +++ b/frontends/mit-open/src/pages/HomePage/HomePage.tsx @@ -28,8 +28,10 @@ const FeaturedCoursesCarousel = styled(ResourceCarousel)(({ theme }) => ({ })) const MediaCarousel = styled(ResourceCarousel)(({ theme }) => ({ margin: "80px 0", + minHeight: "388px", [theme.breakpoints.down("md")]: { margin: "40px 0", + minHeight: "418px", }, })) diff --git a/frontends/mit-open/src/pages/HomePage/carousels.ts b/frontends/mit-open/src/pages/HomePage/carousels.ts index fd7c461c12..5bdc786f00 100644 --- a/frontends/mit-open/src/pages/HomePage/carousels.ts +++ b/frontends/mit-open/src/pages/HomePage/carousels.ts @@ -46,7 +46,7 @@ const FEATURED_RESOURCES_CAROUSEL: ResourceCarouselProps["config"] = [ const MEDIA_CAROUSEL: ResourceCarouselProps["config"] = [ { label: "All", - cardProps: { size: "small" }, + cardProps: { size: "small", isMedia: true }, data: { type: "resources", params: { @@ -58,7 +58,7 @@ const MEDIA_CAROUSEL: ResourceCarouselProps["config"] = [ }, { label: "Videos", - cardProps: { size: "small" }, + cardProps: { size: "small", isMedia: true }, data: { type: "resources", params: { resource_type: ["video"], limit: 12, sortby: "new" }, @@ -66,7 +66,7 @@ const MEDIA_CAROUSEL: ResourceCarouselProps["config"] = [ }, { label: "Podcasts", - cardProps: { size: "small" }, + cardProps: { size: "small", isMedia: true }, data: { type: "resources", params: { resource_type: ["podcast_episode"], limit: 12, sortby: "new" }, diff --git a/frontends/ol-components/src/components/Card/Card.tsx b/frontends/ol-components/src/components/Card/Card.tsx index 25ab02700a..27f2634339 100644 --- a/frontends/ol-components/src/components/Card/Card.tsx +++ b/frontends/ol-components/src/components/Card/Card.tsx @@ -66,10 +66,11 @@ const Body = styled.div` margin: 16px; ` -const Image = styled.img<{ size?: Size }>` +const Image = styled.img<{ height?: number | string; size?: Size }>` display: block; width: 100%; - height: ${({ size }) => (size === "small" ? 120 : 170)}px; + height: ${({ height, size }) => + height ?? (size === "small" ? "120px" : "170px")}; background-color: ${theme.custom.colors.lightGray1}; object-fit: cover; ` @@ -147,6 +148,7 @@ type CardProps = { type ImageProps = ImgHTMLAttributes & { size?: Size + height?: number | string style?: CSSProperties } type TitleProps = { @@ -214,6 +216,7 @@ const Card: Card = ({ children, className, size, href }) => { {image && ( )} /> )} diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx index b37d9dbf79..87da3a7975 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx @@ -25,10 +25,14 @@ const SkeletonImage = styled(Skeleton)<{ aspect: number }>` padding-bottom: ${({ aspect }) => 100 / aspect}%; ` -const getEmbedlyUrl = (resource: LearningResource, size: Size) => { +const getEmbedlyUrl = ( + resource: LearningResource, + size: Size, + isMedia: boolean, +) => { const dimensions = { - small: { width: 190, height: 120 }, - medium: { width: 298, height: 170 }, + 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!, @@ -116,6 +120,7 @@ interface LearningResourceCardProps { resource?: LearningResource | null className?: string size?: Size + isMedia?: boolean href?: string onAddToLearningPathClick?: ResourceIdCallback | null onAddToUserListClick?: ResourceIdCallback | null @@ -126,16 +131,18 @@ const LearningResourceCard: React.FC = ({ resource, className, size = "medium", + isMedia = false, href, onAddToLearningPathClick, onAddToUserListClick, }) => { if (isLoading) { const { width, height } = imgConfigs["column"] + const aspect = isMedia ? 1 : width / height return ( - + @@ -151,10 +158,11 @@ const LearningResourceCard: React.FC = ({