Merge pull request #55 from codersagainstcovidorg/fix-safari-height

Fixes 100vh not working as expected in Mobile Safari
codersagainstcovidorg · Mar 31, 2020 · 9525783 · 9525783
2 parents 3ed2df0 + dea59ec
commit 9525783
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 69 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,11 +14,11 @@ import Header from './Components/Header';
 import DataUpdateSnackbar from './Components/DataUpdateSnackbar';
 import LegalModal from './Components/LegalModal';
 import theme from './theme';
+import getViewportHeight from './utils/getViewportHeight';
 import { trackLocationPrompt, trackDrawerStatus } from './utils/tracking';
 
 // Layout Component styles
 const LayoutContainer = styled.div`
-  height: 100vh;
   width: 100vw;
   display: flex;
   flex-direction: column;
@@ -35,13 +35,14 @@ const SidebarContainer = styled.div`
 `;
 
 const MapContainer = styled.div`
-  height: 100%;
+  flex-basis: 100%;
+  flex-grow: 1;
   position: relative;
 `;
 
 const AppBarContainer = styled.div`
   z-index: 120;
-  position: sticky;
+  position: relative;
 `;
 
 export interface LabelMap {
@@ -83,6 +84,7 @@ interface AppState {
   drawerOpen: boolean;
   currentPlace: any;
   viewState: any;
+  viewportHeight: number;
 }
 
 interface GeolocationCoordinates {
@@ -97,6 +99,8 @@ interface GeolocationCoordinates {
 export const SearchContext = React.createContext<SearchFilters>(defaultFilters);
 const geocoderContainerRef = React.createRef<any>();
 
+let windowListener: any; // store event handler for resize events
+
 const dataLayer = (window as any).dataLayer || [];
 (window as any).dataLayer = (window as any).dataLayer || [];
 
@@ -105,6 +109,7 @@ export class App extends React.Component<{}, AppState> {
     super(props);
 
     this.state = {
+      viewportHeight: 0,
       filters: defaultFilters,
       currentPlace: null,
       drawerOpen: false,
@@ -124,6 +129,20 @@ export class App extends React.Component<{}, AppState> {
     } catch (e) {
       console.error('failed to locate user', e);
     }
+
+    // detect resize events and set viewport height
+    windowListener = window.addEventListener('resize', () => this.setHeight());
+    this.setHeight();
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener('resize', windowListener);
+  }
+
+  // set height using js, as 100vh doesn't work as expected in mobile safari
+  setHeight(): void {
+    const viewportHeight = getViewportHeight();
+    this.setState({ viewportHeight });
   }
 
   locateUser() {
@@ -184,7 +203,13 @@ export class App extends React.Component<{}, AppState> {
   }
 
   render() {
-    const { currentPlace, filters, drawerOpen, viewState } = this.state;
+    const {
+      currentPlace,
+      filters,
+      drawerOpen,
+      viewState,
+      viewportHeight,
+    } = this.state;
     const toggleDrawer = () => {
       this.setState({ drawerOpen: !drawerOpen });
       trackDrawerStatus(drawerOpen);
@@ -193,7 +218,7 @@ export class App extends React.Component<{}, AppState> {
     return (
       <ThemeProvider theme={theme}>
         <SearchContext.Provider value={filters}>
-          <LayoutContainer>
+          <LayoutContainer style={{ height: viewportHeight }}>
             <LegalModal />
             <DataUpdateSnackbar />
 
@@ -230,19 +255,17 @@ export class App extends React.Component<{}, AppState> {
                 }}
                 geocoderContainerRef={geocoderContainerRef}
               />
-
-              {currentPlace === null ? (
-                ''
-              ) : (
-                <LocationModal
-                  location={currentPlace}
-                  onClose={() => {
-                    this.setState({ currentPlace: null });
-                  }}
-                />
-              )}
             </MapContainer>
 
+            {currentPlace !== null && (
+              <LocationModal
+                location={currentPlace}
+                onClose={() => {
+                  this.setState({ currentPlace: null });
+                }}
+              />
+            )}
+
             <AppBarContainer>
               <AppBar
                 geocoderContainerRef={geocoderContainerRef}

diff --git a/src/Components/AppBar.tsx b/src/Components/AppBar.tsx
@@ -1,77 +1,52 @@
 import React from 'react';
-import styled from 'styled-components';
 import MuiAppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import AddIcon from '@material-ui/icons/Add';
 import Tooltip from '@material-ui/core/Tooltip';
-
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import { Fab } from '@material-ui/core';
+import Fab from '@material-ui/core/Fab';
 import AssistantIcon from '@material-ui/icons/Assistant';
+import styled from 'styled-components';
 import MoreButton from './MoreButton';
 import { ADD_LOCATION_FORM } from '../constants';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    text: {
-      padding: theme.spacing(2, 2, 0),
-    },
-    paper: {
-      paddingBottom: 50,
-    },
-    list: {
-      marginBottom: theme.spacing(2),
-    },
-    subheader: {
-      backgroundColor: theme.palette.background.paper,
-    },
-    appBar: {
-      top: 'auto',
-      bottom: 0,
-      height: '60px',
-    },
-    grow: {
-      flexGrow: 1,
-    },
-    fabButton: {
-      position: 'absolute',
-      zIndex: 1,
-      top: -30,
-      left: 0,
-      right: 0,
-      margin: '0 auto',
-    },
-    searchContainer: {
-      position: 'relative',
-    },
-  })
-);
+const SearchContainer = styled.div`
+  position: relative;
+`;
+
+const ActionButtonContainer = styled.div`
+  position: absolute;
+  z-index: 1;
+  top: -24px;
+  left: 50%;
+  transform: translate(-50%, 0);
+`;
+
+const Spacer = styled.div`
+  flex-grow: 1;
+  flex-basis: 100%;
+`;
 
 type AppBarProps = {
   geocoderContainerRef: any;
   toggleDrawer: () => void;
 };
 
 const AppBar = (props: AppBarProps) => {
-  const classes = useStyles();
-
   const { geocoderContainerRef, toggleDrawer } = props;
 
   return (
-    <MuiAppBar position="fixed" color="default" className={classes.appBar}>
+    <MuiAppBar position="relative" color="default">
       <Toolbar>
-        <div className={classes.searchContainer} ref={geocoderContainerRef} />
+        <SearchContainer ref={geocoderContainerRef} />
 
-        <Fab
-          onClick={toggleDrawer}
-          className={classes.fabButton}
-          color="primary"
-        >
-          <AssistantIcon />
-        </Fab>
+        <ActionButtonContainer>
+          <Fab onClick={toggleDrawer} color="primary">
+            <AssistantIcon />
+          </Fab>
+        </ActionButtonContainer>
 
-        <div className={classes.grow} />
+        <Spacer />
 
         <Tooltip title="Add a new location" placement="top" arrow>
           <IconButton

diff --git a/src/Components/LocationDetails.tsx b/src/Components/LocationDetails.tsx
@@ -30,7 +30,6 @@ import Link from '@material-ui/core/Link';
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import LocationModal from './LocationModal';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/Components/Map.tsx b/src/Components/Map.tsx
@@ -53,7 +53,7 @@ const Map = (props: MapProps) => {
   return (
     <ReactMapGL
       width="100%"
-      height="calc(100% - 54px)"
+      height="100%"
       viewState={viewState}
       getCursor={() => 'cursor'}
       onViewStateChange={setViewState}

diff --git a/src/utils/getViewportHeight.tsx b/src/utils/getViewportHeight.tsx
@@ -0,0 +1,8 @@
+// calculate browser height
+const getViewportHeight = (): number =>
+  (document &&
+    document.documentElement &&
+    document.documentElement.clientHeight) ||
+  window.innerHeight;
+
+export default getViewportHeight;