Make map and results summary sticky (#2291)

--------- Co-authored-by: Cristen Jones <[email protected]>
mbta · Dec 27, 2024 · be631dd · be631dd
1 parent 5c36a3f
commit be631dd
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 71 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -17,7 +17,6 @@ import geoLocation from "./geolocation";
 import addressSearch from "./address-search";
 import googleTranslate from "./google-translate";
 import translateAnalytics from "./translate-analytics.js";
-import scrollTo from "./scroll-to";
 import stickyTooltip from "./sticky-tooltip";
 import timetableScroll from "./timetable-scroll";
 import timetableStyle from "./timetable-style";
@@ -132,7 +131,6 @@ geoLocation();
 addressSearch();
 googleTranslate();
 translateAnalytics();
-scrollTo();
 tabbedNav();
 timetableScroll();
 timetableStyle();

diff --git a/assets/js/scroll-to.js b/assets/js/scroll-to.js
diff --git a/assets/ts/phoenix-hooks/scroll-into-view.ts b/assets/ts/phoenix-hooks/scroll-into-view.ts
@@ -5,6 +5,11 @@ const ScrollIntoView: Partial<ViewHook> = {
     if (this.el) {
       this.el.scrollIntoView({ behavior: "smooth" });
     }
+  },
+  updated() {
+    if (this.el) {
+      this.el.scrollIntoView({ behavior: "smooth" });
+    }
   }
 };
 

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.ex b/lib/dotcom_web/components/trip_planner/results.ex
@@ -10,10 +10,14 @@ defmodule DotcomWeb.Components.TripPlanner.Results do
 
   def results(assigns) do
     ~H"""
-    <section class={[
-      "w-full",
-      @class
-    ]}>
+    <section
+      id="trip-planner-results"
+      phx-hook="ScrollIntoView"
+      class={[
+        "w-full",
+        @class
+      ]}
+    >
       <div
         :if={Enum.count(@results.itinerary_groups) > 0 && @results.itinerary_group_selection}
         class="h-min w-full mb-3.5"

diff --git a/lib/dotcom_web/components/trip_planner/results_summary.ex b/lib/dotcom_web/components/trip_planner/results_summary.ex
@@ -3,14 +3,20 @@ defmodule DotcomWeb.Components.TripPlanner.ResultsSummary do
 
   use DotcomWeb, :component
 
+  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
@@ -63,31 +63,33 @@ defmodule DotcomWeb.Live.TripPlanner do
   def render(assigns) 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]"
-          results={@results}
-        />
+    <div>
+      <.input_form class="mb-4" changeset={@input_form.changeset} />
+      <div>
+        <.results_summary class="mt-2 mb-6" 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-4",
+              "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] md:sticky md:top-4"
+            results={@results}
+          />
+        </div>
       </div>
     </div>
     """