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

Merged in fix/bookingwidget-fixes (pull request #2135)

Browse Source 
Fix: (#SW-2663) bookingwidget mobile - Space around, border-radius and correct color on date field

* fix: booking widget mobile - padding around booking widget and date color

* Fixed rounded corners

* Reduced minimum size of column


Approved-by: Joakim Jäderberg
This commit is contained in:
Linus Flood
2025-05-16 19:29:44 +00:00
parent 6a5350d681
commit 97964408ab
3 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css
View File

@@ -26,3 +26,9 @@
} }
} }
} }
@media screen and (max-width: 767px) {
.floatingBookingWidget {
padding: 0 0.5rem;
}
}

3
apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css
View File

@@ -15,6 +15,7 @@
/* To avoid this "flash" the styling is set to transparent) */ /* To avoid this "flash" the styling is set to transparent) */
/* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */ /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
border-radius: 10px;
} }
.complete { .complete {
@@ -23,7 +24,7 @@
.partial { .partial {
grid-template-columns: grid-template-columns:
minmax(auto, 150px) min-content minmax(auto, 150px) minmax(auto, 120px) min-content minmax(auto, 120px)
auto; auto;
} }

6
apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -119,7 +119,7 @@ export default function MobileToggleButton({
<span className={styles.blockLabel}>{totalNightsMsg}</span> <span className={styles.blockLabel}>{totalNightsMsg}</span>
</Typography> </Typography>
<Typography variant={"Body/Paragraph/mdRegular"}> <Typography variant={"Body/Paragraph/mdRegular"}>
<span> <span className={styles.placeholder}>
{intl.formatMessage( {intl.formatMessage(
{ {
defaultMessage: "{selectedFromDate} - {selectedToDate}", defaultMessage: "{selectedFromDate} - {selectedToDate}",
@@ -183,7 +183,7 @@ export function MobileToggleButtonSkeleton() {
})} })}
</span> </span>
</Typography> </Typography>
<SkeletonShimmer display={"block"} height="24px" /> <SkeletonShimmer display={"block"} height="20px" width="11ch" />
</span> </span>
<Divider color="baseSurfaceSubtleNormal" variant="vertical" /> <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<span className={styles.block}> <span className={styles.block}>
@@ -198,7 +198,7 @@ export function MobileToggleButtonSkeleton() {
)} )}
</span> </span>
</Typography> </Typography>
<SkeletonShimmer display={"block"} height="24px" /> <SkeletonShimmer display={"block"} height="20px" width="13ch" />
</span> </span>
<span className={styles.icon}> <span className={styles.icon}>
<MaterialIcon icon="search" color="Icon/Inverted" /> <MaterialIcon icon="search" color="Icon/Inverted" />