feat/SW-451-ui-hotel-card (pull request #700)

Feat/SW-451 ui hotel card * feat(SW-451): initial design * feat(SW-451): add gallery icon and responsive design for mobile * feat(SW-451): refactor name, add routing to sidepeek * feat(SW-451): add updated design * feat(SW-451): add tripadvisor chip * feat(SW-451): fix gallery icon * feat(SW-451): fix additional falsy value check * feat(SW-451): fix import type * feat(SW-451): remove galleryIcon until image data exists * feat(SW-451): fix css styling * feat(SW-451): add new design for mobile * feat(SW-451): add translation * feat(SW-451): change css to mobile first * feat(SW-451): change div to article Approved-by: Matilda Landström
2024-10-22 06:18:40 +00:00
parent b5cb8fe080
commit ea3b86c33e
7 changed files with 231 additions and 7 deletions
@@ -0,0 +1,116 @@
+.container {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.wrapper {
+  display: flex;
+  margin: 0 auto;
+  max-width: var(--max-width-navigation);
+  position: relative;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.image {
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.imageWrapper {
+  position: relative;
+  overflow: hidden;
+  height: 200px;
+  max-width: 360px;
+  width: 100%;
+}
+
+.tripAdvisor {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  position: absolute;
+  left: var(--Spacing-x2);
+  top: var(--Spacing-x2);
+  padding: 0 var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.hotelContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.hotelInformation {
+  gap: var(--Spacing-x1);
+  width: min(607px, 100%);
+}
+
+.title {
+  margin-bottom: var(--Spacing-x1);
+}
+
+.body {
+  margin-top: var(--Spacing-x2);
+}
+
+.facilities {
+  padding: var(--Spacing-x3) 0 var(--Spacing-x-quarter);
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.facilityList {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--Spacing-x-one-and-half);
+  padding-bottom: var(--Spacing-x1);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+.facilityName {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    padding: var(--Spacing-x4) var(--Spacing-x5);
+  }
+
+  .hotelContent {
+    gap: var(--Spacing-x6);
+  }
+
+  .hotelInformation {
+    padding-right: var(--Spacing-x3);
+  }
+
+  .wrapper {
+    gap: var(--Spacing-x3);
+    flex-direction: row;
+  }
+
+  .facilities {
+    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x-half);
+  }
+
+  .facilityList {
+    gap: var(--Spacing-x1);
+    padding-bottom: var(--Spacing-x-half);
+  }
+  .facilityTitle {
+    display: none;
+  }
+  .hotelContent {
+    flex-direction: row;
+    align-items: center;
+  }
+  .imageWrapper {
+    align-self: center;
+  }
+}