Env banner fix (beyondessential#3215)

* fix scroll issue on tupaia * Update index.js
beyondessential · Sep 13, 2021 · bb126cc · bb126cc
1 parent 7438289
commit bb126cc
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 50 deletions.
diff --git a/packages/web-frontend/src/App.js b/packages/web-frontend/src/App.js
@@ -1,11 +1,10 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 
 import React, { lazy, Suspense } from 'react';
 import { Provider } from 'react-redux';
-import { EnvBanner } from '@tupaia/ui-components';
 
 import configureStore from './configureStore';
 import { AppStyleProviders } from './AppStyleProviders';
@@ -41,7 +40,6 @@ const App = () => {
     <Provider store={store}>
       <AppStyleProviders>
         <Suspense fallback={null}>
-          <EnvBanner />
           <RootScreen />
         </Suspense>
       </AppStyleProviders>

diff --git a/packages/web-frontend/src/components/View/View.js b/packages/web-frontend/src/components/View/View.js
@@ -9,7 +9,6 @@ import CircularProgress from 'material-ui/CircularProgress';
 import moment from 'moment';
 import { CHART_TYPES } from '@tupaia/ui-components/lib/chart';
 import { VIEW_STYLES } from '../../styles';
-import { OverlayView } from '../../utils';
 import { NoDataMessage } from './NoDataMessage';
 import { VIEW_CONTENT_SHAPE } from './propTypes';
 import { DashboardItemExpanderButton } from '../DashboardItemExpanderButton';
@@ -85,6 +84,16 @@ const StyledAlert = styled(Alert)`
   }
 `;
 
+const OverlayView = styled.div`
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+  display: flex; /* Took me ages to find this, is the magic touch */
+  align-items: stretch;
+  align-content: stretch;
+`;
+
 export class View extends Component {
   state = {
     isHovered: false,

diff --git a/packages/web-frontend/src/screens/desktop/RootScreen/index.js b/packages/web-frontend/src/screens/desktop/RootScreen/index.js
@@ -1,8 +1,6 @@
-/**
- * Tupaia Web
- * Copyright (c) 2019 Beyond Essential Systems Pty Ltd.
- * This source code is licensed under the AGPL-3.0 license
- * found in the LICENSE file in the root directory of this source tree.
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 
 /**
@@ -14,6 +12,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import styled from 'styled-components';
+import { EnvBanner } from '@tupaia/ui-components';
 
 import { selectIsEnlargedDialogVisible } from '../../../selectors';
 import { LoadingScreen } from '../../LoadingScreen';
@@ -24,15 +24,29 @@ import SidePanel from '../../../containers/SidePanel';
 import { EnlargedDialog } from '../../../containers/EnlargedDialog';
 import SessionExpiredDialog from '../../../containers/SessionExpiredDialog';
 import OverlayDiv from '../../../containers/OverlayDiv';
-import { OverlayContainer } from '../../../utils';
-import { TOP_BAR_HEIGHT } from '../../../styles';
+import { DIALOG_Z_INDEX, TOP_BAR_HEIGHT } from '../../../styles';
 import './desktop-styles.css';
 
+const OverlayContainer = styled.div`
+  position: fixed;
+  z-index: ${DIALOG_Z_INDEX};
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: none;
+  display: flex; /* Took me ages to find this, is the magic touch */
+  align-items: stretch;
+  align-content: stretch;
+`;
+
 export const RootScreen = ({ enlargedDialogIsVisible, isLoading }) => {
   return (
     <div>
       {/* The order here matters, Map must be added to the DOM body after FlexContainer */}
       <OverlayContainer>
+        <EnvBanner />
         <TopBar />
         <div style={styles.contentWrapper}>
           <MapDiv />

diff --git a/packages/web-frontend/src/screens/mobile/RootScreen/index.js b/packages/web-frontend/src/screens/mobile/RootScreen/index.js
@@ -1,14 +1,13 @@
-/**
- * Tupaia Web
- * Copyright (c) 2019 Beyond Essential Systems Pty Ltd.
- * This source code is licensed under the AGPL-3.0 license
- * found in the LICENSE file in the root directory of this source tree.
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 
 import { PropTypes } from 'prop-types';
 import React, { Component } from 'react';
 import { StyleRoot } from 'radium';
 import { connect } from 'react-redux';
+import { EnvBanner } from '@tupaia/ui-components';
 
 import HeaderBar from '../../../containers/mobile/HeaderBar';
 import { ExportDialog } from '../../../components/ExportDialog';
@@ -44,6 +43,7 @@ class RootScreen extends Component {
 
     return (
       <StyleRoot>
+        <EnvBanner />
         <LoadingScreen isLoading={isLoading} />
         <div>
           <HeaderBar />

diff --git a/packages/web-frontend/src/utils/index.js b/packages/web-frontend/src/utils/index.js
@@ -15,7 +15,6 @@ export { isMobile, delayMobileTapCallback } from './mobile';
 export { getCenterAndZoomForBounds } from './getCenterAndZoomForBounds';
 export { getFacilityThumbnailUrl } from './getFacilityThumbnailUrl';
 export { getMapUrl } from './getMapUrl';
-export { OverlayContainer, OverlayView } from './overlayContainer';
 export {
   processMeasureInfo,
   getMeasureDisplayInfo,

diff --git a/packages/web-frontend/src/utils/overlayContainer.js b/packages/web-frontend/src/utils/overlayContainer.js