Merge pull request #2942 from bcgov/floating_buttons

Make sure button container doesn't just float on panel toggles
bcgov · Oct 23, 2023 · 5b0f8c1 · 5b0f8c1
2 parents 07d4f8a + 0fe5f4d
commit 5b0f8c1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/appv2/src/UI/Map/Buttons/ButtonContainer.css b/appv2/src/UI/Map/Buttons/ButtonContainer.css
@@ -9,7 +9,7 @@
   justify-content: center;
   position: absolute;
   bottom: 0;
-  margin-bottom: 200px;
+  /* margin-bottom: 200px; */
   width: 100vw;
   left: 50%;
   transform: translateX(-50%);

diff --git a/appv2/src/UI/Overlay/Overlay.tsx b/appv2/src/UI/Overlay/Overlay.tsx
@@ -1,10 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import './Overlay.css';
 
 const Overlay = (props) => {
   const panelOpen = useSelector((state: any) => state.AppMode.panelOpen);
   const fullScreen = useSelector((state: any) => state.AppMode?.panelFullScreen);
+
+  useEffect(() => {
+    if (!fullScreen) {
+      const buttonContainer = document.getElementById('map-btn-container');
+      if(!panelOpen) {
+        if (buttonContainer) buttonContainer.style.marginBottom = 0 + 'vh';
+      } else {
+        const overlayDiv = document.getElementById('overlaydiv');
+        if (overlayDiv) buttonContainer.style.marginBottom = overlayDiv.style.height;
+      }
+    }
+  }, [panelOpen, fullScreen]);
+
   return (
     <div
     id='overlaydiv'

diff --git a/appv2/src/UI/Overlay/OverlayHeader.tsx b/appv2/src/UI/Overlay/OverlayHeader.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@mui/material';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 
@@ -22,7 +22,9 @@ const maximize = (e) => {
 
 const minimize = (e) => {
   const elementWeWant = document.getElementById('overlaydiv');
+  const buttonContainer = document.getElementById('map-btn-container');
   elementWeWant.style.height = '0px';
+  buttonContainer.style.marginBottom = 5 + 'vh';
 };
 
 const debouncedDrag = debounce((e) => {