fix: fixed modals overflowing their outer container and gave them the…

…ir own inner scrolling if needed (#238) * trying out div100vh for full height mobile * fix: temporary fix for the overflow problem of modals * Restyled by prettier (#239) Co-authored-by: Restyled.io <[email protected]> * removed no longer needed package * welcome modals overflow fixed navbar drawer overflow fixed on most browsers still fucked in portrait mode on actual mobile devices * fixed scroll for drawer on mobile by adding back touch actions if that was importan feel free to search for another solution * Restyled by prettier (#245) Co-authored-by: Restyled.io <[email protected]> * pages overflow issue fixed * Restyled by prettier (#252) Co-authored-by: Restyled.io <[email protected]> * added back searchbar after getting lost in merge * Restyled by prettier (#262) Co-authored-by: Restyled.io <[email protected]> Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <[email protected]>
CovOpen · Oct 28, 2020 · da1a9cc · da1a9cc
1 parent 1b41bd4
commit da1a9cc
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 27 deletions.
diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx
@@ -57,6 +57,8 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
 
   drawerPaper: {
     width: (props) => (props.fullScreen ? "100%" : "450px"),
+    maxHeight: "100%",
+    overflow: "hidden",
   },
   drawerRoot: {
     display: "flex",
@@ -66,6 +68,11 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
     left: "auto",
     right: "auto",
   },
+  drawerScrollContainer: {
+    height: "100%",
+    width: "100%",
+    overflow: "auto",
+  },
   recommendationsLink: {
     "textAlign": "center",
     "& p": {
@@ -106,6 +113,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
     drawerPaper,
     drawerRoot,
     drawerPaperAnchorBottom,
+    drawerScrollContainer,
     centerIcon,
     chipTop,
   } = useStyles({
@@ -261,8 +269,10 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
         onClose={() => pushQueryChange({ expanded: undefined })}
         classes={{ paper: drawerPaper, root: drawerRoot, paperAnchorBottom: drawerPaperAnchorBottom }}
       >
-        {cardHeader}
-        {cardContent}
+        <div className={drawerScrollContainer}>
+          {cardHeader}
+          {cardContent}
+        </div>
       </Drawer>
     </>
   );

diff --git a/src/App.tsx b/src/App.tsx
@@ -49,8 +49,21 @@ export const App = () => {
         path={page.route}
         key={page.id}
         component={() => (
-          <div style={{ zIndex: 1095, backgroundColor: "white", width: "100%", minHeight: "100%", flexShrink: 0 }}>
-            <page.Component />
+          <div
+            style={{
+              zIndex: 1095,
+              backgroundColor: "white",
+              width: "100%",
+              height: "100%",
+              boxSizing: "border-box",
+              flexShrink: 0,
+              overflow: "hidden",
+              paddingTop: "64px",
+            }}
+          >
+            <div style={{ width: "100%", height: "100%", overflow: "auto" }}>
+              <page.Component />
+            </div>
           </div>
         )}
         style={{ flex: "1 1 auto", position: "absolute" }}

diff --git a/src/app.css b/src/app.css
@@ -125,6 +125,11 @@ table {
   border-spacing: 0;
 }
 
+html,
+body {
+  overflow: hidden;
+}
+
 /* Variables */
 body {
   font-family: "Dosis, sans-serif";

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -6,7 +6,7 @@ import MenuIcon from "@material-ui/icons/Menu";
 import ShareIcon from "@material-ui/icons/Share";
 import MenuItem from "@material-ui/core/MenuItem";
 import Divider from "@material-ui/core/Divider";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import { AppApi } from "src/state/app";
 import { useThunkDispatch } from "src/useThunkDispatch";
@@ -21,27 +21,23 @@ import { Drawer, useMediaQuery } from "@material-ui/core";
 import { CloseRounded } from "@material-ui/icons";
 import { VERSION, HASH_LONG, HASH_SHORT } from "src/version";
 import FixedSearch from "./FixedSearch";
-import { useParams } from "react-router-dom";
 import { welcomeStepsConfig } from "./WelcomeStepsModal/welcomeStepsConfig";
 
 const Logo = config.ui?.Logo;
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
-    position: "sticky",
+    position: "fixed",
     [theme.breakpoints.down("xs")]: {
       // on mobile devices
       backgroundColor: "transparent",
-      pointerEvents: "none",
       boxShadow: "none",
-      position: "fixed",
     },
   },
   title: {
     flexShrink: 1,
   },
   menuItem: {
-    touchAction: "none",
     paddingLeft: theme.spacing(4),
     paddingRight: theme.spacing(1),
   },
@@ -51,12 +47,16 @@ const useStyles = makeStyles((theme) => ({
 
     margin: theme.spacing(0, 1),
   },
-  menu: {
-    touchAction: "none",
-  },
+
   menuContent: {
-    marginBottom: theme.spacing(4),
     marginTop: "auto",
+    paddingBottom: theme.spacing(4),
+  },
+  drawerScrollContainer: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    overflow: "auto",
   },
   logo: {
     height: "32px",
@@ -70,14 +70,17 @@ const useStyles = makeStyles((theme) => ({
     marginTop: 0,
   },
   drawer: {
-    touchAction: "none",
     pointerEvents: "auto",
+    height: "100%",
   },
   drawerPaper: {
+    height: "100%",
     width: "20rem",
     maxWidth: "70vw",
     display: "flex",
+    overflow: "hidden",
   },
+
   fullHeightToolbar: {
     minHeight: "64px",
   },
@@ -201,17 +204,19 @@ export const NavBar = () => {
             {/* only here for the gutter feel free create your own gutter styles and remove this */}
             <MenuCloseButton handleClose={handleClose} />
           </Toolbar>
-          <NavMenuContent />
-          {(Logo && (
-            <div className={classes.drawerIcon}>
-              <Logo />
+          <div className={classes.drawerScrollContainer}>
+            <NavMenuContent />
+            {(Logo && (
+              <div className={classes.drawerIcon}>
+                <Logo />
+              </div>
+            )) || <img src={config.buildJSON.logoSrc} className={classes.logo} />}
+            <div className={classes.version}>
+              {"v" + VERSION} -{" "}
+              <a href={"https://github.com/CovOpen/CovMapper/commit/" + HASH_LONG} target="_blank" rel="noopener">
+                {HASH_SHORT}
+              </a>
             </div>
-          )) || <img src={config.buildJSON.logoSrc} className={classes.logo} />}
-          <div className={classes.version}>
-            {"v" + VERSION} -{" "}
-            <a href={"https://github.com/CovOpen/CovMapper/commit/" + HASH_LONG} target="_blank" rel="noreferrer">
-              {HASH_SHORT}
-            </a>
           </div>
         </Drawer>
       </Toolbar>

diff --git a/src/components/WelcomeStepsModal/WelcomeStepsModal.tsx b/src/components/WelcomeStepsModal/WelcomeStepsModal.tsx
@@ -61,8 +61,21 @@ export const WelcomeStepsModal: React.FC<{ subPage?: string }> = (props) => {
 
   return (
     <div>
-      <Dialog open={userPostalCode === null} fullScreen={fullScreen} onClose={onClose}>
-        <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: "100%" }}>
+      <Dialog
+        style={{ height: "100%", overflow: "hidden" }}
+        open={userPostalCode === null}
+        fullScreen={fullScreen}
+        onClose={onClose}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            height: "100%",
+            overflow: "auto",
+          }}
+        >
           <div style={{ alignItems: "center", display: "flex", flexDirection: "column" }}>
             <currentStepConfig.Component />
           </div>