fix: changing height of window was leaving blank space below map

dhis2 · Sep 11, 2023 · 58a9135 · 58a9135
1 parent 74f7c57
commit 58a9135
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 46 deletions.
diff --git a/src/components/app/App.css b/src/components/app/App.css
@@ -2,9 +2,6 @@
     --left-panel-width: 300px;
     --right-panel-width: 380px;
 
-    --transition-time: 100ms;
-    --transition-style: ease-out;
-
     --header-height: 48px;
     --toolbar-height: 32px;
 }
diff --git a/src/components/app/App.js b/src/components/app/App.js
@@ -51,10 +51,10 @@ const App = () => {
     }, [systemSettings, dispatch])
 
     return !isEmpty(systemSettings) ? (
-        <div>
+        <>
             <CssVariables colors spacers theme />
             <AppLayout />
-        </div>
+        </>
     ) : null
 }
 

diff --git a/src/components/app/AppLayout.js b/src/components/app/AppLayout.js
@@ -19,7 +19,9 @@ const AppLayout = () => {
     const [interpretationsRenderId, setInterpretationsRenderId] = useState(1)
 
     const dataTableOpen = useSelector((state) => !!state.dataTable)
-    const downloadMode = useSelector((state) => !!state.download.downloadMode)
+    const downloadModeOpen = useSelector(
+        (state) => !!state.download.downloadMode
+    )
     const detailsPanelOpen = useSelector(
         (state) => state.ui.rightPanelOpen && !state.orgUnitProfile
     )
@@ -30,22 +32,22 @@ const AppLayout = () => {
 
     return (
         <>
-            {downloadMode ? (
+            {downloadModeOpen ? (
                 <DownloadModeMenu />
             ) : (
                 <AppMenu onFileMenuAction={onFileMenuAction} />
             )}
             <div
                 className={cx(styles.content, {
-                    [styles.downloadContent]: downloadMode,
+                    [styles.downloadContent]: downloadModeOpen,
                 })}
             >
-                {downloadMode ? <DownloadSettings /> : <LayersPanel />}
+                {downloadModeOpen ? <DownloadSettings /> : <LayersPanel />}
                 <div className={styles.appMapAndTable}>
                     <MapPosition />
                     {dataTableOpen && <BottomPanel />}
                 </div>
-                {!downloadMode && (
+                {!downloadModeOpen && (
                     <DetailsPanel
                         interpretationsRenderId={interpretationsRenderId}
                     />

diff --git a/src/components/app/FileMenu.js b/src/components/app/FileMenu.js
@@ -56,13 +56,9 @@ const getSaveFailureMessage = (message) =>
 const FileMenu = ({ onFileMenuAction }) => {
     const { d2 } = useD2()
     const engine = useDataEngine()
-
     const map = useSelector((state) => state.map)
-
     const dispatch = useDispatch()
-
     const { keyDefaultBaseMap } = useSystemSettings()
-    //alerts
     const saveAlert = useAlert(ALERT_MESSAGE_DYNAMIC, ALERT_OPTIONS_DYNAMIC)
     const saveAsAlert = useAlert(ALERT_MESSAGE_DYNAMIC, ALERT_OPTIONS_DYNAMIC)
     const deleteAlert = useAlert(

diff --git a/src/components/app/styles/AppLayout.module.css b/src/components/app/styles/AppLayout.module.css
@@ -13,7 +13,3 @@
     flex: auto;
     position: relative;
 }
-
-.downloadMap {
-    flex: auto;
-}
diff --git a/src/components/app/styles/DetailsPanel.module.css b/src/components/app/styles/DetailsPanel.module.css
@@ -1,6 +1,5 @@
 .detailsPanel {
     width: var(--right-panel-width);
-    transition: width var(--transition-time) var(--transition-style);
 }
 
 .detailsPanel.collapsed {

diff --git a/src/components/download/styles/DownloadMenubar.module.css b/src/components/download/styles/DownloadMenubar.module.css
@@ -1,14 +1,13 @@
 .downloadModeMenu {
     display: flex;
+    position: absolute;
     align-items: center;
     width: 100%;
     height: var(--header-height);
     z-index: 1200;
     background-color: var(--colors-grey600);
-    position: absolute;
     left: 0;
     top: 0
-
 }
 
 .downloadModeMenu button {

diff --git a/src/components/layers/styles/LayersPanel.module.css b/src/components/layers/styles/LayersPanel.module.css
@@ -1,6 +1,5 @@
 .layersPanel {
     width: var(--left-panel-width);
-    transition: width var(--transition-time) var(--transition-style);
 }
 
 .layersPanel.collapsed {
@@ -15,7 +14,6 @@
     overflow-y: auto;
     z-index: 1190;
     transform: translateX(0);
-    transition: transform var(--transition-time) var(--transition-style);
 }
 
 .layersPanel.collapsed .layersPanelInner {

diff --git a/src/components/layers/styles/LayersToggle.module.css b/src/components/layers/styles/LayersToggle.module.css
@@ -10,7 +10,6 @@
     box-shadow: 3px 1px 5px -1px rgba(0, 0, 0, 0.2);
     z-index: 1100;
     cursor: pointer;
-    transition: left var(--transition-time) var(--transition-style);
 }
 
 .layersToggle.collapsed {

diff --git a/src/components/map/MapPosition.js b/src/components/map/MapPosition.js
@@ -6,7 +6,6 @@ import { getSplitViewLayer } from '../../util/helpers.js'
 import DownloadMapInfo from '../download/DownloadMapInfo.js'
 import NorthArrow from '../download/NorthArrow.js'
 import MapContainer from '../map/MapContainer.js'
-import { useWindowDimensions } from '../WindowDimensionsProvider.js'
 import styles from './styles/MapPosition.module.css'
 
 const MapPosition = () => {
@@ -22,18 +21,16 @@ const MapPosition = () => {
         showNorthArrow,
     } = useSelector((state) => state.download)
     const { id: mapId, mapViews: layers } = useSelector((state) => state.map)
-    const { layersPanelOpen, rightPanelOpen, dataTableHeight } = useSelector(
+    const { layersPanelOpen, dataTableHeight } = useSelector(
         (state) => state.ui
     )
     const dataTableOpen = useSelector((state) => !!state.dataTable)
 
-    const { height } = useWindowDimensions()
-
-    let mapHeight = height - HEADER_HEIGHT
+    let mapHeight = `calc(100vh - ${HEADER_HEIGHT}px))`
     if (dataTableOpen) {
-        mapHeight = mapHeight - dataTableHeight
+        mapHeight = `calc(100vh - ${HEADER_HEIGHT}px - ${dataTableHeight}px)`
     } else if (!downloadMode) {
-        mapHeight = mapHeight - APP_MENU_HEIGHT
+        mapHeight = `calc(100vh - ${HEADER_HEIGHT}px - ${APP_MENU_HEIGHT}px)`
     }
 
     const downloadMapInfoOpen =
@@ -45,24 +42,15 @@ const MapPosition = () => {
 
     const isSplitView = !!getSplitViewLayer(layers)
 
-    const style = window.getComputedStyle(document.documentElement)
-
-    const transitionTime =
-        parseInt(
-            style.getPropertyValue('--transition-time').replace('px', '')
-        ) + 50
-
     // Trigger map resize when panels are expanded, collapsed or dragged
     useEffect(() => {
         setResizeCount((count) => count + 1)
-    }, [dataTableOpen, dataTableHeight, downloadMapInfoOpen])
-
-    // Separate effect for actions that involve an animated transition
-    useEffect(() => {
-        setTimeout(() => {
-            setResizeCount((count) => count + 1)
-        }, transitionTime)
-    }, [layersPanelOpen, rightPanelOpen, transitionTime])
+    }, [
+        dataTableOpen,
+        dataTableHeight,
+        downloadMapInfoOpen,
+        layersPanelOpen.rightPanelOpen,
+    ])
 
     // Reset bearing and pitch when new map (mapId changed)
     useEffect(() => {