Full-screen panels on small screens (#2289)

* refactor: put old breakpoints in map rather than separate constants * feat: initial change for properties panel * feat: hide nav when view is open below 800px breakpoint * feat: swings view full width below 800px * feat: notifications drawer full width below 800px * feat: show back buttons below 800px * refactor: put isViewOpen logic into usePanelStateForViewState hook * fixup! refactor: put isViewOpen logic into usePanelStateForViewState hook * feat: also make late view fullscreen at 800px breakpoint * refactor: better use of factories in usePanelState tests Co-authored-by: Kayla Firestack <[email protected]> * fixup! refactor: better use of factories in usePanelState tests * refactor: use hidden attribute rather than style --------- Co-authored-by: Kayla Firestack <[email protected]>
mbta · Nov 30, 2023 · 312ac9e · 312ac9e
1 parent f46664a
commit 312ac9e
Show file tree

Hide file tree

Showing 20 changed files with 177 additions and 124 deletions.
diff --git a/assets/css/_ladder_page.scss b/assets/css/_ladder_page.scss
@@ -17,13 +17,13 @@ $color-route-tabs-separator: #9fa2ac;
   padding-left: $route-picker-width;
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-ladder-page--picker-container-visible {
     padding-left: $mobile-route-picker-width;
   }
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-ladder-page--picker-container-visible {
     .c-ladder-page__tab-bar-and-ladders {
       @include blur;

diff --git a/assets/css/_late_view.scss b/assets/css/_late_view.scss
@@ -10,8 +10,8 @@ $late-view-background-color: $color-bg-light;
   top: 0;
   z-index: map-get($z-page-layout-context, "view");
 
-  @media screen and (max-width: 700px) {
-    width: 100%;
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
+    width: 100vw;
   }
 }
 

diff --git a/assets/css/_map_page.scss b/assets/css/_map_page.scss
@@ -22,7 +22,7 @@ $z-map-page-context: (
   z-index: map-get($z-map-page-context, "map");
 
   .c-map-page__input-and-results--visible ~ & {
-    @media screen and (max-width: $mobile-portrait-max-width) {
+    @media screen and (max-width: map-get($old-breakpoints, "mobile-portrait-max-width")) {
       filter: blur(3.25px);
     }
   }
@@ -102,7 +102,7 @@ $z-map-page-context: (
   display: none;
 
   .c-map-page__input-and-results--visible ~ & {
-    @media screen and (max-width: $mobile-portrait-max-width) {
+    @media screen and (max-width: map-get($old-breakpoints, "mobile-portrait-max-width")) {
       // Make button clickable
       display: block;
       // Force Flex + Posistion to fill area

diff --git a/assets/css/_notification_drawer.scss b/assets/css/_notification_drawer.scss
@@ -10,10 +10,10 @@
   width: 23.5rem;
   z-index: map-get($z-page-layout-context, "view");
 
-  @media screen and (max-width: $mobile-max-width) {
-    width: 100%;
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
+    width: 100vw;
   }
-  @media screen and (max-width: $mobile-portrait-max-width) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-width")) {
     position: fixed;
     bottom: 0;
   }

diff --git a/assets/css/_picker_container.scss b/assets/css/_picker_container.scss
@@ -35,7 +35,7 @@
   display: none;
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-picker-container {
     --picker-container-width: min(
       #{$mobile-route-picker-width},

diff --git a/assets/css/_properties_panel.scss b/assets/css/_properties_panel.scss
@@ -11,14 +11,10 @@
   width: 23.5rem;
   z-index: map-get($z-page-layout-context, "properties-panel");
 
-  @media screen and (max-width: $mobile-max-width) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
     width: 100vw;
-
-    .l-nav__app-content & {
-      width: 100%;
-    }
   }
-  @media screen and (max-width: $mobile-portrait-max-width) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-width")) {
     position: fixed;
     bottom: 0;
   }

diff --git a/assets/css/_search_page.scss b/assets/css/_search_page.scss
@@ -61,7 +61,7 @@ $z-search-page-context: (
   padding: 0.625rem 1rem 0 1rem;
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-search-page {
     flex-direction: column;
   }

diff --git a/assets/css/_skate_ui.scss b/assets/css/_skate_ui.scss
@@ -1,3 +1,9 @@
+$breakpoints: (
+  "max-mobile-width": 480px,
+  "max-mobile-landscape-tablet-portrait-width": 800px,
+  "max-tablet-width": 1340px,
+);
+
 // #region Text Styles [v2]
 
 // https://www.notion.so/mbta-downtown-crossing/2022-12-19-Type-Styles-6f6c90eb449248b7a954e234b718137f

diff --git a/assets/css/_swings_view.scss b/assets/css/_swings_view.scss
@@ -18,19 +18,18 @@
   }
 
   // Full width on mobile portrait, to be updated with more responsive designs
-  @media screen and (max-width: 480px) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
     .l-nav__app-content & {
-      width: 100%;
+      width: 100vw;
 
       .c-swings-view__table {
         width: 100%;
       }
     }
   }
-  @media screen and (max-width: $mobile-portrait-max-width) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-width")) {
     position: fixed;
     bottom: 0;
-    width: 100vw;
   }
 }
 
@@ -215,7 +214,7 @@
   }
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-swings-view__header {
     padding-left: 1.75rem;
   }

diff --git a/assets/css/_ui_kit.scss b/assets/css/_ui_kit.scss
@@ -441,7 +441,7 @@ $font-family-route-pill: "Helvetica Neue", Helvetica, Arial, sans-serif;
   filter: blur(5px);
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .blurred-mobile {
     @include blur;
   }

diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -1,6 +1,7 @@
-$non-mobile-min-width: 768px;
-$mobile-max-width: $non-mobile-min-width - 1;
-$mobile-portrait-max-width: 480px;
+$old-breakpoints: (
+  "mobile-max-width": 767px,
+  "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.tsx b/assets/src/components/nav.tsx
@@ -6,6 +6,7 @@ import LeftNav from "./nav/leftNav"
 import TopNav from "./nav/topNav"
 import MobilePortraitNav from "./nav/mobilePortraitNav"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
+import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState"
 
 interface Props {
   children?: React.ReactNode
@@ -15,19 +16,24 @@ const Nav: React.FC<Props> = ({ children }) => {
   const [, dispatch] = useContext(StateDispatchContext)
   const deviceType = useScreenSize()
 
+  const { isViewOpen } = usePanelStateFromStateDispatchContext()
+
   switch (deviceType) {
     case "mobile":
       return (
         <div className="l-nav--narrow">
           <div className="l-nav__app-content">{children}</div>
-          <MobilePortraitNav />
+          <MobilePortraitNav isViewOpen={isViewOpen} />
         </div>
       )
     case "mobile_landscape_tablet_portrait":
       return (
         <div className="l-nav--medium">
           <div className="l-nav__app-content">{children}</div>
-          <div className="l-nav__nav-bar l-nav__nav-bar--left">
+          <div
+            className="l-nav__nav-bar l-nav__nav-bar--left"
+            hidden={isViewOpen}
+          >
             <LeftNav
               toggleMobileMenu={() => dispatch(toggleMobileMenu())}
               defaultToCollapsed={true}

diff --git a/assets/src/components/nav/mobilePortraitNav.tsx b/assets/src/components/nav/mobilePortraitNav.tsx
@@ -3,20 +3,18 @@ import { StateDispatchContext } from "../../contexts/stateDispatchContext"
 import { toggleMobileMenu } from "../../state"
 import BottomNavMobile from "./bottomNavMobile"
 import TopNavMobile from "./topNavMobile"
-import { OpenView } from "../../state/pagePanelState"
 import { usePanelStateFromStateDispatchContext } from "../../hooks/usePanelState"
 
-const MobilePortraitNav = (): JSX.Element => {
+const MobilePortraitNav = ({
+  isViewOpen,
+}: {
+  isViewOpen: boolean
+}): JSX.Element => {
   const [state, dispatch] = useContext(StateDispatchContext)
 
   const { mobileMenuIsOpen, routeTabs } = state
-  const {
-    currentView: { openView, selectedVehicleOrGhost },
-    openNotificationDrawer,
-    openSwingsView,
-  } = usePanelStateFromStateDispatchContext()
-
-  const isViewOpen = openView !== OpenView.None || selectedVehicleOrGhost
+  const { openNotificationDrawer, openSwingsView } =
+    usePanelStateFromStateDispatchContext()
 
   const navVisibilityStyle = isViewOpen ? "hidden" : "visible"
 

diff --git a/assets/src/components/viewHeader.tsx b/assets/src/components/viewHeader.tsx
@@ -31,11 +31,14 @@ const ViewHeader: ViewHeaderType = ({
 }): JSX.Element => {
   const deviceType = useScreenSize()
 
+  const screenSizeAllowsBackButton =
+    deviceType === "mobile" || deviceType === "mobile_landscape_tablet_portrait"
+
   return (
     <div className="c-view-header">
       {backlinkToView &&
       backlinkToView !== OpenView.None &&
-      deviceType === "mobile" ? (
+      screenSizeAllowsBackButton ? (
         <button
           className="c-view-header__backlink"
           onClick={followBacklink}

diff --git a/assets/src/hooks/usePanelState.ts b/assets/src/hooks/usePanelState.ts
@@ -3,6 +3,7 @@ import { TabMode } from "../components/propertiesPanel/tabPanels"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { Dispatch } from "../state"
 import {
+  OpenView,
   PagePath,
   VehicleType,
   ViewState,
@@ -37,8 +38,9 @@ export const usePanelStateForViewState = (
   view: ViewState,
   dispatch: Dispatch
 ) => {
+  const currentView = view.state[view.currentPath]
   return {
-    currentView: view.state[view.currentPath],
+    currentView,
     setPath: (path: PagePath) => {
       if (path !== view.currentPath) {
         dispatch(setPath(path))
@@ -52,5 +54,9 @@ export const usePanelStateForViewState = (
     openNotificationDrawer: () => dispatch(openNotificaitonDrawer()),
     closeView: () => dispatch(closeView()),
     openPreviousView: () => dispatch(openPreviousView()),
+    isViewOpen:
+      currentView.openView !== OpenView.None ||
+      (currentView.selectedVehicleOrGhost && true) ||
+      false,
   }
 }
diff --git a/assets/tests/components/nav.test.tsx b/assets/tests/components/nav.test.tsx
@@ -8,6 +8,7 @@ import Nav from "../../src/components/nav"
 import useScreenSize from "../../src/hooks/useScreenSize"
 import getTestGroups from "../../src/userTestGroups"
 import { TestGroups } from "../../src/userInTestGroup"
+import { mockUsePanelState } from "../testHelpers/usePanelStateMocks"
 
 jest.mock("../../src/hooks/useScreenSize", () => ({
   __esModule: true,
@@ -19,13 +20,16 @@ jest.mock("userTestGroups", () => ({
   default: jest.fn(() => []),
 }))
 
+jest.mock("../../src/hooks/usePanelState")
+
 beforeEach(() => {
+  mockUsePanelState({ isViewOpen: false })
   ;(getTestGroups as jest.Mock).mockReturnValue([])
 })
 
 describe("Nav", () => {
   test("renders mobile nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockReturnValueOnce("mobile")
 
     const result = render(
       <BrowserRouter>
@@ -38,9 +42,9 @@ describe("Nav", () => {
   })
 
   test("renders mobile landscape / tablet portrait nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(
-      () => "mobile_landscape_tablet_portrait"
-    )
+    jest
+      .mocked(useScreenSize)
+      .mockReturnValueOnce("mobile_landscape_tablet_portrait")
 
     const result = render(
       <BrowserRouter>
@@ -52,8 +56,23 @@ describe("Nav", () => {
     expect(result.queryByText("Route Ladders")).toBeNull()
   })
 
+  test("renders mobile landscape / tablet portrait nav content with nav elements hidden when a view is open", () => {
+    mockUsePanelState({ isViewOpen: true })
+    jest
+      .mocked(useScreenSize)
+      .mockReturnValueOnce("mobile_landscape_tablet_portrait")
+
+    const result = render(
+      <BrowserRouter>
+        <Nav>Hello, world!</Nav>
+      </BrowserRouter>
+    )
+
+    expect(result.getByTitle("Route Ladders")).not.toBeVisible()
+  })
+
   test("renders tablet nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "tablet")
+    jest.mocked(useScreenSize).mockReturnValueOnce("tablet")
 
     const result = render(
       <BrowserRouter>
@@ -66,7 +85,7 @@ describe("Nav", () => {
   })
 
   test("renders nav item with title 'Search Map' if in map test group", () => {
-    ;(getTestGroups as jest.Mock).mockReturnValue([TestGroups.MapBeta])
+    jest.mocked(getTestGroups).mockReturnValue([TestGroups.MapBeta])
 
     render(
       <BrowserRouter>
@@ -79,6 +98,8 @@ describe("Nav", () => {
   })
 
   test("renders desktop nav content", () => {
+    jest.mocked(useScreenSize).mockReturnValueOnce("desktop")
+
     const result = render(
       <BrowserRouter>
         <Nav>Hello, world!</Nav>