refactor(SW-96): unify lightbox to handle mobile and desktop

2024-08-20 16:31:01 +02:00
parent 24e6b5fffe
commit d77070a210
12 changed files with 396 additions and 248 deletions
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -0,0 +1,272 @@
+.desktopGallery {
+  display: none;
+}
+
+.mobileGallery {
+  margin-top: 70.047px;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.mobileGalleryContent {
+  display: block;
+}
+
+.fullViewCloseButton {
+  position: absolute;
+  top: var(--Spacing-x-one-and-half);
+  left: var(--Spacing-x-half);
+  z-index: 1;
+}
+
+.leftTransformIcon {
+  transform: scaleX(-1);
+}
+
+.content {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+}
+
+.galleryContainer {
+  background-color: var(--Base-Background-Primary-Normal);
+  padding: var(--Spacing-x2);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.galleryHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--Spacing-x1);
+}
+
+.imageCaption {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.mainImageWrapper {
+  position: relative;
+  flex: 1;
+  margin-bottom: var(--Spacing-x2);
+}
+
+.mainImageContainer {
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+  overflow: hidden;
+}
+
+.mainImageContainer img,
+.thumbnailContainer img {
+  border-radius: var(--Corner-radius-Small);
+  cursor: pointer;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.thumbnailGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--Spacing-x1);
+  max-height: none;
+}
+
+.thumbnailContainer {
+  position: relative;
+  height: 242px;
+}
+
+.fullWidthImage {
+  grid-column: 1 / -1;
+  height: 240px;
+}
+
+.thumbnailContainer img {
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.fullViewContainer {
+  margin-top: 70.047px;
+  background-color: var(--UI-Text-High-contrast);
+  height: 100%;
+  padding: var(--Spacing-x2);
+  position: relative;
+  align-items: center;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  place-content: center;
+}
+
+.fullViewHeader {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--Spacing-x5);
+  width: 100%;
+}
+
+.fullViewImageContainer {
+  position: relative;
+  width: 358px;
+  height: 240px;
+  margin-bottom: var(--Spacing-x5);
+}
+
+.fullViewImage {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.fullViewImageContainer img {
+  border-radius: var(--Corner-radius-Medium);
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.fullViewFooter {
+  position: absolute;
+  bottom: calc(-1 * var(--Spacing-x5));
+}
+
+.imagePosition {
+  background-color: var(--UI-Grey-90);
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.navigationButton {
+  display: none;
+}
+
+.portraitImage {
+  max-width: 548px;
+}
+
+@media (min-width: 1367px) {
+  .content {
+    border-radius: var(--Corner-radius-Large);
+    width: 1090px;
+    height: 725px;
+    overflow: hidden;
+  }
+
+  .galleryContainer {
+    padding: var(--Spacing-x5) var(--Spacing-x6);
+  }
+
+  .desktopGallery {
+    display: flex;
+    background-color: var(--Base-Background-Primary-Normal);
+    height: 100%;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .desktopGalleryCloseButton {
+    position: absolute;
+    top: var(--Spacing-x-one-and-half);
+    right: var(--Spacing-x-half);
+  }
+
+  .mobileGallery {
+    display: none;
+  }
+
+  .thumbnailGrid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: var(--Spacing-x1);
+    max-height: 125px;
+    overflow: hidden;
+  }
+
+  .thumbnailContainer {
+    height: 125px;
+  }
+
+  .fullViewCloseButton {
+    position: fixed;
+  }
+
+  .fullWidthImage {
+    grid-column: auto;
+    height: auto;
+  }
+
+  .thumbnailContainer img {
+    border-radius: var(--Corner-radius-Small);
+  }
+
+  .fullViewContainer {
+    margin-top: 0;
+    padding: var(--Spacing-x5);
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .fullViewImageContainer {
+    position: relative;
+    max-width: 1054px;
+    width: 80%;
+    height: 85%;
+    margin-bottom: var(--Spacing-x5);
+  }
+
+  .navigationButton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--Base-Button-Inverted-Fill-Normal);
+    border-radius: 50%;
+    padding: var(--Spacing-x1);
+    cursor: pointer;
+    border: none;
+    display: flex;
+    z-index: 1;
+  }
+
+  .galleryPrevButton {
+    left: var(--Spacing-x2);
+  }
+
+  .galleryNextButton {
+    right: var(--Spacing-x2);
+  }
+
+  .fullViewNextButton {
+    right: var(--Spacing-x5);
+  }
+
+  .fullViewPrevButton {
+    left: var(--Spacing-x5);
+  }
+
+  .fullViewFooter {
+    text-align: left;
+  }
+}