WIP - Make map and results summary sticky

mbta · Dec 23, 2024 · 0eb9d16 · 0eb9d16
1 parent ebed273
commit 0eb9d16
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/lib/dotcom_web/components/trip_planner/input_form.ex b/lib/dotcom_web/components/trip_planner/input_form.ex
@@ -16,9 +16,13 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do
 
   Otherwise, we just render the form.
   """
+
+  attr :class, :string, default: ""
+  attr :changeset, :any, required: true
+
   def input_form(assigns) do
     ~H"""
-    <section class="px-10 py-8 lg:px-20 lg:py-12 mb-4 bg-gray-100">
+    <section class={["px-10 py-8 lg:px-20 lg:py-12 bg-gray-100", @class]}>
       <.form
         :let={f}
         class="md:grid md:grid-cols-2 gap-x-8 gap-y-2"

diff --git a/lib/dotcom_web/components/trip_planner/results_summary.ex b/lib/dotcom_web/components/trip_planner/results_summary.ex
@@ -5,14 +5,18 @@ defmodule DotcomWeb.Components.TripPlanner.ResultsSummary do
 
   alias Dotcom.TripPlan.InputForm
 
+  attr :changeset, :any, required: true
+  attr :class, :string, default: ""
+  attr :results, :any, required: true
+
   def results_summary(assigns) do
     ~H"""
     <section
       :if={
         @results.loading? || Enum.count(@results.itinerary_groups) > 0 ||
           (@changeset.action && @changeset.valid?)
       }
-      class="mt-2 mb-6"
+      class={@class}
     >
       <p class="text-lg font-semibold mb-0">{submission_summary(@changeset.changes)}</p>
       <p>{time_summary(@changeset.changes)}</p>

diff --git a/lib/dotcom_web/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex
@@ -64,30 +64,36 @@ defmodule DotcomWeb.Live.TripPlanner do
     ~H"""
     <h1>Trip Planner <mark style="font-weight: 400">Preview</mark></h1>
     <div style="row">
-      <.input_form changeset={@input_form.changeset} />
-      <.results_summary changeset={@input_form.changeset} results={@results} />
-      <div class={[
-        "flex flex-col gap-4 md:flex-row md:gap-7"
-      ]}>
-        <.live_component
-          module={MbtaMetro.Live.Map}
-          id="trip-planner-map"
-          class={[
-            "md:order-last",
-            "h-64 md:h-[32rem] w-full",
-            @results.itinerary_group_selection == nil && "hidden md:block",
-            @results.itinerary_group_selection != nil && "block"
-          ]}
-          config={@map.config}
-          lines={@map.lines}
-          pins={@map.pins}
-          points={@map.points}
-        />
-        <.results
-          :if={Enum.count(@results.itinerary_groups) > 0}
-          class="md:max-w-[25rem]"
+      <.input_form class="mb-4" changeset={@input_form.changeset} />
+      <div>
+        <.results_summary
+          class="mt-2 mb-6 md:sticky md:top-0 bg-white z-[1000]"
+          changeset={@input_form.changeset}
           results={@results}
         />
+        <div class={[
+          "flex flex-col gap-4 md:flex-row md:gap-7"
+        ]}>
+          <.live_component
+            module={MbtaMetro.Live.Map}
+            id="trip-planner-map"
+            class={[
+              "md:order-last md:sticky md:top-28",
+              "h-64 md:h-[32rem] w-full",
+              @results.itinerary_group_selection == nil && "hidden md:block",
+              @results.itinerary_group_selection != nil && "block"
+            ]}
+            config={@map.config}
+            lines={@map.lines}
+            pins={@map.pins}
+            points={@map.points}
+          />
+          <.results
+            :if={Enum.count(@results.itinerary_groups) > 0}
+            class="md:max-w-[25rem]"
+            results={@results}
+          />
+        </div>
       </div>
     </div>
     """