Move map out to its own component

2024-09-25 17:44:53 +02:00
parent d3c01237db
commit 1440b4dbae
3 changed files with 3 additions and 3 deletions
--- a/components/Maps/InteractiveMap/interactiveMap.module.css
+++ b/components/Maps/InteractiveMap/interactiveMap.module.css
@@ -0,0 +1,108 @@
+.mapContainer {
+  --button-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  position: relative;
+  z-index: 0;
+}
+
+.mapContainer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: linear-gradient(
+    43deg,
+    rgba(172, 172, 172, 0) 57.66%,
+    rgba(0, 0, 0, 0.25) 92.45%
+  );
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.ctaButtons {
+  position: absolute;
+  top: var(--Spacing-x2);
+  right: var(--Spacing-x2);
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x7);
+  align-items: flex-end;
+  pointer-events: none;
+}
+
+.zoomButtons {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+.closeButton {
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+  gap: var(--Spacing-x-half);
+}
+
+.zoomButton {
+  width: var(--Spacing-x5);
+  height: var(--Spacing-x5);
+  padding: 0;
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+}
+
+.advancedMarker {
+  height: var(--Spacing-x4);
+  width: var(
+    --Spacing-x4
+  ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
+}
+
+.advancedMarker.active {
+  height: var(--Spacing-x5);
+  width: var(
+    --Spacing-x5
+  ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
+}
+
+.poi {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Rounded);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+  gap: var(--Spacing-x1);
+}
+
+.poi.active {
+  padding-right: var(--Spacing-x-one-and-half);
+}
+
+.poiLabel {
+  display: none;
+}
+
+.poi.active .poiLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x2);
+  text-wrap: nowrap;
+}
+
+@media screen and (min-width: 768px) {
+  .ctaButtons {
+    top: var(--Spacing-x4);
+    right: var(--Spacing-x4);
+    bottom: var(--Spacing-x4);
+    justify-content: space-between;
+  }
+
+  .zoomButtons {
+    display: flex;
+  }
+}