Skip to content

feat(ScheduleFinderLive): more prominent cancelled stops #3013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thecristen wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat(ScheduleFinderLive): more prominent cancelled stops #3013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eae9f14
fix: restore showing `nil` direction alerts
thecristen Mar 13, 2026
3ec19c7
cancelled: "Skipped" text under struckthrough time
thecristen Mar 13, 2026
305263d
cancelled: strikethrough stop name too
thecristen Mar 13, 2026
93fa10e
cancelled: show "x" icon on cancelled stop
thecristen Mar 13, 2026
18cd144
Merge remote-tracking branch 'origin/main' into cbj/sf2.0/cancelled-row
thecristen Mar 16, 2026
b6a10f3
fix: better scaling with text!
thecristen Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions lib/dotcom_web/components/route_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ defmodule DotcomWeb.RouteComponents do
attr :route, Route, required: true
attr :class, :string, default: ""
attr :stop_pin?, :boolean, default: false
attr :stop_cancelled?, :boolean, default: false
Copy link
Contributor

@joshlarson joshlarson Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style nit: This feels like a new variant, not a separate attribute. That is, a lined_list_item isn't going to be both variant="mode" and stop_cancelled?=true.

As a variant, the xmark icon could then be lumped into the <.lined_list_marker />, and maybe centered explicitly, rather than through CSS magic values.

I won't pretend to be certain of this, but at very large font sizes, the xmark doesn't look vertically centered, and I wonder if that's because of the magic values?

Image


attr :variant, :string,
default: "default",
Expand All @@ -93,7 +94,10 @@ defmodule DotcomWeb.RouteComponents do
<div class={"#{route_to_class(@route)} grow top"} />
<div class={"#{route_to_class(@route)} grow bottom"} />
</div>
<.lined_list_marker variant={@variant} route={@route} />
<.lined_list_marker
variant={if(@stop_cancelled?, do: "blank", else: @variant)}
route={@route}
/>
</div>
<div class="relative">
<Icon.icon
Expand All @@ -102,14 +106,19 @@ defmodule DotcomWeb.RouteComponents do
name="stop-pin"
class="h-6 w-6 absolute z-20 -left-7 -top-6"
/>
<Icon.icon
:if={@stop_cancelled?}
name="xmark"
class="size-3 absolute z-20 right-[.625rem] -top-1.5"
/>
</div>
{render_slot(@inner_block)}
</div>
"""
end

attr :route, Route, required: true
attr :variant, :string, default: "default", values: ["default", "mode", "none"]
attr :variant, :string, default: "default", values: ["blank", "default", "mode", "none"]

defp lined_list_marker(%{variant: "none"} = assigns) do
~H""
Expand Down Expand Up @@ -141,8 +150,10 @@ defmodule DotcomWeb.RouteComponents do
<div class={[
"#{route_to_class(@route)}",
"absolute top-0 bottom-0 left-0 right-0 z-20 m-auto",
"size-3.5 rounded-full rounded-full border-xs border-[#00000026]"
]} />
"size-3.5 rounded-full border-xs border-[#00000026]"
]}>
<div :if={@variant == "blank"} class="size-3 rounded-full bg-white opacity-75" />
</div>
"""
end
end
22 changes: 13 additions & 9 deletions lib/dotcom_web/live/schedule_finder_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,7 @@ defmodule DotcomWeb.ScheduleFinderLive do
alerts =
current_alerts(stop, route)
|> Enum.filter(fn %{informed_entity: %{direction_id: direction_id}} ->
direction in direction_id
Enum.any?([nil, direction], &(&1 in direction_id))
end)

assign(socket, :alerts, alerts)
Expand Down Expand Up @@ -922,16 +922,20 @@ defmodule DotcomWeb.ScheduleFinderLive do

defp other_stop(assigns) do
~H"""
<.lined_list_item route={@route} class={@class} stop_pin?={@highlight}>
<div class={["grow", @highlight && "font-bold"]}>
<.lined_list_item
route={@route}
class={@class}
stop_pin?={@highlight}
stop_cancelled?={@other_stop.cancelled?}
>
<div class={["grow", @highlight && "font-bold", @other_stop.cancelled? && "line-through"]}>
<.stop_label stop_name={@other_stop.stop_name} platform_name={@other_stop.platform_name} />
</div>
<div class={[
"ml-auto",
@highlight && "font-bold",
@other_stop.cancelled? && "line-through"
]}>
<.trip_stop_time time={@other_stop.time} />
<div class="ml-auto">
<div class={[@highlight && "font-bold", @other_stop.cancelled? && "line-through"]}>
<.trip_stop_time time={@other_stop.time} />
</div>
<div :if={@other_stop.cancelled?} class="block text-sm">{~t(Skipped)}</div>
</div>
</.lined_list_item>
"""
Expand Down
Loading