feat: use ScrollIntoView hook to improve scroll experience when click…

…ing near bottom of itinerary list
mbta · Dec 26, 2024 · fb4979c · fb4979c
1 parent d4ffcfb
commit fb4979c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
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/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/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex
@@ -63,22 +63,18 @@ defmodule DotcomWeb.Live.TripPlanner do
   def render(assigns) do
     ~H"""
     <h1>Trip Planner <mark style="font-weight: 400">Preview</mark></h1>
-    <div style="row">
+    <div>
       <.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}
-        />
+        <.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-28",
+              "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"
@@ -90,7 +86,7 @@ defmodule DotcomWeb.Live.TripPlanner do
           />
           <.results
             :if={Enum.count(@results.itinerary_groups) > 0}
-            class="md:max-w-[25rem]"
+            class="md:max-w-[25rem] md:sticky md:top-4"
             results={@results}
           />
         </div>