From 072d36e502cd935d1631eaa4a4e6ebe38bfe94ac Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 26 Sep 2024 11:16:02 +1000 Subject: [PATCH] feat: updated carousel for small viewport (#66) --- .../components/Carousel/common/constants.ts | 2 +- .../Carousel/components/Cards/cards.styles.ts | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts index 7ac18f5..9b7e753 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts @@ -1,7 +1,7 @@ export const CARD_OFFSET_Y = 8; export const CARD_SCALE_X = 40; export const MAX_CARD_HEIGHT = 216; -export const MAX_CARD_HEIGHT_SM = 216; +export const MAX_CARD_HEIGHT_SM = 280; export const MAX_DECK_SIZE = 1; // Currently, deck size is only 1 additional card. export const MAX_CARD_WIDTH = 504; export const CAROUSEL_HEIGHT = MAX_CARD_HEIGHT + MAX_DECK_SIZE * CARD_OFFSET_Y; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts index db4a36a..0635e65 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts @@ -1,4 +1,7 @@ -import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { + mediaTabletDown, + mediaTabletUp, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; import { inkLight, smokeMain, @@ -74,6 +77,13 @@ export const CardContent = styled.div` margin-bottom: 0; } } + + ${mediaTabletDown} { + -webkit-box-orient: vertical; + display: -webkit-box; + -webkit-line-clamp: 10; + overflow: hidden; + } `; export const CardCallToAction = styled(MButtonBase)` @@ -85,6 +95,12 @@ export const CardCallToAction = styled(MButtonBase)` text-decoration-skip-ink: none; text-underline-position: from-font; + p { + color: inherit; + font: inherit; + margin: 0; + } + &:hover { text-decoration: none; }