From e3a28933ce1f83ecb26d31a176478fcc120a6587 Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Wed, 15 May 2024 12:48:10 +1000
Subject: [PATCH] feat(@dpc-sdp/ripple-ui-maps): changed the design of the
 'infobox' popup on small screens

---
 .../src/components/map/RplMap.vue             |  1 +
 .../src/components/map/utils.ts               | 60 ++++++++++++++++---
 .../src/components/popup/RplMapPopUp.css      | 11 +++-
 .../src/composables/useMapDeadSpace.ts        | 12 ++++
 4 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/packages/ripple-ui-maps/src/components/map/RplMap.vue b/packages/ripple-ui-maps/src/components/map/RplMap.vue
index aa46ca14f4..6416f4cdff 100644
--- a/packages/ripple-ui-maps/src/components/map/RplMap.vue
+++ b/packages/ripple-ui-maps/src/components/map/RplMap.vue
@@ -128,6 +128,7 @@ const selectedPinStyle = (feature, style) => {
   })
   ic.load()
   style.setImage(ic)
+  return style
 }
 
 const { isFullscreen } = useFullscreen()
diff --git a/packages/ripple-ui-maps/src/components/map/utils.ts b/packages/ripple-ui-maps/src/components/map/utils.ts
index 0d62e4dae2..5429b8a8e2 100644
--- a/packages/ripple-ui-maps/src/components/map/utils.ts
+++ b/packages/ripple-ui-maps/src/components/map/utils.ts
@@ -83,6 +83,48 @@ export const zoomToClusterExtent = (
   })
 }
 
+/**
+ * Find the distance we need to move from the center of the map to account for the
+ * dead space taken up by the sidepanel/sidebars/popups etc. The purpose of this function
+ * is to calculate the offset needed to center the map on a specific point, inside the
+ * available space on the map.
+ *
+ * Note that in OpenLayers, the x-axis is positive to the right and the y-axis is positive
+ * downwards.
+ */
+const getCenterPointDelta = (
+  mapWidth: number,
+  mapHeight: number,
+  _deadSpace?: MapDeadSpace
+): [number, number] => {
+  const defaultDeadSpace = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+
+  const deadSpace = {
+    ...defaultDeadSpace,
+    ...(_deadSpace || {})
+  }
+
+  const mapCenterX = mapWidth / 2
+  const mapCenterY = mapHeight / 2
+
+  const availableWidth = mapWidth - deadSpace.left - deadSpace.right
+  const availableHeight = mapHeight - deadSpace.top - deadSpace.bottom
+
+  const newCenterX = deadSpace.left + availableWidth / 2
+  const newCenterY = deadSpace.top + availableHeight / 2
+
+  // Get the difference between the current center and the new center
+  const deltaX = mapCenterX - newCenterX
+  const deltaY = newCenterY - mapCenterY
+
+  return [deltaX, deltaY]
+}
+
 export const centerMap = (
   map,
   position = [0, 0],
@@ -97,16 +139,18 @@ export const centerMap = (
   // Figure out offset based on the amount of space taken up by the sidepanel/sidebar
   const mapSize = map.getSize()
   const mapWidth = mapSize ? mapSize[0] : 0
-  const leftDeadSpace = deadSpace?.left || 0
-  const remaingingSpaceStart = mapWidth / 2 - leftDeadSpace
-  const remaingingSpaceWidth = mapWidth - leftDeadSpace
-  const xOffset = leftDeadSpace
-    ? remaingingSpaceStart - remaingingSpaceWidth / 2
-    : 0
+  const mapHeight = mapSize ? mapSize[0] : 0
 
-  const yOffset = popupType === 'popover' ? -100 : 0
+  const delta = getCenterPointDelta(mapWidth, mapHeight, deadSpace)
 
-  const offset = { x: xOffset, y: yOffset }
+  // If the popup is a popover, we need to adjust the y-axis to account for the
+  // desired design of the popover.
+  const yCorrection = popupType === 'popover' ? -100 : 0
+
+  const offset = {
+    x: delta[0],
+    y: delta[1] + yCorrection
+  }
 
   const view = map.getView()
   const resolution = view.getResolution()
diff --git a/packages/ripple-ui-maps/src/components/popup/RplMapPopUp.css b/packages/ripple-ui-maps/src/components/popup/RplMapPopUp.css
index 6e99af4943..3a1810b231 100644
--- a/packages/ripple-ui-maps/src/components/popup/RplMapPopUp.css
+++ b/packages/ripple-ui-maps/src/components/popup/RplMapPopUp.css
@@ -188,17 +188,22 @@
 }
 
 .rpl-map-popup--sidebar {
+  --local-infobox-mobile-blank-space: 106px;
+
   z-index: var(--rpl-layer-1);
   margin-left: var(--rpl-sp-2);
-  margin-top: var(--rpl-sp-2);
-  height: calc(var(--local-map-height) - var(--rpl-sp-2) * 2);
+  margin-top: var(--local-infobox-mobile-blank-space);
+  height: calc(
+    var(--local-map-height) - var(--local-infobox-mobile-blank-space) -
+      var(--rpl-sp-2)
+  );
   width: 100%;
   max-width: calc(100% - var(--rpl-sp-2) * 2);
 
   .rpl-map-pop-up-scroll-container {
     max-height: calc(
       var(--local-map-height) - var(--local-popup-header-height) -
-        var(--rpl-sp-2) * 2
+        var(--local-infobox-mobile-blank-space) - var(--rpl-sp-2) * 2
     );
   }
 
diff --git a/packages/ripple-ui-maps/src/composables/useMapDeadSpace.ts b/packages/ripple-ui-maps/src/composables/useMapDeadSpace.ts
index e19b363e52..de0075e8f8 100644
--- a/packages/ripple-ui-maps/src/composables/useMapDeadSpace.ts
+++ b/packages/ripple-ui-maps/src/composables/useMapDeadSpace.ts
@@ -35,6 +35,18 @@ export default (hasSidepanel, popupType, popup) => {
 
   const deadSpace = computed(() => {
     if (isMobile.value) {
+      // On mobile the infobox has a special design that shows a little bit of the map above it.
+      if (hasInfoboxPopup.value && !hasSidepanel) {
+        const mobileInfoboxHeight = 350
+
+        return {
+          left: 0,
+          right: 0,
+          bottom: mobileInfoboxHeight,
+          top: 0
+        }
+      }
+
       return {
         left: 0,
         right: 0,