fix(MobilePortraitNav): use single grid layout to prevent scroll posi…

…tion resetting when a view is opened (#1719) * fix(MobilePortraitNav): use single grid layout to prevent scroll position resetting when a view is opened * fix(MobilePortraitNav): display views over header & footer to prevent size adjustments of the route ladder * style: fix unintended whitespace changes * fix: use appropriate mobile-portrait breakpoint, remove redundant width properties * refactor: use minimal properties to define mobile portrait view styling Co-authored-by: Brady <[email protected]>
mbta · Sep 13, 2022 · f3f2e36 · f3f2e36
1 parent 467a71a
commit f3f2e36
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 38 deletions.
diff --git a/assets/css/_nav.scss b/assets/css/_nav.scss
@@ -33,11 +33,6 @@
   height: 100%;
 }
 
-.m-nav--narrow.m-nav--covered {
-  grid-template-rows: minmax(0, 1fr);
-  grid-template-areas: "content";
-}
-
 .m-nav__nav-bar {
   z-index: 1100;
 }

diff --git a/assets/css/_notification_drawer.scss b/assets/css/_notification_drawer.scss
@@ -13,6 +13,10 @@
   @media screen and (max-width: $mobile-max-width) {
     width: 100%;
   }
+  @media screen and (max-width: $mobile-portrait-max-width) {
+    position: fixed;
+    bottom: 0;
+  }
 }
 
 .m-notification-drawer__content {

diff --git a/assets/css/_properties_panel.scss b/assets/css/_properties_panel.scss
@@ -18,6 +18,10 @@
       width: 100%;
     }
   }
+  @media screen and (max-width: $mobile-portrait-max-width) {
+    position: fixed;
+    bottom: 0;
+  }
 }
 
 .m-properties-panel .m-properties-panel__header-wrapper {

diff --git a/assets/css/_swings_view.scss b/assets/css/_swings_view.scss
@@ -27,6 +27,11 @@
       }
     }
   }
+  @media screen and (max-width: $mobile-portrait-max-width) {
+    position: fixed;
+    bottom: 0;
+    width: 100vw;
+  }
 }
 
 .m-swings-view__table-container {

diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -1,5 +1,6 @@
 $non-mobile-min-width: 768px;
 $mobile-max-width: $non-mobile-min-width - 1;
+$mobile-portrait-max-width: 480px;
 $tab-bar-width: 3rem;
 $drawer-tab-width: 2rem;
 $route-picker-width: 21.875rem;

diff --git a/assets/src/components/nav/mobilePortraitNav.tsx b/assets/src/components/nav/mobilePortraitNav.tsx
@@ -19,33 +19,37 @@ const MobilePortraitNav = ({
   const { mobileMenuIsOpen, routeTabs, openView, selectedVehicleOrGhost } =
     state
 
-  if (openView !== OpenView.None || selectedVehicleOrGhost) {
-    return (
-      <div className="m-nav--narrow m-nav--covered">
-        <div className="m-nav__app-content">{children}</div>
+  const isViewOpen = openView !== OpenView.None || selectedVehicleOrGhost
+
+  const navVisibilityStyle = isViewOpen ? "hidden" : "visible"
+
+  return (
+    <div className="m-nav--narrow">
+      <div
+        className="m-nav__nav-bar m-nav__nav-bar--top"
+        style={{ visibility: navVisibilityStyle }}
+      >
+        <TopNavMobile
+          toggleMobileMenu={() => dispatch(toggleMobileMenu())}
+          openNotificationDrawer={() => dispatch(openNotificationDrawer())}
+          routeTabs={routeTabs}
+          mobileMenuIsOpen={mobileMenuIsOpen}
+        />
       </div>
-    )
-  } else {
-    return (
-      <div className="m-nav--narrow">
-        <div className="m-nav__nav-bar m-nav__nav-bar--top">
-          <TopNavMobile
-            toggleMobileMenu={() => dispatch(toggleMobileMenu())}
-            openNotificationDrawer={() => dispatch(openNotificationDrawer())}
-            routeTabs={routeTabs}
-            mobileMenuIsOpen={mobileMenuIsOpen}
-          />
-        </div>
-        <div className="m-nav__app-content">{children}</div>
-        <div className="m-nav__nav-bar m-nav__nav-bar--bottom">
-          <BottomNavMobile
-            mobileMenuIsOpen={mobileMenuIsOpen}
-            openSwingsView={() => dispatch(openSwingsView())}
-          />
-        </div>
+
+      <div className="m-nav__app-content">{children}</div>
+
+      <div
+        className="m-nav__nav-bar m-nav__nav-bar--bottom"
+        style={{ visibility: navVisibilityStyle }}
+      >
+        <BottomNavMobile
+          mobileMenuIsOpen={mobileMenuIsOpen}
+          openSwingsView={() => dispatch(openSwingsView())}
+        />
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default MobilePortraitNav
diff --git a/assets/tests/components/nav/mobilePortraitNav.test.tsx b/assets/tests/components/nav/mobilePortraitNav.test.tsx
@@ -1,5 +1,7 @@
 import React from "react"
 import { render } from "@testing-library/react"
+import "@testing-library/jest-dom"
+
 import MobilePortraitNav from "../../../src/components/nav/mobilePortraitNav"
 import { StateDispatchProvider } from "../../../src/contexts/stateDispatchContext"
 import { initialState, OpenView } from "../../../src/state"
@@ -17,8 +19,8 @@ describe("MobilePortraitNav", () => {
       </StateDispatchProvider>
     )
 
-    expect(result.queryByTitle("Swings View")).not.toBeNull()
-    expect(result.queryByTitle("Notifications")).not.toBeNull()
+    expect(result.queryByTitle("Swings View")).toBeVisible()
+    expect(result.queryByTitle("Notifications")).toBeVisible()
   })
 
   test("doesn't render top / bottom nav when a view is open", () => {
@@ -34,8 +36,8 @@ describe("MobilePortraitNav", () => {
       </StateDispatchProvider>
     )
 
-    expect(result.queryByTitle("Swings View")).toBeNull()
-    expect(result.queryByTitle("Notifications")).toBeNull()
+    expect(result.queryByTitle("Swings View")).not.toBeVisible()
+    expect(result.queryByTitle("Notifications")).not.toBeVisible()
   })
 
   test("doesn't render top / bottom nav when a vehicle is selected", () => {
@@ -54,8 +56,8 @@ describe("MobilePortraitNav", () => {
       </StateDispatchProvider>
     )
 
-    expect(result.queryByTitle("Swings View")).toBeNull()
-    expect(result.queryByTitle("Notifications")).toBeNull()
+    expect(result.queryByTitle("Swings View")).not.toBeVisible()
+    expect(result.queryByTitle("Notifications")).not.toBeVisible()
   })
 
   test("doesn't render top / bottom nav when notification drawer is open", () => {
@@ -74,7 +76,7 @@ describe("MobilePortraitNav", () => {
       </StateDispatchProvider>
     )
 
-    expect(result.queryByTitle("Swings View")).toBeNull()
-    expect(result.queryByTitle("Notifications")).toBeNull()
+    expect(result.queryByTitle("Swings View")).not.toBeVisible()
+    expect(result.queryByTitle("Notifications")).not.toBeVisible()
   })
 })