feat: Current elevator closure layout

assets/css/v2/elevator/elevator_closures.scss

@@ -1,16 +1,8 @@
-.screen-normal:has(.current-elevator-closed-view) {
-  .normal-header,
-  .footer {
-    color: white;
-    background-color: $accessibility-blue;
-  }
-}
-
 .elevator-closures {
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 1632px;
   color: $cool-black-15;
   background-color: $warm-neutral-90;
 

assets/css/v2/elevator/footer.scss

@@ -1,12 +1,17 @@
 .footer {
-  height: 100%;
+  height: 184px;
   padding: 26px 48px;
   font-size: 48px;
   font-weight: 500;
   line-height: 62px;
   color: white;
   background-color: $cool-black-30;
 
+  &--blue {
+    color: white;
+    background-color: $accessibility-blue;
+  }
+
   b {
     letter-spacing: -0.2px;
   }

assets/css/v2/elevator/header.scss

@@ -2,11 +2,16 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 100%;
+  height: 104px;
   padding: 0 48px;
   font-family: Inter, sans-serif;
   font-size: 48px;
   line-height: 62px;
   color: $warm-neutral-90;
   background-color: $cool-black-15;
+
+  &--blue {
+    color: white;
+    background-color: $accessibility-blue;
+  }
 }

assets/css/v2/elevator/normal.scss

@@ -5,18 +5,7 @@
   margin-left: auto;
 }
 
-.screen-normal__header {
-  width: 1080px;
-  height: 104px;
-}
-
-.screen-normal__body {
-  width: 1080px;
-  height: 1632px;
-}
-
-.screen-normal__footer {
-  position: relative;
-  width: 1080px;
-  height: 184px;
+.screen-normal__main-content {
+  width: 100%;
+  height: 1920px;
 }

assets/src/components/v2/elevator/elevator_closures.tsx

@@ -9,6 +9,8 @@ import OutsideClosuresView from "Components/v2/elevator/closures/outside_closure
 import CurrentElevatorClosedView, {
   type Coordinates,
 } from "Components/v2/elevator/closures/current_elevator_closed_view";
+import Footer from "Components/v2/elevator/footer";
+import NormalHeader from "Components/v2/normal_header";
 
 export type StationWithClosures = {
   id: string;
@@ -33,6 +35,7 @@ interface Props extends WrappedComponentProps {
   accessible_path_direction_arrow: Direction;
   accessible_path_image_url: string | null;
   accessible_path_image_here_coordinates: Coordinates;
+  time: string;
 }
 
 const ElevatorClosures: React.ComponentType<Props> = ({
@@ -43,6 +46,7 @@ const ElevatorClosures: React.ComponentType<Props> = ({
   accessible_path_direction_arrow: accessiblePathDirectionArrow,
   accessible_path_image_url: accessiblePathImageUrl,
   accessible_path_image_here_coordinates: accessiblePathImageHereCoordinates,
+  time,
   lastUpdate,
   onFinish,
 }: Props) => {
@@ -51,27 +55,36 @@ const ElevatorClosures: React.ComponentType<Props> = ({
   );
 
   return (
-    <div className="elevator-closures">
-      {currentElevatorClosure ? (
-        <CurrentElevatorClosedView
-          closure={currentElevatorClosure}
-          alternateDirectionText={alternateDirectionText}
-          accessiblePathDirectionArrow={accessiblePathDirectionArrow}
-          accessiblePathImageUrl={accessiblePathImageUrl}
-          accessiblePathImageHereCoordinates={
-            accessiblePathImageHereCoordinates
-          }
-          onFinish={onFinish}
-          lastUpdate={lastUpdate}
-        />
-      ) : (
-        <OutsideClosuresView
-          stations={otherStationsWithClosures}
-          lastUpdate={lastUpdate}
-          onFinish={onFinish}
-        />
-      )}
-    </div>
+    <>
+      <NormalHeader
+        text={`Elevator ${id}`}
+        time={time}
+        maxHeight={104}
+        classModifiers={currentElevatorClosure ? "blue" : ""}
+      />
+      <div className="elevator-closures">
+        {currentElevatorClosure ? (
+          <CurrentElevatorClosedView
+            closure={currentElevatorClosure}
+            alternateDirectionText={alternateDirectionText}
+            accessiblePathDirectionArrow={accessiblePathDirectionArrow}
+            accessiblePathImageUrl={accessiblePathImageUrl}
+            accessiblePathImageHereCoordinates={
+              accessiblePathImageHereCoordinates
+            }
+            onFinish={onFinish}
+            lastUpdate={lastUpdate}
+          />
+        ) : (
+          <OutsideClosuresView
+            stations={otherStationsWithClosures}
+            lastUpdate={lastUpdate}
+            onFinish={onFinish}
+          />
+        )}
+      </div>
+      <Footer variant={currentElevatorClosure ? "blue" : ""} />
+    </>
   );
 };
 

assets/src/components/v2/elevator/footer.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import { classWithModifier } from "Util/util";
 
-const Footer = () => {
+const Footer = ({ variant }: { variant?: string }) => {
   return (
-    <div className="footer">
+    <div className={classWithModifier("footer", variant)}>
       For more info and alternate paths: <b>mbta.com/alerts/access</b> or{" "}
       <b>617-222-2828</b>
     </div>

assets/src/components/v2/elevator/normal_screen.tsx

@@ -3,23 +3,15 @@ import React from "react";
 import Widget, { WidgetData } from "Components/v2/widget";
 
 interface Props {
-  header: WidgetData;
   main_content: WidgetData;
-  footer: WidgetData;
 }
 
-const NormalScreen = ({ header, main_content: mainContent, footer }: Props) => {
+const NormalScreen = ({ main_content: mainContent }: Props) => {
   return (
     <div className="screen-normal">
-      <div className="screen-normal__header">
-        <Widget data={header} />
-      </div>
       <div className="screen-normal__body">
         <Widget data={mainContent} />
       </div>
-      <div className="screen-normal__footer">
-        <Widget data={footer} />
-      </div>
     </div>
   );
 };

lib/screens/v2/candidate_generator/elevator.ex

@@ -5,21 +5,14 @@ defmodule Screens.V2.CandidateGenerator.Elevator do
   alias Screens.V2.CandidateGenerator.Elevator.Closures, as: ElevatorClosures
   alias Screens.V2.CandidateGenerator.Widgets.Evergreen
   alias Screens.V2.Template.Builder
-  alias Screens.V2.WidgetInstance.{Footer, NormalHeader}
-  alias ScreensConfig.Screen
-  alias ScreensConfig.V2.Elevator
 
   @behaviour CandidateGenerator
 
   def screen_template do
     {
       :screen,
       %{
-        normal: [
-          :header,
-          :main_content,
-          :footer
-        ]
+        normal: [:main_content]
       }
     }
     |> Builder.build_template()
@@ -28,24 +21,14 @@ defmodule Screens.V2.CandidateGenerator.Elevator do
   def candidate_instances(
         config,
         now \\ DateTime.utc_now(),
-        elevator_closure_instances_fn \\ &ElevatorClosures.elevator_status_instances/1,
+        elevator_closure_instances_fn \\ &ElevatorClosures.elevator_status_instances/2,
         evergreen_content_instances_fn \\ &Evergreen.evergreen_content_instances/2
       ) do
     Enum.concat([
-      [header_instance(config, now)],
-      [footer_instance(config)],
-      elevator_closure_instances_fn.(config),
+      elevator_closure_instances_fn.(config, now),
       evergreen_content_instances_fn.(config, now)
     ])
   end
 
   def audio_only_instances(_widgets, _config), do: []
-
-  defp header_instance(%Screen{app_params: %Elevator{elevator_id: elevator_id}} = config, now) do
-    %NormalHeader{text: "Elevator #{elevator_id}", screen: config, time: now}
-  end
-
-  defp footer_instance(config) do
-    %Footer{screen: config}
-  end
 end

lib/screens/v2/candidate_generator/elevator/closures.ex

@@ -19,7 +19,10 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
   @stop injected(Stop)
 
   @spec elevator_status_instances(Screen.t()) :: list(ElevatorClosures.t())
-  def elevator_status_instances(%Screen{app_params: %Elevator{elevator_id: elevator_id} = config}) do
+  def elevator_status_instances(
+        %Screen{app_params: %Elevator{elevator_id: elevator_id} = config},
+        now \\ DateTime.utc_now()
+      ) do
     with {:ok, %Stop{id: stop_id}} <- @facility.fetch_stop_for_facility(elevator_id),
          {:ok, parent_station_map} <- @stop.fetch_parent_station_name_map(),
          {:ok, alerts} <- @alert.fetch_elevator_alerts_with_facilities() do
@@ -34,7 +37,8 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
           in_station_closures: Enum.map(in_station_alerts, &alert_to_elevator_closure/1),
           other_stations_with_closures:
             format_outside_closures(outside_alerts, parent_station_map, routes_map),
-          app_params: config
+          app_params: config,
+          now: now
         }
       ]
     else

lib/screens/v2/widget_instance/elevator_closures.ex

@@ -5,12 +5,13 @@ defmodule Screens.V2.WidgetInstance.ElevatorClosures do
   alias Screens.Util.Assets
   alias ScreensConfig.V2.Elevator
 
-  defstruct ~w[app_params in_station_closures other_stations_with_closures]a
+  defstruct ~w[app_params in_station_closures other_stations_with_closures now]a
 
   @type t :: %__MODULE__{
           app_params: Elevator.t(),
           in_station_closures: list(__MODULE__.Closure.t()),
-          other_stations_with_closures: list(__MODULE__.Station.t())
+          other_stations_with_closures: list(__MODULE__.Station.t()),
+          now: DateTime.t()
         }
 
   defmodule Station do
@@ -56,7 +57,8 @@ defmodule Screens.V2.WidgetInstance.ElevatorClosures do
           accessible_path_image_here_coordinates: accessible_path_image_here_coordinates
         },
         in_station_closures: in_station_closures,
-        other_stations_with_closures: other_stations_with_closures
+        other_stations_with_closures: other_stations_with_closures,
+        now: now
       }),
       do: %{
         id: id,
@@ -69,13 +71,14 @@ defmodule Screens.V2.WidgetInstance.ElevatorClosures do
             do: nil,
             else: Assets.s3_asset_url(accessible_path_image_url)
           ),
-        accessible_path_image_here_coordinates: accessible_path_image_here_coordinates
+        accessible_path_image_here_coordinates: accessible_path_image_here_coordinates,
+        time: DateTime.to_iso8601(now)
       }
 
   defimpl Screens.V2.WidgetInstance do
     alias Screens.V2.WidgetInstance.ElevatorClosures
 
-    def priority(_instance), do: [1]
+    def priority(_instance), do: [0]
     def serialize(instance), do: ElevatorClosures.serialize(instance)
     def slot_names(_instance), do: [:main_content]
     def widget_type(_instance), do: :elevator_closures

test/screens/v2/candidate_generator/elevator_test.exs

@@ -3,7 +3,7 @@ defmodule Screens.V2.CandidateGenerator.ElevatorTest do
 
   alias ScreensConfig.{Screen, V2}
   alias Screens.V2.CandidateGenerator.Elevator
-  alias Screens.V2.WidgetInstance.{Footer, NormalHeader}
+  alias Screens.V2.WidgetInstance.ElevatorClosures
 
   setup do
     config = %Screen{
@@ -25,36 +25,25 @@ defmodule Screens.V2.CandidateGenerator.ElevatorTest do
     test "returns template" do
       assert {:screen,
               %{
-                normal: [:header, :main_content, :footer]
+                normal: [:main_content]
               }} == Elevator.screen_template()
     end
   end
 
   describe "candidate_instances/4" do
-    test "returns expected header and footer", %{config: config} do
+    test "returns expected content", %{config: config} do
       now = ~U[2020-04-06T10:00:00Z]
-      elevator_closure_instances_fn = fn _ -> [] end
+      elevator_instances = [struct(ElevatorClosures)]
+      elevator_closure_instances_fn = fn _, _ -> elevator_instances end
       evergreen_content_instances_fn = fn _, _ -> [] end
 
-      expected_header = %NormalHeader{
-        screen: config,
-        icon: nil,
-        text: "Elevator 1",
-        time: now
-      }
-
-      expected_footer = %Footer{screen: config}
-
-      actual_instances =
-        Elevator.candidate_instances(
-          config,
-          now,
-          elevator_closure_instances_fn,
-          evergreen_content_instances_fn
-        )
-
-      assert expected_header in actual_instances
-      assert expected_footer in actual_instances
+      assert elevator_instances ==
+               Elevator.candidate_instances(
+                 config,
+                 now,
+                 elevator_closure_instances_fn,
+                 evergreen_content_instances_fn
+               )
     end
   end
 end

test/screens/v2/widget_instance/elevator_closures_test.exs

@@ -37,14 +37,15 @@ defmodule Screens.V2.WidgetInstance.ElevatorClosuresTest do
               }
             ]
           }
-        ]
+        ],
+        now: ~U[2024-11-27T05:00:00Z]
       }
     }
   end
 
   describe "priority/1" do
-    test "returns 1", %{instance: instance} do
-      assert [1] == WidgetInstance.priority(instance)
+    test "returns 0", %{instance: instance} do
+      assert [0] == WidgetInstance.priority(instance)
     end
   end
 
@@ -59,7 +60,8 @@ defmodule Screens.V2.WidgetInstance.ElevatorClosuresTest do
                  instance.app_params.accessible_path_image_here_coordinates,
                accessible_path_image_url: instance.app_params.accessible_path_image_url,
                alternate_direction_text: instance.app_params.alternate_direction_text,
-               id: instance.app_params.elevator_id
+               id: instance.app_params.elevator_id,
+               time: "2024-11-27T05:00:00Z"
              } == WidgetInstance.serialize(instance)
     end
   end