feat: Active detour in mobile drawer

assets/css/_diversion_page.scss

@@ -9,6 +9,10 @@
     "map" 80vh
     / 1fr;
 
+  &__header {
+    grid-area: heading;
+  }
+
   &__panel {
     grid-area: panel;
   }
@@ -21,18 +25,48 @@
     }
   }
 
+  &--mobile,
+  &--mobile_landscape_tablet_portrait {
+    grid-template:
+      "heading" min-content
+      "map-and-panel" auto
+      / 1fr;
+
+    .l-diversion-page__panel,
+    .l-diversion-page__map {
+      grid-area: map-and-panel;
+    }
+
+    .l-diversion-page-panel__scroll-area {
+      padding-top: 1rem;
+    }
+
+    .l-diversion-page__header {
+      border-bottom: none;
+    }
+    .c-diversion-panel__header_text,
+    .c-detour-panel__subheader,
+    .c-diversion-panel__back-button-container,
+    .c-active-detour__alert-icon {
+      display: none !important;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     // For larger breakpoints, layout into grid
     grid-template:
-      "heading heading" min-content
+      "heading heading-right" min-content
       "panel map" auto
       / max(22.5vw, 350px) auto;
 
+    .l-diversion-page__header {
+      grid-area: heading-right;
+    }
     // Overlay the panel and make the panel header match
     // the size of the page header if subgrid is supported
     @supports (grid-template-rows: subgrid) {
       grid-template:
-        [panel-start] "heading heading" min-content
+        [panel-start] "heading heading-right" min-content
         "panel map" auto
         / max(22.5vw, 350px) auto;
 
@@ -45,7 +79,6 @@
 
         grid-area: panel;
 
-        .l-diversion-page__header,
         .l-diversion-page-panel__header {
           grid-row: heading;
         }
@@ -55,6 +88,10 @@
         }
       }
     }
+
+    .l-diversion-page-panel__header .c-diversion-panel__back-button {
+      display: none;
+    }
   }
 }
 

assets/src/components/detours/detourPanelComponents.tsx

@@ -40,8 +40,10 @@ export const AffectedRoute = ({
   routeOrigin,
   routeDirection,
 }: AffectedRouteProps) => (
-  <section className="pb-3 border-bottom">
-    <h2 className="c-diversion-panel__h2">Affected route</h2>
+  <section className="pb-3">
+    <h2 className="c-diversion-panel__h2 c-detour-panel__subheader">
+      Affected route
+    </h2>
     <div className="d-flex">
       <RoutePill className="me-2 align-top" routeName={routeName} />
 

assets/src/components/detours/detourPanels/activeDetourPanel.tsx

@@ -33,77 +33,84 @@ export const ActiveDetourPanel = ({
   onOpenDeactivateModal,
   onNavigateBack,
   children,
-}: ActiveDetourPanelProps) => (
-  <Panel as="article" className="c-diversion-panel">
-    <Panel.Header>
-      <h1 className="c-diversion-panel__h1 my-3">Active Detour</h1>
-    </Panel.Header>
+}: ActiveDetourPanelProps) => {
+  const backButton = (
+    <Button
+      className="c-diversion-panel__back-button icon-link my-3"
+      variant="outline-primary"
+      onClick={onNavigateBack}
+    >
+      <ArrowLeft />
+      Back
+    </Button>
+  )
 
-    <Panel.Body className="d-flex flex-column">
-      <Panel.Body.ScrollArea>
-        <div className="d-flex justify-content-between align-items-center">
-          {onNavigateBack && (
-            <Button
-              className="icon-link my-3"
-              variant="outline-primary"
-              onClick={onNavigateBack}
-            >
-              <ArrowLeft />
-              Back
-            </Button>
+  return (
+    <Panel as="article" className="c-diversion-panel">
+      <Panel.Header className="d-inline-flex justify-content-between">
+        <h1 className="c-diversion-panel__header_text c-diversion-panel__h1 my-3">
+          Active Detour
+        </h1>
+        {backButton}
+      </Panel.Header>
+
+      <Panel.Body className="d-flex flex-column">
+        <Panel.Body.ScrollArea>
+          <div className="d-flex c-diversion-panel__back-button-container justify-content-between align-items-center">
+            {backButton}
+            <ExclamationTriangleFill className="c-active-detour__alert-icon" />
+          </div>
+          <AffectedRoute
+            routeName={routeName}
+            routeDescription={routeDescription}
+            routeOrigin={routeOrigin}
+            routeDirection={routeDirection}
+          />
+
+          {connectionPoints && (
+            <section className="pb-3">
+              <h2 className="c-diversion-panel__h2">Connection Points</h2>
+              <ListGroup as="ul">
+                <ListGroup.Item>{connectionPoints[0]}</ListGroup.Item>
+                <ListGroup.Item>{connectionPoints[1]}</ListGroup.Item>
+              </ListGroup>
+            </section>
           )}
-          <ExclamationTriangleFill className="c-active-detour__alert-icon" />
-        </div>
-        <AffectedRoute
-          routeName={routeName}
-          routeDescription={routeDescription}
-          routeOrigin={routeOrigin}
-          routeDirection={routeDirection}
-        />
 
-        {connectionPoints && (
+          <MissedStops missedStops={missedStops} />
+
           <section className="pb-3">
-            <h2 className="c-diversion-panel__h2">Connection Points</h2>
-            <ListGroup as="ul">
-              <ListGroup.Item>{connectionPoints[0]}</ListGroup.Item>
-              <ListGroup.Item>{connectionPoints[1]}</ListGroup.Item>
-            </ListGroup>
+            <h2 className="c-diversion-panel__h2">Detour Directions</h2>
+            {directions ? (
+              <ListGroup as="ol">
+                {directions.map((d) => (
+                  <ListGroup.Item key={d.instruction} as="li">
+                    {d.instruction == "Regular Route" ? (
+                      <strong className="fw-medium">{d.instruction}</strong>
+                    ) : (
+                      d.instruction
+                    )}
+                  </ListGroup.Item>
+                ))}
+              </ListGroup>
+            ) : null}
           </section>
-        )}
-
-        <MissedStops missedStops={missedStops} />
+        </Panel.Body.ScrollArea>
 
-        <section className="pb-3">
-          <h2 className="c-diversion-panel__h2">Detour Directions</h2>
-          {directions ? (
-            <ListGroup as="ol">
-              {directions.map((d) => (
-                <ListGroup.Item key={d.instruction} as="li">
-                  {d.instruction == "Regular Route" ? (
-                    <strong className="fw-medium">{d.instruction}</strong>
-                  ) : (
-                    d.instruction
-                  )}
-                </ListGroup.Item>
-              ))}
-            </ListGroup>
-          ) : null}
-        </section>
-      </Panel.Body.ScrollArea>
-
-      <Panel.Body.Footer>
-        {onOpenDeactivateModal && (
-          <Button
-            variant="ui-alert"
-            className="flex-grow-1 m-3 icon-link text-light justify-content-center"
-            onClick={onOpenDeactivateModal}
-          >
-            <StopCircle />
-            Return to regular route
-          </Button>
-        )}
-      </Panel.Body.Footer>
-    </Panel.Body>
-    {children}
-  </Panel>
-)
+        <Panel.Body.Footer>
+          {onOpenDeactivateModal && (
+            <Button
+              variant="ui-alert"
+              className="flex-grow-1 m-3 icon-link text-light justify-content-center"
+              onClick={onOpenDeactivateModal}
+            >
+              <StopCircle />
+              Return to regular route
+            </Button>
+          )}
+        </Panel.Body.Footer>
+      </Panel.Body>
+      {children}
+    </Panel>
+  )
+}

assets/src/components/detours/diversionPage.tsx

@@ -28,6 +28,9 @@ import { timeAgoLabel } from "../../util/dateTime"
 import { DetourStatus, timestampLabelFromStatus } from "../detoursTable"
 import { ActivateDetour } from "./activateDetourModal"
 import { DeactivateDetourModal } from "./deactivateDetourModal"
+import useScreenSize from "../../hooks/useScreenSize"
+import { Drawer } from "../drawer"
+import { isMobile } from "../../util/screenSize"
 
 const displayFieldsFromRouteAndPattern = (
   route: Route,
@@ -394,9 +397,13 @@ export const DiversionPage = ({
     }
   }
 
+  const displayType = useScreenSize()
+
   return (
     <>
-      <article className="l-diversion-page h-100 border-box inherit-box">
+      <article
+        className={`l-diversion-page l-diversion-page--${displayType} h-100 border-box inherit-box`}
+      >
         <header
           className={joinClasses([
             "l-diversion-page__header",
@@ -407,7 +414,7 @@ export const DiversionPage = ({
               : "text-bg-light",
           ])}
         >
-          {"snapshot" in useDetourProps && (
+          {"snapshot" in useDetourProps && !isMobile(displayType) ? (
             <>
               <span className="l-diversion-page__header-details">
                 <strong className="font-m-semi me-2">
@@ -420,6 +427,8 @@ export const DiversionPage = ({
                 {useDetourProps.author}
               </span>
             </>
+          ) : (
+            <div className="flex-grow-1 fw-semibold text-center">Detours</div>
           )}
           <CloseButton className="p-4" onClick={onClose} />
         </header>
@@ -433,7 +442,11 @@ export const DiversionPage = ({
               : "text-bg-light",
           ])}
         >
-          {detourPanel()}
+          {isMobile(displayType) ? (
+            <Drawer.WithState startOpen>{detourPanel()}</Drawer.WithState>
+          ) : (
+            detourPanel()
+          )}
         </div>
         <div className="l-diversion-page__map position-relative">
           {snapshot.matches({ "Detour Drawing": "Share Detour" }) && (

assets/src/components/drawer.tsx

@@ -7,7 +7,7 @@ interface Props {
   onToggleOpen?: () => void
 }
 
-const Drawer = ({
+export const Drawer = ({
   open = true,
   onToggleOpen,
   children,
@@ -35,10 +35,8 @@ interface DrawerWithStateProps {
   startOpen?: boolean
 }
 
-export const DrawerWithState = (
-  props: PropsWithChildren<DrawerWithStateProps>
-) => {
-  const [drawerOpen, setDrawerOpen] = useState(props.startOpen)
+const DrawerWithState = (props: PropsWithChildren<DrawerWithStateProps>) => {
+  const [drawerOpen, setDrawerOpen] = useState(props.startOpen || false)
 
   return (
     <Drawer

assets/src/hooks/useScreenSize.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { DeviceType } from "../skate"
+import { DeviceType } from "../util/screenSize"
 
 const maxMobileWidth = 480
 const minMobileLandscapeTabletPortraitWidth = maxMobileWidth + 1

assets/src/skate.d.ts

@@ -29,9 +29,3 @@ declare global {
 }
 
 export type UserToken = string
-
-export type DeviceType =
-  | "mobile"
-  | "mobile_landscape_tablet_portrait"
-  | "tablet"
-  | "desktop"

assets/src/util/screenSize.ts

@@ -0,0 +1,8 @@
+export type DeviceType =
+  | "mobile"
+  | "mobile_landscape_tablet_portrait"
+  | "tablet"
+  | "desktop"
+
+export const isMobile = (deviceType: string) =>
+  deviceType === "mobile" || deviceType === "mobile_landscape_tablet_portrait"