From d4ffcfb7f54b5e26153c3721aa3a6b131759dc9d Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Mon, 23 Dec 2024 17:17:21 -0500 Subject: [PATCH 1/3] WIP - Make map and results summary sticky --- .../components/trip_planner/input_form.ex | 6 ++- .../trip_planner/results_summary.ex | 8 ++- lib/dotcom_web/live/trip_planner.ex | 50 +++++++++++-------- 3 files changed, 40 insertions(+), 24 deletions(-) diff --git a/lib/dotcom_web/components/trip_planner/input_form.ex b/lib/dotcom_web/components/trip_planner/input_form.ex index 1633ae2859..1556b72985 100644 --- 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""" -
+
<.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 index ac90939179..46fc0eec26 100644 --- a/lib/dotcom_web/components/trip_planner/results_summary.ex +++ b/lib/dotcom_web/components/trip_planner/results_summary.ex @@ -3,6 +3,12 @@ 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"""
0 || (@changeset.action && @changeset.valid?) } - class="mt-2 mb-6" + class={@class} >

{submission_summary(@changeset.changes)}

{time_summary(@changeset.changes)}

diff --git a/lib/dotcom_web/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex index c9fa1cd0ab..bf62ffbbb7 100644 --- 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"""

Trip Planner Preview

- <.input_form changeset={@input_form.changeset} /> - <.results_summary changeset={@input_form.changeset} results={@results} /> -
- <.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} /> +
+ <.results_summary + class="mt-2 mb-6 md:sticky md:top-0 bg-white z-[1000]" + changeset={@input_form.changeset} results={@results} /> +
+ <.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} + /> +
""" From fb4979c53a9fea2cd4214068d02bad4288dcd7dc Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Thu, 26 Dec 2024 17:05:14 -0500 Subject: [PATCH 2/3] feat: use ScrollIntoView hook to improve scroll experience when clicking near bottom of itinerary list --- assets/ts/phoenix-hooks/scroll-into-view.ts | 5 +++++ lib/dotcom_web/components/trip_planner/results.ex | 12 ++++++++---- lib/dotcom_web/live/trip_planner.ex | 12 ++++-------- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/assets/ts/phoenix-hooks/scroll-into-view.ts b/assets/ts/phoenix-hooks/scroll-into-view.ts index b436a30cd5..9328a7b52a 100644 --- 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 = { 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 index 0a057f156f..c8a1179f12 100644 --- 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""" -
+
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 index bf62ffbbb7..ef4ed6d6af 100644 --- a/lib/dotcom_web/live/trip_planner.ex +++ b/lib/dotcom_web/live/trip_planner.ex @@ -63,14 +63,10 @@ defmodule DotcomWeb.Live.TripPlanner do def render(assigns) do ~H"""

Trip Planner Preview

-
+
<.input_form class="mb-4" changeset={@input_form.changeset} />
- <.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} />
@@ -78,7 +74,7 @@ defmodule DotcomWeb.Live.TripPlanner do 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} />
From 16c8c5ed1c01dfbcc57da5986debc29bf895490f Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Thu, 26 Dec 2024 16:02:00 -0500 Subject: [PATCH 3/3] cleanup: remove unused JS code --- assets/js/app.js | 2 -- assets/js/scroll-to.js | 38 -------------------------------------- 2 files changed, 40 deletions(-) delete mode 100644 assets/js/scroll-to.js diff --git a/assets/js/app.js b/assets/js/app.js index cd5be24330..4d771675cd 100644 --- 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 deleted file mode 100644 index 85ce11066b..0000000000 --- a/assets/js/scroll-to.js +++ /dev/null @@ -1,38 +0,0 @@ -export default () => { - window.addEventListener("load", scrollTo, { passive: true }); -}; - -const scrollTo = () => { - window.requestAnimationFrame(() => { - const initialElToScrollTo = document.querySelector("[data-scroll-to]"); - if (initialElToScrollTo) { - doScrollTo(initialElToScrollTo); - } - }); -}; - -const doScrollTo = el => { - const childLeft = el.offsetLeft; - const parentLeft = el.parentNode.offsetLeft; - const firstSiblingWidth = firstSibling(el).clientWidth; - - // childLeft - parentLeft scrolls the first row to the start of the - // visible area. - const scrollLeft = childLeft - parentLeft - firstSiblingWidth; - let table = el.parentNode; - while (table.nodeName !== "TABLE") { - table = table.parentNode; - } - table.parentNode.scrollLeft = scrollLeft; -}; - -const firstSibling = element => { - const sibling = element.parentNode.firstChild; - if (sibling.nodeType === 1) { - return sibling; - } else if (sibling) { - return sibling.nextElementSibling; - } else { - return null; - } -};