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

style(SW-593): add wrapper

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-16 10:20:55 +02:00
parent d8a9374345
commit 4c44b312a6
2 changed files with 35 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx
View File

@@ -39,34 +39,35 @@ export default function MobileMapToggle() {
}, [handleScroll])
return (
<div
ref={mapToggleRef}
className={`${styles.mobileToggle} ${isVisible ? "" : styles.hidden}`}
>
<button
type="button"
className={`${styles.button} ${!isDynamicMapOpen ? styles.active : ""}`}
onClick={closeDynamicMap}
<div ref={mapToggleRef} className={styles.wrapper}>
<div
className={`${styles.mobileToggle} ${isVisible ? "" : styles.hidden}`}
>
<HouseIcon
color={!isDynamicMapOpen ? "white" : "red"}
height={24}
width={24}
/>
<span>{intl.formatMessage({ id: "Hotel" })}</span>
</button>
<button
type="button"
className={`${styles.button} ${isDynamicMapOpen ? styles.active : ""}`}
onClick={openDynamicMap}
>
<MapIcon
color={isDynamicMapOpen ? "white" : "red"}
height={24}
width={24}
/>
<span>{intl.formatMessage({ id: "Map" })}</span>
</button>
<button
type="button"
className={`${styles.button} ${!isDynamicMapOpen ? styles.active : ""}`}
onClick={closeDynamicMap}
>
<HouseIcon
color={!isDynamicMapOpen ? "white" : "red"}
height={24}
width={24}
/>
<span>{intl.formatMessage({ id: "Hotel" })}</span>
</button>
<button
type="button"
className={`${styles.button} ${isDynamicMapOpen ? styles.active : ""}`}
onClick={openDynamicMap}
>
<MapIcon
color={isDynamicMapOpen ? "white" : "red"}
height={24}
width={24}
/>
<span>{intl.formatMessage({ id: "Map" })}</span>
</button>
</div>
</div>
)
}

11
components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css
View File

@@ -1,8 +1,11 @@
.mobileToggle {
.wrapper {
margin: 0 auto;
position: sticky;
bottom: var(--Spacing-x5);
margin: 0 auto;
z-index: 1;
}
.mobileToggle {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--Spacing-x-half);
@@ -41,11 +44,11 @@
}
.hidden {
visibility: hidden;
display: none;
}
@media screen and (min-width: 1367px) {
.mobileToggle {
.wrapper {
display: none;
}
}