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,49 @@
     }
   }
 
+  &--mobile,
+  &--mobile_landscape_tablet_portrait {
+    grid-template:
+      "heading" min-content
+      "panel" 0
+      "map" auto
+      / 1fr;
+
+    .l-diversion-page__panel {
+      grid-area: map;
+    }
+
+    .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-row: heading-right;
+      grid-column: 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 +80,6 @@
 
         grid-area: panel;
 
-        .l-diversion-page__header,
         .l-diversion-page-panel__header {
           grid-row: heading;
         }
@@ -55,6 +89,10 @@
         }
       }
     }
+
+    .l-diversion-page-panel__header .c-diversion-panel__back-button {
+      display: none;
+    }
   }
 }
 

assets/css/_drawer.scss

@@ -0,0 +1,48 @@
+/* Panel + Drawer(2rem) should have 100% viewport width - 10px to match leaflet margin */
+$map-page-search-panel-width: Min(24rem, calc((100vw - 2rem - 10px)));
+
+$z-map-page-context: (
+  "drawer-backdrop": 199,
+  "drawer": 200,
+);
+
+.c-drawer {
+  width: $map-page-search-panel-width;
+  height: 100%;
+  background-color: $color-gray-50;
+  position: relative;
+  z-index: map-get($z-map-page-context, "drawer");
+  transition: $transition-slide;
+
+  &--visible {
+    left: 0;
+  }
+
+  &--hidden {
+    width: $map-page-search-panel-width;
+    left: calc(-1 * #{$map-page-search-panel-width});
+  }
+}
+
+.c-drawer .c-drawer-tab {
+  @include button-primary-new;
+  left: 100%;
+}
+
+.c-drawer__backdrop-button {
+  display: none;
+
+  .c-drawer--visible ~ & {
+    display: block;
+    width: 100%;
+
+    // Ignore flex layout and fill screen
+    position: absolute;
+    inset: 48.8px 0 0 0;
+
+    // Inbetween panel and map
+    z-index: map-get($z-map-page-context, "drawer-backdrop");
+
+    backdrop-filter: blur(3.25px);
+  }
+}

assets/css/_drawer_tab.scss

@@ -13,7 +13,6 @@
 }
 
 .c-drawer-tab__tab-button {
-  @include button-transparent;
   @include button-icon(0.9rem);
   font-size: 2rem;
   line-height: 1.5rem;

assets/css/app.scss

@@ -46,6 +46,7 @@ $vpp-location-padding: 1rem;
 @import "directions_button";
 @import "disconnected_modal";
 @import "diversion_page";
+@import "drawer";
 @import "drawer_tab";
 @import "dropdown";
 @import "filter_accordion";

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>
+  )
+}