scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update typography including missing header element in hotel cards

Browse Source 
add responsive sizes to hotel card image

removed non-existing class
This commit is contained in:
Christian Andolf
2025-05-23 16:08:09 +02:00
parent a849c48edd
commit 642a6881e2
3 changed files with 61 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
View File

@@ -17,9 +17,7 @@ import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -89,22 +87,27 @@ function HotelCard({
>
<div>
<div className={styles.imageContainer}>
<ImageGallery title={hotel.name} images={galleryImages} fill />
<ImageGallery
title={hotel.name}
images={galleryImages}
fill
sizes="(min-width: 768px) calc(100vw - 340px), (min-width: 1367px) 33vw, 100vw"
/>
{hotel.ratings?.tripAdvisor && (
<TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
)}
</div>
</div>
<div className={styles.hotelContent}>
<section className={styles.hotelInformation}>
<div className={styles.hotelInformation}>
<div className={styles.titleContainer}>
<HotelLogoIcon
hotelId={hotel.operaId}
hotelType={hotel.hotelType}
/>
<Subtitle textTransform="capitalize" color="uiTextHighContrast">
{hotel.name}
</Subtitle>
<Typography variant="Title/Subtitle/lg">
<h2>{hotel.name}</h2>
</Typography>
<div className={styles.addressContainer}>
<address className={styles.address}>
{type == HotelCardListingTypeEnum.MapListing ? (
@@ -133,37 +136,40 @@ function HotelCard({
<div>
<Divider variant="vertical" color="subtle" />
</div>
<Caption color="uiTextPlaceholder">
{intl.formatMessage(
{
defaultMessage: "{number} km to city center",
},
{
number: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage(
{
defaultMessage: "{number} km to city center",
},
{
number: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</span>
</Typography>
</div>
</div>
<Body className={styles.hotelDescription}>
{hotel.hotelContent.texts.descriptions?.short}
</Body>
{hotel.hotelContent.texts.descriptions ? (
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.hotelDescription}>
{hotel.hotelContent.texts.descriptions.short}
</p>
</Typography>
) : null}
<div className={styles.facilities}>
{amenities.map((facility) => {
const Icon = (
<FacilityToIcon id={facility.id} color="Icon/Default" />
)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{Icon && Icon}
<Caption color="uiTextMediumContrast">
{facility.name}
</Caption>
</div>
)
})}
{amenities.map((facility) => (
<div className={styles.facilitiesItem} key={facility.id}>
<FacilityToIcon id={facility.id} color="CurrentColor" />
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>{facility.name}</span>
</Typography>
</div>
))}
</div>
<ReadMore
label={intl.formatMessage({
@@ -173,7 +179,7 @@ function HotelCard({
showCTA={true}
sidePeekKey={SidePeekEnum.hotelDetails}
/>
</section>
</div>
<PricesWrapper
href={`${selectRate(lang)}?hotel=${hotel.operaId}`}
isClickable={availability.productType && !isDisabled}