From 5a7aee6cf6a37abc856080548f6f9176f4e7e630 Mon Sep 17 00:00:00 2001 From: kotva006 Date: Wed, 10 Apr 2024 16:12:11 -0500 Subject: [PATCH 01/15] feat(TripPlanner): Walking directions UX update --- assets/css/_stop-bubbles.scss | 3 ++- lib/dotcom/trip_plan/itinerary_row.ex | 12 ++++++--- .../schedule/_stop_list_expand_link.html.eex | 2 +- .../templates/trip_plan/_itinerary.html.eex | 3 +++ .../trip_plan/_itinerary_row.html.eex | 2 ++ .../_itinerary_row_personal.html.eex | 20 ++++++++++++-- .../trip_plan/_walk_list_expand_link.html.eex | 26 +++++++++++++++++++ lib/dotcom_web/views/trip_plan_view.ex | 21 +++++++++++++++ lib/mix/tasks/header_footer.ex | 2 -- lib/trip_plan/api/open_trip_planner.ex | 4 ++- lib/trip_plan/leg.ex | 8 ++++-- 11 files changed, 91 insertions(+), 12 deletions(-) create mode 100644 lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex diff --git a/assets/css/_stop-bubbles.scss b/assets/css/_stop-bubbles.scss index c39fdfd270..a8a70ef4a6 100644 --- a/assets/css/_stop-bubbles.scss +++ b/assets/css/_stop-bubbles.scss @@ -247,7 +247,8 @@ $location-line-width: $space-6; } } -.expand-branch-stop-count { +.expand-branch-stop-count, +.expand-show-details { color: $brand-primary; &:hover { diff --git a/lib/dotcom/trip_plan/itinerary_row.ex b/lib/dotcom/trip_plan/itinerary_row.ex index 011739be0a..a7348bf9ba 100644 --- a/lib/dotcom/trip_plan/itinerary_row.ex +++ b/lib/dotcom/trip_plan/itinerary_row.ex @@ -37,7 +37,9 @@ defmodule Dotcom.TripPlan.ItineraryRow do transit?: false, steps: [], additional_routes: [], - alerts: [] + alerts: [], + distance: 0.0, + duration: 0 @type t :: %__MODULE__{ stop: name_and_id, @@ -47,7 +49,9 @@ defmodule Dotcom.TripPlan.ItineraryRow do departure: DateTime.t(), steps: [step], additional_routes: [Route.t()], - alerts: [Alerts.Alert.t()] + alerts: [Alerts.Alert.t()], + distance: Float.t(), + duration: Integer.t() } def route_id(%__MODULE__{route: %Route{id: id}}), do: id @@ -75,7 +79,9 @@ defmodule Dotcom.TripPlan.ItineraryRow do trip: trip, departure: leg.start, steps: get_steps(leg.mode, deps.stop_mapper, next_leg), - additional_routes: get_additional_routes(route, trip, leg, stop, deps) + additional_routes: get_additional_routes(route, trip, leg, stop, deps), + duration: leg.duration, + distance: leg.distance } end diff --git a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex index 1905685bc8..b95e9bbeed 100644 --- a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex @@ -10,7 +10,7 @@
<%= link to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @branch_name)), class: "toggle-stop-list btn btn-link", - data: [toggle: "collapse", target: "##{@target_id}", target_branch: @branch_name] do %> + data: [toggle: "collapse", target: "##{@target_id}"] do %> diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary.html.eex index 8160a8e08a..c755ff3d25 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary.html.eex @@ -4,9 +4,12 @@ Note: This trip may be affected by disruptions in service. Check steps with <%= fa "exclamation-triangle" %> for details.
<% end %> + <%= for {row, idx} <- Enum.with_index(@itinerary_row_list) do + next_row = Enum.at(@itinerary_row_list, idx + 1, nil) render "_itinerary_row.html", itinerary_row: row, + next_itinerary_row: next_row, conn: @conn, row_idx: idx, stop_id: "stop", diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary_row.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary_row.html.eex index d553bc932f..47089a3c01 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary_row.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary_row.html.eex @@ -1,4 +1,5 @@ <% {stop_name, stop_id} = @itinerary_row.stop + {next_stop_name, _next_stop_id} = if @next_itinerary_row == nil, do: {"Destination", nil}, else: @next_itinerary_row.stop mode_class = mode_class(@itinerary_row) %> @@ -10,6 +11,7 @@ |> Map.take([:conn, :itinerary_row, :row_idx, :itinerary_idx]) |> Map.merge(%{stop_name: stop_name, stop_id: stop_id, + next_stop_name: next_stop_name, departure_display: stop_departure_display(@itinerary_row), mode_class: mode_class, expanded: @expanded}) diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary_row_personal.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary_row_personal.html.eex index f3d26e1950..8510c2c2e2 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary_row_personal.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary_row_personal.html.eex @@ -1,11 +1,27 @@ <% + collapse_target_id = "itinerary-#{@itinerary_idx}-#{@row_idx}" [{:transfer, transfer_bubbles} | steps] = bubble_params(@itinerary_row, @row_idx) %> -<%= +
+ <%= render "_itinerary_transfer_stop.html", Map.merge(assigns, %{mode: "personal", alerts: @itinerary_row.alerts, bubble_params: transfer_bubbles}) %> + <%= render "_walk_list_expand_link.html", Map.merge( + assigns, + %{ + branch_name: "hello", + target_id: collapse_target_id, + expanded: @expanded, + bubble_params: transfer_bubbles + } + ) %> -<%= render_steps(@conn, steps, "personal", @itinerary_idx, @row_idx) %> + <%= + content_tag :div, DotcomWeb.ScheduleView.StopList.step_bubble_attributes(steps, collapse_target_id, @next_stop_name == @expanded) do + render_steps(@conn, steps, @mode_class, @itinerary_idx, @row_idx) + end + %> +
diff --git a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex new file mode 100644 index 0000000000..468e4e98db --- /dev/null +++ b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex @@ -0,0 +1,26 @@ +
"> + <%= + assigns + |> walk_row_params() + |> DotcomWeb.PartialView.StopBubbles.render_stop_bubbles(false, nil) + %> +
+
+ <% duration_minutes = :erlang.float_to_binary(Timex.Duration.to_minutes(@itinerary_row.duration, :seconds), [decimals: 1]) %> + <%= svg "walk.svg" %>Walk to <%= @next_stop_name %>(<%= display_meters_as_miles(@itinerary_row.distance) %> mi, <%= duration_minutes %> min) +
+ <%= link to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @next_stop_name)), + class: "toggle-stop-list btn btn-link", + data: [toggle: "collapse", target: "##{@target_id}"] do %> + + + <%= if @expanded do + "Hide Details" + else + "Show Details" + end %> + + + <% end %> +
+
diff --git a/lib/dotcom_web/views/trip_plan_view.ex b/lib/dotcom_web/views/trip_plan_view.ex index bb19578e91..f04e3c9dfd 100644 --- a/lib/dotcom_web/views/trip_plan_view.ex +++ b/lib/dotcom_web/views/trip_plan_view.ex @@ -10,6 +10,7 @@ defmodule DotcomWeb.TripPlanView do alias DotcomWeb.PartialView.SvgIconWithCircle alias DotcomWeb.Plugs.Cookies alias TripPlan.{Itinerary, Leg, Transfer} + alias Dotcom.StopBubble import Schedules.Repo, only: [end_of_rating: 0] @@ -277,6 +278,26 @@ defmodule DotcomWeb.TripPlanView do ] end + @spec walk_row_params(map()) :: [StopBubble.Params.t()] + def walk_row_params(assigns) do + [ + %StopBubble.Params{ + render_type: :empty, + class: "", + direction_id: assigns[:direction_id], + merge_indent: nil, + route_id: nil, + route_type: nil, + show_line?: true, + vehicle_tooltip: nil, + content: "", + bubble_branch: nil, + show_checkmark?: false + } + ] + end + + # http://localhost:4001/trip-planner?plan%5Bfrom%5D=278+Highland+Avenue%2C+Somerville%2C+MA%2C+02143%2C+USA&plan%5Bfrom_latitude%5D=42.391806646433&plan%5Bfrom_longitude%5D=-71.111907954846&plan%5Bfrom_stop_id%5D=&plan%5Bto%5D=10+Park+Plaza%2C+Boston%2C+MA%2C+02116%2C+USA&plan%5Bto_latitude%5D=42.351517603896&plan%5Bto_longitude%5D=-71.066641738204&plan%5Bto_stop_id%5D=&plan%5Btime%5D=depart&plan%5Bdate_time%5D%5Bhour%5D=4&plan%5Bdate_time%5D%5Bminute%5D=00&plan%5Bdate_time%5D%5Bam_pm%5D=PM&plan%5Bdate_time%5D%5Bmonth%5D=4&plan%5Bdate_time%5D%5Bday%5D=8&plan%5Bdate_time%5D%5Byear%5D=2024&plan%5Bmodes%5D%5Bsubway%5D=true&plan%5Bmodes%5D%5Bcommuter_rail%5D=true&plan%5Bmodes%5D%5Bbus%5D=true&plan%5Bmodes%5D%5Bferry%5D=true&plan%5Bwheelchair%5D=true#plan_result_focus def render_steps(conn, steps, mode_class, itinerary_id, row_id) do for {step, bubbles} <- steps do render( diff --git a/lib/mix/tasks/header_footer.ex b/lib/mix/tasks/header_footer.ex index 0e197e3eb4..fc0b0a0eed 100644 --- a/lib/mix/tasks/header_footer.ex +++ b/lib/mix/tasks/header_footer.ex @@ -242,8 +242,6 @@ if Mix.env() in [:dev, :test] do updated_attrs = Enum.map(attrs, fn {"class", class_names} -> - # IO.inspect(class_names, label: "\tediting classes on <#{tag}>") - updated_class_names = String.split(class_names) |> Enum.map(&"#{@css_prefix}#{&1}") diff --git a/lib/trip_plan/api/open_trip_planner.ex b/lib/trip_plan/api/open_trip_planner.ex index 8559afd79e..13bc9d76fe 100644 --- a/lib/trip_plan/api/open_trip_planner.ex +++ b/lib/trip_plan/api/open_trip_planner.ex @@ -63,7 +63,9 @@ defmodule TripPlan.Api.OpenTripPlanner do long_name: json["route"]["longName"], type: json["agency"]["name"], url: json["agency"]["url"], - description: json["mode"] + description: json["mode"], + distance: json["distance"], + duration: json["duration"] } end diff --git a/lib/trip_plan/leg.ex b/lib/trip_plan/leg.ex index 6a12b29f18..297ae1bdfe 100644 --- a/lib/trip_plan/leg.ex +++ b/lib/trip_plan/leg.ex @@ -18,7 +18,9 @@ defmodule TripPlan.Leg do type: nil, description: nil, url: nil, - polyline: "" + polyline: "", + distance: 0.0, + duration: 0 @type mode :: PersonalDetail.t() | TransitDetail.t() @type t :: %__MODULE__{ @@ -32,7 +34,9 @@ defmodule TripPlan.Leg do type: String.t(), description: String.t(), url: String.t(), - polyline: String.t() + polyline: String.t(), + distance: Float.t(), + duration: Integer.t() } @doc "Returns the route ID for the leg, if present" From 9f5a139236503ebec1efda6f719dee3daca49e28 Mon Sep 17 00:00:00 2001 From: kotva006 Date: Tue, 16 Apr 2024 11:11:31 -0500 Subject: [PATCH 02/15] Added text toggle for the walking directions --- assets/js/stop-bubbles.js | 22 ++++++++++++------- .../_itinerary_row_personal.html.eex | 3 +-- .../trip_plan/_walk_list_expand_link.html.eex | 7 ++---- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/assets/js/stop-bubbles.js b/assets/js/stop-bubbles.js index addd581099..fe2502981f 100644 --- a/assets/js/stop-bubbles.js +++ b/assets/js/stop-bubbles.js @@ -1,24 +1,30 @@ export default function stopBubbles($) { $ = $ || window.jQuery; - function toggleStopList(e) { - const targetId = $(e.target).attr("id"); - const clickedLink = $("[data-target='#" + targetId + "']"); - - toggleArrow(clickedLink); - toggleBranch(clickedLink); - } - function toggleArrow(link) { link.find(".fa").toggleClass("fa-angle-down fa-angle-up"); } + function toggleShowHide(link) { + const text = link.find(".expand-show-details").text() + link.find(".expand-show-details").text(text.includes("Show Details") ? "Hide Details" : "Show Details") + } + function toggleBranch(link) { const branch = link.data("target-branch"); $("[data-branch='" + branch + "']").toggleClass("expanded"); link.parents(".route-branch-stop").toggleClass("expanded"); } + function toggleStopList(e) { + const targetId = $(e.target).attr("id"); + const clickedLink = $("[data-target='#" + targetId + "']"); + + toggleArrow(clickedLink); + toggleBranch(clickedLink); + toggleShowHide(clickedLink); + } + $(document).on( "hide.bs.collapse show.bs.collapse", ".collapse.stop-list", diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary_row_personal.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary_row_personal.html.eex index 8510c2c2e2..f76c09f549 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary_row_personal.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary_row_personal.html.eex @@ -12,7 +12,6 @@ <%= render "_walk_list_expand_link.html", Map.merge( assigns, %{ - branch_name: "hello", target_id: collapse_target_id, expanded: @expanded, bubble_params: transfer_bubbles @@ -20,7 +19,7 @@ ) %> <%= - content_tag :div, DotcomWeb.ScheduleView.StopList.step_bubble_attributes(steps, collapse_target_id, @next_stop_name == @expanded) do + content_tag :div, [id: collapse_target_id, class: "collapse stop-list"] do render_steps(@conn, steps, @mode_class, @itinerary_idx, @row_idx) end %> diff --git a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex index 468e4e98db..73c918550b 100644 --- a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex @@ -1,3 +1,4 @@ +
"> <%= assigns @@ -14,11 +15,7 @@ data: [toggle: "collapse", target: "##{@target_id}"] do %> - <%= if @expanded do - "Hide Details" - else - "Show Details" - end %> + <%= if @expanded, do: "Hide Details", else: "Show Details" %> <% end %> From 2c03d36a098b55a82021afe9c4e494f9bbbe565e Mon Sep 17 00:00:00 2001 From: kotva006 Date: Tue, 16 Apr 2024 11:45:41 -0500 Subject: [PATCH 03/15] Added collapse arrow --- .../templates/trip_plan/_walk_list_expand_link.html.eex | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex index 73c918550b..81d94920e8 100644 --- a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex @@ -18,6 +18,9 @@ <%= if @expanded, do: "Hide Details", else: "Show Details" %> + + <%= if @expanded, do: fa("angle-up"), else: fa("angle-down") %> + <% end %>
From 32e305593078c86e6e78fa2bc1cb3fb6a804bb34 Mon Sep 17 00:00:00 2001 From: kotva006 Date: Tue, 16 Apr 2024 12:01:44 -0500 Subject: [PATCH 04/15] Removed comment link --- lib/dotcom_web/views/trip_plan_view.ex | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/dotcom_web/views/trip_plan_view.ex b/lib/dotcom_web/views/trip_plan_view.ex index f04e3c9dfd..95952b590d 100644 --- a/lib/dotcom_web/views/trip_plan_view.ex +++ b/lib/dotcom_web/views/trip_plan_view.ex @@ -297,7 +297,6 @@ defmodule DotcomWeb.TripPlanView do ] end - # http://localhost:4001/trip-planner?plan%5Bfrom%5D=278+Highland+Avenue%2C+Somerville%2C+MA%2C+02143%2C+USA&plan%5Bfrom_latitude%5D=42.391806646433&plan%5Bfrom_longitude%5D=-71.111907954846&plan%5Bfrom_stop_id%5D=&plan%5Bto%5D=10+Park+Plaza%2C+Boston%2C+MA%2C+02116%2C+USA&plan%5Bto_latitude%5D=42.351517603896&plan%5Bto_longitude%5D=-71.066641738204&plan%5Bto_stop_id%5D=&plan%5Btime%5D=depart&plan%5Bdate_time%5D%5Bhour%5D=4&plan%5Bdate_time%5D%5Bminute%5D=00&plan%5Bdate_time%5D%5Bam_pm%5D=PM&plan%5Bdate_time%5D%5Bmonth%5D=4&plan%5Bdate_time%5D%5Bday%5D=8&plan%5Bdate_time%5D%5Byear%5D=2024&plan%5Bmodes%5D%5Bsubway%5D=true&plan%5Bmodes%5D%5Bcommuter_rail%5D=true&plan%5Bmodes%5D%5Bbus%5D=true&plan%5Bmodes%5D%5Bferry%5D=true&plan%5Bwheelchair%5D=true#plan_result_focus def render_steps(conn, steps, mode_class, itinerary_id, row_id) do for {step, bubbles} <- steps do render( From 1704a3516a81bed7d8aca0ec1845f166c75d0c1f Mon Sep 17 00:00:00 2001 From: kotva006 Date: Thu, 18 Apr 2024 12:29:03 -0500 Subject: [PATCH 05/15] Formatted the minutes to closest whole number --- .../templates/trip_plan/_walk_list_expand_link.html.eex | 5 +++-- lib/dotcom_web/views/trip_plan_view.ex | 6 ++++++ test/dotcom_web/views/trip_plan_view_test.exs | 8 ++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex index 81d94920e8..7c2f3c6542 100644 --- a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex @@ -7,8 +7,9 @@ %>
- <% duration_minutes = :erlang.float_to_binary(Timex.Duration.to_minutes(@itinerary_row.duration, :seconds), [decimals: 1]) %> - <%= svg "walk.svg" %>Walk to <%= @next_stop_name %>(<%= display_meters_as_miles(@itinerary_row.distance) %> mi, <%= duration_minutes %> min) + <% duration_minutes = display_seconds_as_minutes(@itinerary_row.duration) %> + <% distance_miles = display_meters_as_miles(@itinerary_row.distance) %> + <%= svg "walk.svg" %>Walk to <%= @next_stop_name %>(<%= distance_miles %> mi, <%= duration_minutes %> min)
<%= link to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @next_stop_name)), class: "toggle-stop-list btn btn-link", diff --git a/lib/dotcom_web/views/trip_plan_view.ex b/lib/dotcom_web/views/trip_plan_view.ex index 95952b590d..bed2df3bb2 100644 --- a/lib/dotcom_web/views/trip_plan_view.ex +++ b/lib/dotcom_web/views/trip_plan_view.ex @@ -318,6 +318,12 @@ defmodule DotcomWeb.TripPlanView do :erlang.float_to_binary(meters / @meters_per_mile, decimals: 1) end + @spec display_seconds_as_minutes(integer) :: String.t() + def display_seconds_as_minutes(seconds) do + minutes = Timex.Duration.to_minutes(seconds, :seconds) + :erlang.integer_to_binary(Kernel.max(1, Kernel.round(minutes))) + end + def format_additional_route(%Route{id: "Green" <> _branch} = route, direction_id) do [ format_green_line_name(route.name), diff --git a/test/dotcom_web/views/trip_plan_view_test.exs b/test/dotcom_web/views/trip_plan_view_test.exs index dd6a6654a1..65d15ff711 100644 --- a/test/dotcom_web/views/trip_plan_view_test.exs +++ b/test/dotcom_web/views/trip_plan_view_test.exs @@ -450,6 +450,14 @@ closest arrival to 12:00 AM, Thursday, January 1st." end end + describe "display_seconds_as_minutes/1" do + test "converts seconds to minutes" do + assert display_seconds_as_minutes(5) == "1" + assert display_seconds_as_minutes(59) == "1" + assert display_seconds_as_minutes(100) == "2" + end + end + describe "format_additional_route/2" do @tag :external test "Correctly formats Green Line route" do From 46a0efaa3b7b33901199269847510cb77045cbbc Mon Sep 17 00:00:00 2001 From: Ryan Kotval Date: Tue, 23 Apr 2024 08:25:03 -0500 Subject: [PATCH 06/15] feat(TripPlan): Rework the transit copy (#1996) * feat(TripPlan): Rework the transit copy * Fixed tests * Added tests * Set the stop string to pluralize --- .../schedule/_stop_list_expand_link.html.eex | 22 +++++++++++---- .../_itinerary_transfer_stop.html.eex | 4 --- .../views/schedule/stop_list_view_test.exs | 28 +++++++++++++++++-- 3 files changed, 42 insertions(+), 12 deletions(-) diff --git a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex index b95e9bbeed..a874d8cf6e 100644 --- a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex @@ -8,16 +8,28 @@ |> DotcomWeb.PartialView.StopBubbles.render_stop_bubbles(true, stop_branch) %>
+
+
+ <% duration_minutes = DotcomWeb.TripPlanView.display_seconds_as_minutes(@itinerary_row.duration) %> + <%= DotcomWeb.TripPlanView.icon_for_route(@route) %> +
+
+ <% stop_string = Inflex.inflect("Stop", intermediate_stop_count) %> + Ride the <%= @branch_display %> (<%= intermediate_stop_count %> <%= stop_string %>, <%= duration_minutes %> min) +
+ <% headsign = if @itinerary_row.trip.headsign == "", do: "", else: "towards #{@itinerary_row.trip.headsign}" %> + <%= Routes.Route.direction_name(@route, @itinerary_row.trip.direction_id) %> <%= headsign %> +
+
+
<%= link to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @branch_name)), class: "toggle-stop-list btn btn-link", data: [toggle: "collapse", target: "##{@target_id}"] do %> - - <%= intermediate_stop_count %> - <%= Inflex.inflect("stop", intermediate_stop_count) %> - on the - <%= @branch_display %> + + Show Details + <%= if Map.get(assigns, :alerts?, false) do %> <%= fa "exclamation-triangle" %> diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary_transfer_stop.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary_transfer_stop.html.eex index 807053300f..93266ee0c1 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary_transfer_stop.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary_transfer_stop.html.eex @@ -10,10 +10,6 @@ <%= svg_icon(%SvgIcon{icon: Route.type_atom(route), class: "icon-boring"}) %> Connect to the <%= transfer_route_name(route) %>
<%= if @itinerary_row.trip do %> - - Take the <%= route.name %> <%= Routes.Route.direction_name(route, @itinerary_row.trip.direction_id) %> - <%= unless @itinerary_row.trip.headsign == "" do %>towards <%= @itinerary_row.trip.headsign %><% end %> -
<%= format_schedule_time(@itinerary_row.departure) %>
<% end %>
diff --git a/test/dotcom_web/views/schedule/stop_list_view_test.exs b/test/dotcom_web/views/schedule/stop_list_view_test.exs index b85173d3b9..1e28d6d979 100644 --- a/test/dotcom_web/views/schedule/stop_list_view_test.exs +++ b/test/dotcom_web/views/schedule/stop_list_view_test.exs @@ -231,7 +231,8 @@ defmodule DotcomWeb.StopListViewTest do route: %Route{id: "Green-E"}, vehicle_tooltip: nil, expanded: nil, - conn: %{query_params: %{}, request_path: ""} + conn: %{query_params: %{}, request_path: ""}, + itinerary_row: %{duration: 120, trip: %{headsign: nil, direction_id: 0}} } rendered = "_stop_list_expand_link.html" |> ScheduleView.render(assigns) |> safe_to_string() @@ -239,6 +240,25 @@ defmodule DotcomWeb.StopListViewTest do assert rendered =~ "11" end + test "Expand link lists duration" do + assigns = %{ + bubbles: [{"Green-E", :line}], + target_id: "target-id", + intermediate_stop_count: 11, + branch_name: "Green-E", + branch_display: "Green-E branch", + route: %Route{id: "Green-E"}, + vehicle_tooltip: nil, + expanded: nil, + conn: %{query_params: %{}, request_path: ""}, + itinerary_row: %{duration: 120, trip: %{headsign: nil, direction_id: 0}} + } + + rendered = "_stop_list_expand_link.html" |> ScheduleView.render(assigns) |> safe_to_string() + + assert rendered =~ "2 min" + end + test "Expand link displays branch_display as link text" do assigns = %{ bubbles: [{"Braintree", :line}], @@ -249,7 +269,8 @@ defmodule DotcomWeb.StopListViewTest do route: %Route{id: "Red"}, vehicle_tooltip: nil, expanded: nil, - conn: %{query_params: %{}, request_path: ""} + conn: %{query_params: %{}, request_path: ""}, + itinerary_row: %{duration: 120, trip: %{headsign: nil, direction_id: 0}} } rendered = "_stop_list_expand_link.html" |> ScheduleView.render(assigns) |> safe_to_string() @@ -267,7 +288,8 @@ defmodule DotcomWeb.StopListViewTest do route: %Route{id: "Red"}, vehicle_tooltip: nil, expanded: true, - conn: %{query_params: %{}, request_path: ""} + conn: %{query_params: %{}, request_path: ""}, + itinerary_row: %{duration: 120, trip: %{headsign: nil, direction_id: 0}} } rendered = "_stop_list_expand_link.html" |> ScheduleView.render(assigns) |> safe_to_string() From 9cf22dd077d1708e2925d488ba60d97fed35f914 Mon Sep 17 00:00:00 2001 From: kotva006 Date: Tue, 23 Apr 2024 11:38:15 -0500 Subject: [PATCH 07/15] Addressed feedback --- assets/css/_stop-bubbles.scss | 67 +------------------ assets/css/_trip-plan.scss | 14 ---- .../partial/_stop_bubble_container.html.eex | 8 --- .../schedule/_stop_list_expand_link.html.eex | 4 +- .../templates/trip_plan/_itinerary.html.eex | 2 +- .../trip_plan/_itinerary_stop.html.eex | 4 +- .../_itinerary_transfer_stop.html.eex | 5 -- .../trip_plan/_walk_list_expand_link.html.eex | 4 +- 8 files changed, 9 insertions(+), 99 deletions(-) diff --git a/assets/css/_stop-bubbles.scss b/assets/css/_stop-bubbles.scss index a8a70ef4a6..9ecb182da6 100644 --- a/assets/css/_stop-bubbles.scss +++ b/assets/css/_stop-bubbles.scss @@ -7,17 +7,6 @@ $location-line-width: $space-6; .route-branch-indent-start { background-color: $color; } - - .expand-icon { - .horizontal { - background-color: rgba($color, .4); - - &::before, - &::after { - background-color: $color; - } - } - } } } @@ -27,12 +16,6 @@ $location-line-width: $space-6; flex: 1 1 0%; overflow: visible; // if set to hidden, site works better in IE10, but then circles are slightly cropped everywhere width: 100%; - - &.expanded { - .expand-icon { - display: none; - } - } } .route-branch-stop-info-container { @@ -147,51 +130,6 @@ $location-line-width: $space-6; } } -.expand-icon { - display: flex; - flex: 0 0 $base-spacing; - flex-direction: column; - justify-content: center; - position: relative; - width: $base-spacing; - - .horizontal { - border-radius: $location-line-width * 2; - border-width: 0; - flex-basis: $location-line-width; - flex-grow: 0; - flex-shrink: 0; - position: relative; - width: $base-spacing; - - &::before, - &::after { - border-radius: $location-line-width * 2; - content: ''; - height: $location-line-width; - position: absolute; - transform: rotate(-45deg); - width: $base-spacing; - } - - &::before { - transform-origin: 0 $location-line-width; - } - - &::after { - transform-origin: $base-spacing 0; - } - } - - + .route-branch-stop-bubble-line { - border-radius: $location-line-width * 2 $location-line-width * 2 0 0; - - &.expanded { - border-radius: 0; - } - } -} - .route-branch-stop-bubble-line { border-width: 0; display: none; // hide on non-flex browsers @@ -213,7 +151,6 @@ $location-line-width: $space-6; flex: 1 1 0%; flex-direction: column; margin-bottom: $base-spacing; // both margin-bottom and padding-bottom are needed on this element - padding-bottom: $base-spacing; // to keep the icon properly aligned with the text width: 60%; // for non-flex browsers } @@ -230,11 +167,12 @@ $location-line-width: $space-6; } } -.toggle-stop-list { +.toggle-detail-list { align-items: center; color: $gray-dark; display: flex; justify-content: space-between; + padding-top: .4rem; text-align: left; width: 100%; @@ -247,7 +185,6 @@ $location-line-width: $space-6; } } -.expand-branch-stop-count, .expand-show-details { color: $brand-primary; diff --git a/assets/css/_trip-plan.scss b/assets/css/_trip-plan.scss index 61b8a82969..f356e23671 100644 --- a/assets/css/_trip-plan.scss +++ b/assets/css/_trip-plan.scss @@ -49,15 +49,6 @@ } } -.trip-plan-itinerary-container { - margin-top: $space-12; - - .toggle-stop-list { - padding-bottom: $space-6; - text-decoration: none; - } -} - .itinerary-accessible { background-color: $gray-lightest; border-radius: $border-radius $border-radius 0 0; @@ -244,10 +235,6 @@ width: 100%; } -.itinerary-transfer-row-label { - font-weight: bold; -} - .itinerary-instruction { display: inline-block; max-width: 75%; @@ -255,7 +242,6 @@ } .itinerary-step { - border-bottom: $border; flex: 1 1 0%; margin-bottom: $space-6; padding-bottom: $space-6; diff --git a/lib/dotcom_web/templates/partial/_stop_bubble_container.html.eex b/lib/dotcom_web/templates/partial/_stop_bubble_container.html.eex index 07946c92fe..33f327b323 100644 --- a/lib/dotcom_web/templates/partial/_stop_bubble_container.html.eex +++ b/lib/dotcom_web/templates/partial/_stop_bubble_container.html.eex @@ -18,14 +18,6 @@ end %> <%= if @show_line? do %> - <%= if @add_expand_icon? do %> - <%= content_tag :div, [], class: "route-branch-stop-bubble-line #{@class} direction-#{@direction_id} above", data: [branch: assigns[:bubble_branch]] %> -
-
-
-
-
- <% end %> <%= content_tag :div, [], class: "route-branch-stop-bubble-line #{@class} direction-#{@direction_id}", data: [branch: assigns[:bubble_branch]] %> <% end %> <%= if assigns[:merge_indent] == :below do %> diff --git a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex index a874d8cf6e..14ebefaa79 100644 --- a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex @@ -23,11 +23,11 @@ <%= link to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @branch_name)), - class: "toggle-stop-list btn btn-link", + class: "toggle-detail-list btn btn-link", data: [toggle: "collapse", target: "##{@target_id}"] do %> - + Show Details <%= if Map.get(assigns, :alerts?, false) do %> diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary.html.eex index c755ff3d25..6276540081 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary.html.eex @@ -20,7 +20,7 @@ <%= DotcomWeb.PartialView.StopBubbles.render_stop_bubbles([%Dotcom.StopBubble.Params{render_type: :terminus, class: "terminus", show_line?: false, show_checkmark?: true}]) %>
<% {destination_name, _destination_id, arrival_time, alerts} = @itinerary_row_list.destination %> - + <%= destination_name %> <%= render "_itinerary_alert.html", diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary_stop.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary_stop.html.eex index caddadab71..a6e47f875f 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary_stop.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary_stop.html.eex @@ -1,9 +1,9 @@
<%= if @stop_id do %> - <%= link @stop_name, to: stop_path(@conn, :show, @stop_id), class: "itinerary-transfer-row-label notranslate" %> + <%= link @stop_name, to: stop_path(@conn, :show, @stop_id), class: "notranslate" %> <%= render "_itinerary_alert.html", assigns %> <% else %> - <%= @stop_name %> + <%= @stop_name %> <% end %> <%= render_stop_departure_display(@departure_display) %>
diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary_transfer_stop.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary_transfer_stop.html.eex index 93266ee0c1..a7ca201eed 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary_transfer_stop.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary_transfer_stop.html.eex @@ -4,11 +4,6 @@ <%= render "_itinerary_stop.html", assigns %> <%= if @itinerary_row.route do %>
- <% route = @itinerary_row.route %> -
- <%# we put the icon and mode name on one line to avoid the whitespace being collapsed. %> - <%= svg_icon(%SvgIcon{icon: Route.type_atom(route), class: "icon-boring"}) %> Connect to the <%= transfer_route_name(route) %> -
<%= if @itinerary_row.trip do %>
<%= format_schedule_time(@itinerary_row.departure) %>
<% end %> diff --git a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex index 7c2f3c6542..551b859a05 100644 --- a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex @@ -12,10 +12,10 @@ <%= svg "walk.svg" %>Walk to <%= @next_stop_name %>(<%= distance_miles %> mi, <%= duration_minutes %> min)
<%= link to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @next_stop_name)), - class: "toggle-stop-list btn btn-link", + class: "toggle-detail-list btn btn-link", data: [toggle: "collapse", target: "##{@target_id}"] do %> - + <%= if @expanded, do: "Hide Details", else: "Show Details" %> From 8991f137e901bdc50ad435f089d06d7108517c00 Mon Sep 17 00:00:00 2001 From: kotva006 Date: Tue, 23 Apr 2024 13:03:31 -0500 Subject: [PATCH 08/15] Fixed padding --- assets/css/_stop-bubbles.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/css/_stop-bubbles.scss b/assets/css/_stop-bubbles.scss index 9ecb182da6..d76f03ae49 100644 --- a/assets/css/_stop-bubbles.scss +++ b/assets/css/_stop-bubbles.scss @@ -151,6 +151,7 @@ $location-line-width: $space-6; flex: 1 1 0%; flex-direction: column; margin-bottom: $base-spacing; // both margin-bottom and padding-bottom are needed on this element + margin-top: .813rem; width: 60%; // for non-flex browsers } @@ -172,7 +173,7 @@ $location-line-width: $space-6; color: $gray-dark; display: flex; justify-content: space-between; - padding-top: .4rem; + padding-block: .75rem; text-align: left; width: 100%; From 36f9cb4630d3195601c43ca8163503596f217ffe Mon Sep 17 00:00:00 2001 From: kotva006 Date: Tue, 23 Apr 2024 13:17:30 -0500 Subject: [PATCH 09/15] Removed old css classes --- assets/css/_stop-bubbles.scss | 2 +- assets/css/_trip-plan.scss | 104 ---------------------------------- 2 files changed, 1 insertion(+), 105 deletions(-) diff --git a/assets/css/_stop-bubbles.scss b/assets/css/_stop-bubbles.scss index d76f03ae49..5e7839a7f0 100644 --- a/assets/css/_stop-bubbles.scss +++ b/assets/css/_stop-bubbles.scss @@ -150,7 +150,7 @@ $location-line-width: $space-6; display: flex; flex: 1 1 0%; flex-direction: column; - margin-bottom: $base-spacing; // both margin-bottom and padding-bottom are needed on this element + margin-bottom: $base-spacing; margin-top: .813rem; width: 60%; // for non-flex browsers } diff --git a/assets/css/_trip-plan.scss b/assets/css/_trip-plan.scss index f356e23671..f61d95f424 100644 --- a/assets/css/_trip-plan.scss +++ b/assets/css/_trip-plan.scss @@ -59,108 +59,10 @@ padding-top: $space-4; } -.trip-plan-itinerary-header { - align-items: center; - border: $border-width solid $brand-primary; - border-radius: $border-radius; - display: flex; - padding: calc(#{$base-spacing} / 2) $space-16; - - &:not(.collapsed) { - background-color: $brand-primary-darkest; - border-radius: $border-radius $border-radius 0 0; - color: $white; - } - - &.collapsed:not(:hover) { - .fa-angle-right { - color: $gray-light; - } - - .itinerary-has-alerts-icon, - .trip-plan-itinerary-length-distance { - color: $gray-dark; - } - } - - &:focus { - text-decoration: none; - } - - &:hover { - background-color: $brand-primary-lightest; - color: $gray-dark; - text-decoration: none; - } -} - -.trip-plan-itinerary-summary { - display: flex; - flex: 1 1 auto; - flex-wrap: wrap; -} - -.trip-plan-itinerary-accessibility { - @include icon-size-inline(1em); - - [class*='c-svg__icon'] { - margin-right: calc(#{$base-spacing} / 4); - } -} - -.trip-plan-itinerary-legs { - @include icon-size-inline(1.5em, .1875em); - align-items: center; - display: flex; - flex: 1 1 auto; - - .fa-angle-right { - margin-left: calc(#{$base-spacing} / 4); - margin-right: calc(#{$base-spacing} / 4); - } -} - -.trip-plan-itinerary-length { - align-items: center; - display: flex; - flex: 0 1 auto; - margin-right: calc(#{$base-spacing} / 2); -} - -.trip-plan-itinerary-length-time { - flex: 0 0 auto; - font-weight: bold; -} - -.trip-plan-itinerary-length-distance { - flex: 0 0 auto; - font-size: .875rem; - line-height: 1.125rem; - margin-left: $space-12; - white-space: nowrap; - - g { - fill: currentColor; - } -} - .itinerary-has-alerts-icon { margin-left: $space-8; } -.trip-plan-itinerary-expand { - display: flex; - flex: 0 0 auto; - flex-direction: column; - justify-content: center; -} - -.trip-plan-itinerary-body { - border: $border; - border-radius: 0 0 $border-radius $border-radius; - padding: 0 $space-16; -} - .trip-plan-map { height: $base-spacing * 31.5; margin-bottom: $base-spacing; @@ -190,12 +92,6 @@ } } -.itinerary-has-alerts-text { - background-color: $gray-lightest; - margin-bottom: $base-spacing; - padding: $base-spacing; -} - .trip-plan-related-links { @include icon-size-inline(1em); From dd9217989fd6a1af5b6549106dd2204e59f0a03b Mon Sep 17 00:00:00 2001 From: kotva006 Date: Fri, 26 Apr 2024 14:24:21 -0500 Subject: [PATCH 10/15] Fixed layout to make whole row a link --- assets/css/_spacing.scss | 4 ++ assets/css/_stop-bubbles.scss | 4 +- assets/css/_trip-plan.scss | 5 ++ .../schedule/_stop_list_expand_link.html.eex | 66 ++++++++++--------- .../trip_plan/_itinerary_row_step.html.eex | 16 ++--- .../trip_plan/_walk_list_expand_link.html.eex | 42 ++++++++---- 6 files changed, 86 insertions(+), 51 deletions(-) diff --git a/assets/css/_spacing.scss b/assets/css/_spacing.scss index 2a4671ac0c..bbaef0b2b3 100644 --- a/assets/css/_spacing.scss +++ b/assets/css/_spacing.scss @@ -72,6 +72,10 @@ // End Bottom // Start +.ps-0 { + padding-left: 0; +} + .ps-5 { padding-left: .313rem; } diff --git a/assets/css/_stop-bubbles.scss b/assets/css/_stop-bubbles.scss index 5e7839a7f0..f22c8f2356 100644 --- a/assets/css/_stop-bubbles.scss +++ b/assets/css/_stop-bubbles.scss @@ -151,7 +151,6 @@ $location-line-width: $space-6; flex: 1 1 0%; flex-direction: column; margin-bottom: $base-spacing; - margin-top: .813rem; width: 60%; // for non-flex browsers } @@ -173,7 +172,8 @@ $location-line-width: $space-6; color: $gray-dark; display: flex; justify-content: space-between; - padding-block: .75rem; + padding-bottom: .75rem; + padding-top: .5rem; text-align: left; width: 100%; diff --git a/assets/css/_trip-plan.scss b/assets/css/_trip-plan.scss index f61d95f424..baf1b5ee2a 100644 --- a/assets/css/_trip-plan.scss +++ b/assets/css/_trip-plan.scss @@ -142,6 +142,11 @@ margin-bottom: $space-6; padding-bottom: $space-6; width: 100%; + + &--border { + border-bottom: $border; + } + } .itinerary-stop { diff --git a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex index 14ebefaa79..45ef66ecfe 100644 --- a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex @@ -1,5 +1,5 @@
"> - <% intermediate_stop_count = Map.get(assigns, :intermediate_stop_count, 0)%> + <% intermediate_stop_count = Map.get(assigns, :intermediate_stop_count, 0) + 1%> <%= stop_branch = assigns[:stop] && @stop.branch assigns @@ -8,38 +8,44 @@ |> DotcomWeb.PartialView.StopBubbles.render_stop_bubbles(true, stop_branch) %>
-
-
- <% duration_minutes = DotcomWeb.TripPlanView.display_seconds_as_minutes(@itinerary_row.duration) %> - <%= DotcomWeb.TripPlanView.icon_for_route(@route) %> -
-
- <% stop_string = Inflex.inflect("Stop", intermediate_stop_count) %> - Ride the <%= @branch_display %> (<%= intermediate_stop_count %> <%= stop_string %>, <%= duration_minutes %> min) -
- <% headsign = if @itinerary_row.trip.headsign == "", do: "", else: "towards #{@itinerary_row.trip.headsign}" %> - <%= Routes.Route.direction_name(@route, @itinerary_row.trip.direction_id) %> <%= headsign %> -
-
-
<%= link to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @branch_name)), - class: "toggle-detail-list btn btn-link", + class: "toggle-detail-list btn btn-link ps-0 pb-8", data: [toggle: "collapse", target: "##{@target_id}"] do %> - - - - Show Details - - <%= if Map.get(assigns, :alerts?, false) do %> - - <%= fa "exclamation-triangle" %> +
+
+
+
+ <%= DotcomWeb.TripPlanView.icon_for_route(@route) %> +
+
+ <% duration_minutes = DotcomWeb.TripPlanView.display_seconds_as_minutes(@itinerary_row.duration) %> + <% stop_string = Inflex.inflect("Stop", intermediate_stop_count) %> + Ride the <%= @branch_display %> (<%= intermediate_stop_count %> <%= stop_string %>, <%= duration_minutes %> min) +
+ <% headsign = if @itinerary_row.trip.headsign == "", do: "", else: "towards #{@itinerary_row.trip.headsign}" %> + <%= Routes.Route.direction_name(@route, @itinerary_row.trip.direction_id) %> <%= headsign %> +
+
+ + + Show Details + + <%= if Map.get(assigns, :alerts?, false) do %> + + <%= fa "exclamation-triangle" %> + + <% end %> + +
+
+
+
+
+ + <%= if @expanded, do: fa("angle-up"), else: fa("angle-down") %> - <% end %> - - - - <%= if @expanded, do: fa("angle-up"), else: fa("angle-down") %> - +
+
<% end %>
diff --git a/lib/dotcom_web/templates/trip_plan/_itinerary_row_step.html.eex b/lib/dotcom_web/templates/trip_plan/_itinerary_row_step.html.eex index 226eb82d0a..d2320e39b5 100644 --- a/lib/dotcom_web/templates/trip_plan/_itinerary_row_step.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_itinerary_row_step.html.eex @@ -1,13 +1,13 @@
<%= DotcomWeb.PartialView.StopBubbles.render_stop_bubbles(@bubble_params) %> -
- <%= @step %> - <%= render "_itinerary_alert.html", - itinerary_idx: @itinerary_idx, - row_idx: @row_idx, - stop_id: @stop_id, - alerts: @alerts, - conn: @conn +
+ <%= @step %> + <%= render "_itinerary_alert.html", + itinerary_idx: @itinerary_idx, + row_idx: @row_idx, + stop_id: @stop_id, + alerts: @alerts, + conn: @conn %>
diff --git a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex index 551b859a05..650d566b29 100644 --- a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex @@ -7,21 +7,41 @@ %>
- <% duration_minutes = display_seconds_as_minutes(@itinerary_row.duration) %> - <% distance_miles = display_meters_as_miles(@itinerary_row.distance) %> - <%= svg "walk.svg" %>Walk to <%= @next_stop_name %>(<%= distance_miles %> mi, <%= duration_minutes %> min) +
<%= link to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @next_stop_name)), - class: "toggle-detail-list btn btn-link", + class: "toggle-detail-list btn btn-link ps-0 pb-8", data: [toggle: "collapse", target: "##{@target_id}"] do %> - - <%= if @expanded, do: "Hide Details", else: "Show Details" %> - - - - <%= if @expanded, do: fa("angle-up"), else: fa("angle-down") %> - +
+
+
+ <%= svg "walk.svg" %> +
+ <% duration_minutes = display_seconds_as_minutes(@itinerary_row.duration) %> + <% distance_miles = display_meters_as_miles(@itinerary_row.distance) %> + Walk to <%= @next_stop_name %>(<%= distance_miles %> mi, <%= duration_minutes %> min) +
+ + + <%= if @expanded, do: "Hide Details", else: "Show Details" %> + + <%= if Map.get(assigns, :alerts?, false) do %> + + <%= fa "exclamation-triangle" %> + + <% end %> + +
+
+
+
+
+ + <%= if @expanded, do: fa("angle-up"), else: fa("angle-down") %> + +
+
<% end %>
From 6e23f604f2e45ecb02ffc8f37eb3723598d1e6f9 Mon Sep 17 00:00:00 2001 From: kotva006 Date: Fri, 26 Apr 2024 14:24:45 -0500 Subject: [PATCH 11/15] Removed unused css class --- assets/css/_stop-bubbles.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/assets/css/_stop-bubbles.scss b/assets/css/_stop-bubbles.scss index f22c8f2356..078b856bc9 100644 --- a/assets/css/_stop-bubbles.scss +++ b/assets/css/_stop-bubbles.scss @@ -18,11 +18,6 @@ $location-line-width: $space-6; width: 100%; } -.route-branch-stop-info-container { - display: flex; - justify-content: space-between; -} - .route-branch-stop-prediction { text-align: right; } From 56f19d1069b605daf99dd3e1427054efc60c0fc7 Mon Sep 17 00:00:00 2001 From: kotva006 Date: Mon, 29 Apr 2024 09:27:23 -0500 Subject: [PATCH 12/15] Added text wrapping --- assets/css/_typography.scss | 4 ++++ .../templates/trip_plan/_walk_list_expand_link.html.eex | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/css/_typography.scss b/assets/css/_typography.scss index 433cccea01..ef48812dea 100644 --- a/assets/css/_typography.scss +++ b/assets/css/_typography.scss @@ -147,3 +147,7 @@ $base-line-height: 1.275; .font-helvetica-neue { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } + +.text-wrap { + text-wrap: wrap; +} diff --git a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex index 650d566b29..9d3af0bd94 100644 --- a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex @@ -20,7 +20,9 @@
<% duration_minutes = display_seconds_as_minutes(@itinerary_row.duration) %> <% distance_miles = display_meters_as_miles(@itinerary_row.distance) %> - Walk to <%= @next_stop_name %>(<%= distance_miles %> mi, <%= duration_minutes %> min) +
+
Walk to <%= @next_stop_name %>
(<%= distance_miles %> mi, <%= duration_minutes %> min) +
From 54810a026eb17445a4caf6daf880f39cfb6ba8fc Mon Sep 17 00:00:00 2001 From: kotva006 Date: Mon, 29 Apr 2024 10:47:32 -0500 Subject: [PATCH 13/15] Fixed wrapping on stop expand --- .../templates/schedule/_stop_list_expand_link.html.eex | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex index 45ef66ecfe..165d1394fb 100644 --- a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex @@ -20,7 +20,9 @@
<% duration_minutes = DotcomWeb.TripPlanView.display_seconds_as_minutes(@itinerary_row.duration) %> <% stop_string = Inflex.inflect("Stop", intermediate_stop_count) %> - Ride the <%= @branch_display %> (<%= intermediate_stop_count %> <%= stop_string %>, <%= duration_minutes %> min) +
+
Ride the <%= @branch_display %>
(<%= intermediate_stop_count %> <%= stop_string %>, <%= duration_minutes %> min) +
<% headsign = if @itinerary_row.trip.headsign == "", do: "", else: "towards #{@itinerary_row.trip.headsign}" %> <%= Routes.Route.direction_name(@route, @itinerary_row.trip.direction_id) %> <%= headsign %> From 93982379f0fd568d17603e39b6ed7ebf77970e6a Mon Sep 17 00:00:00 2001 From: kotva006 Date: Tue, 30 Apr 2024 08:15:23 -0500 Subject: [PATCH 14/15] Fixed wrapping and padding --- assets/css/_stop-bubbles.scss | 4 ++++ .../templates/schedule/_stop_list_expand_link.html.eex | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/assets/css/_stop-bubbles.scss b/assets/css/_stop-bubbles.scss index 078b856bc9..11e6751bbb 100644 --- a/assets/css/_stop-bubbles.scss +++ b/assets/css/_stop-bubbles.scss @@ -172,6 +172,10 @@ $location-line-width: $space-6; text-align: left; width: 100%; + @include media-breakpoint-down(sm) { + padding-right: 0; + } + &:hover { text-decoration: none; } diff --git a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex index 165d1394fb..9bd090cf56 100644 --- a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex @@ -23,7 +23,7 @@
Ride the <%= @branch_display %>
(<%= intermediate_stop_count %> <%= stop_string %>, <%= duration_minutes %> min)
-
+
<% headsign = if @itinerary_row.trip.headsign == "", do: "", else: "towards #{@itinerary_row.trip.headsign}" %> <%= Routes.Route.direction_name(@route, @itinerary_row.trip.direction_id) %> <%= headsign %>
From 1b6862146e969e543524a219e28cbd73e519d074 Mon Sep 17 00:00:00 2001 From: kotva006 Date: Tue, 30 Apr 2024 09:06:35 -0500 Subject: [PATCH 15/15] Changed layout --- .../templates/schedule/_stop_list_expand_link.html.eex | 4 ++-- .../templates/trip_plan/_walk_list_expand_link.html.eex | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex index 9bd090cf56..3abe08f4a6 100644 --- a/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/schedule/_stop_list_expand_link.html.eex @@ -20,8 +20,8 @@
<% duration_minutes = DotcomWeb.TripPlanView.display_seconds_as_minutes(@itinerary_row.duration) %> <% stop_string = Inflex.inflect("Stop", intermediate_stop_count) %> -
-
Ride the <%= @branch_display %>
(<%= intermediate_stop_count %> <%= stop_string %>, <%= duration_minutes %> min) +
+ Ride the <%= @branch_display %> (<%= intermediate_stop_count %> <%= stop_string %>, <%= duration_minutes %> min)
<% headsign = if @itinerary_row.trip.headsign == "", do: "", else: "towards #{@itinerary_row.trip.headsign}" %> diff --git a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex index 9d3af0bd94..4f4bc8bb62 100644 --- a/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex +++ b/lib/dotcom_web/templates/trip_plan/_walk_list_expand_link.html.eex @@ -20,8 +20,8 @@
<% duration_minutes = display_seconds_as_minutes(@itinerary_row.duration) %> <% distance_miles = display_meters_as_miles(@itinerary_row.distance) %> -
-
Walk to <%= @next_stop_name %>
(<%= distance_miles %> mi, <%= duration_minutes %> min) +
+ Walk to <%= @next_stop_name %>(<%= distance_miles %> mi, <%= duration_minutes %> min)