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

feat: add mobile design

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-07-05 09:47:59 +02:00
parent 81034c8f2f
commit d3ecb90517
2 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css
View File

@@ -1,16 +1,14 @@
.card { .card {
display: grid; display: grid;
grid-template-columns: 1fr min(480px);
min-height: 270px;
max-width: 850px;
background-color: var(--Base-Surface-Primary-Normal); background-color: var(--Base-Surface-Primary-Normal);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
min-height: 460px;
} }
.image { .image {
height: auto; height: auto;
min-height: 270px; min-height: 160px;
object-fit: cover; object-fit: cover;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@@ -43,8 +41,35 @@
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
} }
.button { .book {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; gap: var(--Spacing-x1);
}
.button {
width: 100%;
justify-content: center;
}
@media screen and (min-width: 850px) {
.card {
grid-template-columns: 1fr min(480px);
min-height: 270px;
max-width: 850px;
}
.image {
min-height: 270px;
}
.book {
justify-content: space-between;
flex-direction: row-reverse;
}
.button {
width: auto;
}
} }

13
components/HotelReservation/SelectHotel/HotelCard/index.tsx
View File

@@ -35,13 +35,18 @@ export default function HotelCard() {
<Chip key={value}>{value}</Chip> <Chip key={value}>{value}</Chip>
))} ))}
</div> </div>
<div className={styles.button}> <div className={styles.book}>
<Button
theme="base"
intent="primary"
size="small"
className={styles.button}
>
Book from 1549 SEK/night
</Button>
<Body color="burgundy"> <Body color="burgundy">
<span>Only 4 rooms left</span> <span>Only 4 rooms left</span>
</Body> </Body>
<Button theme="base" intent="primary" size="small">
Book from 1549 SEK/night
</Button>
</div> </div>
</div> </div>
</div> </div>