diff --git a/assets/css/_schedule.scss b/assets/css/_schedule.scss index a2dcbd301c..fcee5bae5c 100644 --- a/assets/css/_schedule.scss +++ b/assets/css/_schedule.scss @@ -5,9 +5,9 @@ .schedule__route-name { display: inline-block; - margin-bottom: calc(#{$base-spacing} / 2); - margin-top: 1.75rem; - text-transform: uppercase; + font-size: var(--font-size-2xl); + margin-bottom: 1rem; + margin-top: 1.5rem; } .schedule-date-picker { @@ -308,6 +308,7 @@ .schedule__description { display: inline-block; + font-size: 2rem; margin-bottom: $base-spacing * 1.5; margin-top: 0; } @@ -352,15 +353,6 @@ color: $white; display: inline-block; font-weight: bold; - min-width: $base-spacing * 4; - padding: calc(#{$base-spacing} / 4) $base-spacing; + padding: calc(#{$base-spacing} / 8) calc(3 * $base-spacing / 4); text-align: center; - - @include media-breakpoint-down(xs) { - min-width: $base-spacing * 3; - } - - @include media-breakpoint-up(lg) { - min-width: $base-spacing * 5; - } } diff --git a/lib/dotcom_web/components/schedule_page/schedule_header_components.ex b/lib/dotcom_web/components/schedule_page/schedule_header_components.ex new file mode 100644 index 0000000000..2a1503c7d5 --- /dev/null +++ b/lib/dotcom_web/components/schedule_page/schedule_header_components.ex @@ -0,0 +1,66 @@ +defmodule DotcomWeb.Components.ScheduleHeaderComponents do + @moduledoc """ + Components for the shared header for the schedule pages (line, timetable, and route-level alerts pages). + """ + + use DotcomWeb, :component + + import DotcomWeb.ScheduleView, only: [route_header_text: 1] + + alias Routes.Route + + def route_header(assigns) do + ~H""" +

+
+ <.route_header_icon route={@route} /> {route_header_text(@route)} +
+

+ """ + end + + defp route_header_icon(%{route: %Route{type: route_type}} = assigns) + when route_type in [0, 1] do + ~H""" + <.header_icon name="icon-subway-default" /> + """ + end + + defp route_header_icon(%{route: %Route{type: 2}} = assigns) do + ~H""" + <.header_icon name="icon-commuter-rail-default" /> + """ + end + + defp route_header_icon(%{route: %Route{type: 3} = route} = assigns) do + if Route.silver_line?(route) do + ~H""" + <.header_icon class="mr-1" name="icon-bus-default" /> + """ + else + ~H"" + end + end + + defp route_header_icon(%{route: %Route{type: 4}} = assigns) do + ~H""" + <.header_icon class="mr-1" name="icon-ferry-default" /> + """ + end + + defp route_header_icon(assigns), do: ~H"" + + attr :class, :string, default: "" + attr :name, :string, required: true + + defp header_icon(assigns) do + ~H""" + <.icon + aria-hidden + class={"fill-current size-8 shrink-0 #{@class}"} + type="icon-svg" + name={@name} + /> + """ + end +end diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex index fc0a4a683b..d3f308caa2 100644 --- a/lib/dotcom_web/live/line_diagram_live.ex +++ b/lib/dotcom_web/live/line_diagram_live.ex @@ -11,10 +11,11 @@ defmodule DotcomWeb.LineDiagramLive do alias DotcomWeb.PartialView.{HeaderTab, HeaderTabs} + import DotcomWeb.Components.ScheduleHeaderComponents, only: [route_header: 1] + import DotcomWeb.ScheduleView, only: [ header_class: 1, - route_header_text: 1, route_header_description: 1, route_feature_badge: 1, route_tab_class: 1 @@ -105,7 +106,7 @@ defmodule DotcomWeb.LineDiagramLive do ~H"""
-

{route_header_text(@route)}

+ <.route_header route={@route} /> {route_header_description(@route)} {route_feature_badge(@route)}
{header_tabs(assigns)}
diff --git a/lib/dotcom_web/templates/schedule/_line_header.html.heex b/lib/dotcom_web/templates/schedule/_line_header.html.heex index 6b0cfb59e0..c5d740f401 100644 --- a/lib/dotcom_web/templates/schedule/_line_header.html.heex +++ b/lib/dotcom_web/templates/schedule/_line_header.html.heex @@ -1,6 +1,6 @@
-

{route_header_text(@route)}

+ {route_header_description(@route)} {route_feature_badge(@route)}