From 7fe25f7eca76877b2b693af0f62a6aec37821af2 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Mon, 19 May 2025 09:13:23 +0000 Subject: [PATCH] fix(SW-2376): Vertically centered previous/next buttons inside carousel cards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../Blocks/CardGallery/cardGallery.module.css | 2 +- .../CarouselCards/carouselCards.module.css | 2 +- .../Carousel/CarouselNavigation.tsx | 49 ++++++++++--------- .../components/Carousel/carousel.module.css | 44 +++++++---------- apps/scandic-web/components/Carousel/types.ts | 3 +- .../ContentCard/contentCard.module.css | 6 ++- .../components/ContentCard/index.tsx | 3 +- .../MyStay/Ancillaries/index.tsx | 2 - 8 files changed, 56 insertions(+), 55 deletions(-) diff --git a/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css b/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css index 950abadbd..f34c3190e 100644 --- a/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css +++ b/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css @@ -5,7 +5,7 @@ } .navigationButton { - top: 30%; + top: 125px; /* Content card image has a fixed height of 250px, this centers the button */ } @media screen and (min-width: 768px) { diff --git a/apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css b/apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css index 73175b9ad..e2a593f0e 100644 --- a/apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css +++ b/apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css @@ -1,3 +1,3 @@ .navigationButton { - top: 25%; + top: 125px; /* Content card image has a fixed height of 250px, this centers the button */ } diff --git a/apps/scandic-web/components/Carousel/CarouselNavigation.tsx b/apps/scandic-web/components/Carousel/CarouselNavigation.tsx index 96a410019..2ee918104 100644 --- a/apps/scandic-web/components/Carousel/CarouselNavigation.tsx +++ b/apps/scandic-web/components/Carousel/CarouselNavigation.tsx @@ -3,6 +3,7 @@ import { cx } from "class-variance-authority" import { useIntl } from "react-intl" +import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { useCarousel } from "./CarouselContext" @@ -11,7 +12,7 @@ import styles from "./carousel.module.css" import type { CarouselButtonProps } from "./types" -export function CarouselPrevious({ className, ...props }: CarouselButtonProps) { +export function CarouselPrevious({ className }: CarouselButtonProps) { const { scrollPrev, canScrollPrev } = useCarousel() const intl = useIntl() @@ -19,20 +20,22 @@ export function CarouselPrevious({ className, ...props }: CarouselButtonProps) { if (!canScrollPrev()) return null return ( - + + + + + ) } -export function CarouselNext({ className, ...props }: CarouselButtonProps) { +export function CarouselNext({ className }: CarouselButtonProps) { const { scrollNext, canScrollNext } = useCarousel() const intl = useIntl() @@ -40,15 +43,17 @@ export function CarouselNext({ className, ...props }: CarouselButtonProps) { if (!canScrollNext()) return null return ( - + + + + + ) } diff --git a/apps/scandic-web/components/Carousel/carousel.module.css b/apps/scandic-web/components/Carousel/carousel.module.css index 3fc8ff4ce..f9bd6c94c 100644 --- a/apps/scandic-web/components/Carousel/carousel.module.css +++ b/apps/scandic-web/components/Carousel/carousel.module.css @@ -17,28 +17,20 @@ min-width: 0; } -.button { - display: none; - align-items: center; - justify-content: center; +.buttonWrapper { position: absolute; top: 50%; - transform: translateY(-50%); - background: var(--Base-Surface-Primary-light-Normal); - box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1); - border: none; - border-radius: 50%; - padding: var(--Spacing-x1); - cursor: pointer; z-index: 1; -} -.buttonPrev { - left: -20px; -} + &.previous { + left: 0; + transform: translate(-50%, -50%); + } -.buttonNext { - right: -20px; + &.next { + right: 0; + transform: translate(50%, -50%); + } } .dots { @@ -61,17 +53,19 @@ background: var(--UI-Text-Medium-contrast); } -@media (min-width: 768px) { - .container { - grid-auto-columns: calc(50% - var(--Spacing-x2) / 2); - } - - .button { - display: flex; +@media screen and (max-width: 767px) { + .buttonWrapper { + display: none; } } -@media (min-width: 1024px) { +@media screen and (min-width: 768px) { + .container { + grid-auto-columns: calc(50% - var(--Spacing-x2) / 2); + } +} + +@media screen and (min-width: 1024px) { .container { grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3); } diff --git a/apps/scandic-web/components/Carousel/types.ts b/apps/scandic-web/components/Carousel/types.ts index dc47249dc..0cda7ee85 100644 --- a/apps/scandic-web/components/Carousel/types.ts +++ b/apps/scandic-web/components/Carousel/types.ts @@ -31,7 +31,6 @@ export interface CarouselContextProps extends Omit { selectedIndex: number } -export interface CarouselButtonProps - extends React.ButtonHTMLAttributes { +export interface CarouselButtonProps { className?: string } diff --git a/apps/scandic-web/components/ContentCard/contentCard.module.css b/apps/scandic-web/components/ContentCard/contentCard.module.css index acbab9f99..677dc8ecd 100644 --- a/apps/scandic-web/components/ContentCard/contentCard.module.css +++ b/apps/scandic-web/components/ContentCard/contentCard.module.css @@ -4,7 +4,8 @@ .imageContainer { position: relative; - aspect-ratio: 16/9; + width: 100%; + height: 250px; border-radius: var(--Corner-radius-md); overflow: hidden; transition: border-radius 0.3s ease-in-out; @@ -12,6 +13,9 @@ .image { border-radius: var(--Corner-radius-md); + width: 100%; + height: 100%; + object-fit: cover; transition: transform 0.3s ease-in-out, border-radius 0.3s ease-in-out; diff --git a/apps/scandic-web/components/ContentCard/index.tsx b/apps/scandic-web/components/ContentCard/index.tsx index a77bc66f8..196264865 100644 --- a/apps/scandic-web/components/ContentCard/index.tsx +++ b/apps/scandic-web/components/ContentCard/index.tsx @@ -23,7 +23,8 @@ export default function ContentCard({ src={image.url} alt={image.meta.alt || image.meta.caption || ""} className={styles.image} - fill + width={400} + height={250} sizes="(min-width: 768px) 413px, 100vw" focalPoint={image.focalPoint} /> diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx index 1b79411c7..1117e0c9c 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx @@ -121,8 +121,6 @@ export function Ancillaries({ ) })} - -