From cf6c979bfd6f61bf4784c8ba0e0974edf7b18c73 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 27 Dec 2024 18:02:57 -0500 Subject: [PATCH 1/7] deps: update metro some more --- mix.exs | 2 +- mix.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/mix.exs b/mix.exs index 4dc704ccd5..1b4425d91f 100644 --- a/mix.exs +++ b/mix.exs @@ -106,7 +106,7 @@ defmodule DotCom.Mixfile do {:jason, "1.4.4", override: true}, {:logster, "1.1.1"}, {:mail, "0.3.1"}, - {:mbta_metro, "0.1.11"}, + {:mbta_metro, "0.1.15"}, {:mock, "0.3.8", [only: :test]}, {:mox, "1.2.0", [only: :test]}, {:nebulex, "2.6.4"}, diff --git a/mix.lock b/mix.lock index 8d11718e0d..a009c26768 100644 --- a/mix.lock +++ b/mix.lock @@ -55,7 +55,7 @@ "makeup_elixir": {:hex, :makeup_elixir, "1.0.1", "e928a4f984e795e41e3abd27bfc09f51db16ab8ba1aebdba2b3a575437efafc2", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "7284900d412a3e5cfd97fdaed4f5ed389b8f2b4cb49efc0eb3bd10e2febf9507"}, "makeup_erlang": {:hex, :makeup_erlang, "1.0.1", "c7f58c120b2b5aa5fd80d540a89fdf866ed42f1f3994e4fe189abebeab610839", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "8a89a1eeccc2d798d6ea15496a6e4870b75e014d1af514b1b71fa33134f57814"}, "makeup_html": {:hex, :makeup_html, "0.1.2", "19d4050c0978a4f1618ffe43054c0049f91fe5feeb9ae8d845b5dc79c6008ae5", [:mix], [{:makeup, "~> 1.2", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "b7fb9afedd617d167e6644a0430e49c1279764bfd3153da716d4d2459b0998c5"}, - "mbta_metro": {:hex, :mbta_metro, "0.1.11", "1ab2cfef7e80594e9f5d3d3239b16e6061cba7b09e893a3ec49c80073422c446", [:mix], [{:cva, "0.2.2", [hex: :cva, repo: "hexpm", optional: false]}, {:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: false]}, {:heroicons, "0.5.6", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "1.4.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "1.7.14", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "1.0.0-rc.6", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "0.6.4", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:timex, "3.7.11", [hex: :timex, repo: "hexpm", optional: false]}], "hexpm", "99c31966dc0322a171e3715dcbbc41b185998dc0f1ded906b0d4680f1b9ac19b"}, + "mbta_metro": {:hex, :mbta_metro, "0.1.15", "762d54352bd2699f3e2cc82e8a72bd3114e9e26bf71372c0e845e5fa453f8811", [:mix], [{:cva, "0.2.2", [hex: :cva, repo: "hexpm", optional: false]}, {:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: false]}, {:heroicons, "0.5.6", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "1.4.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "1.7.14", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "1.0.0-rc.6", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "0.6.4", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:timex, "3.7.11", [hex: :timex, repo: "hexpm", optional: false]}], "hexpm", "16ee54e682ac04aec379b42c73a9b78a16745619ca81139df8eb756a454235e6"}, "meck": {:hex, :meck, "0.9.2", "85ccbab053f1db86c7ca240e9fc718170ee5bda03810a6292b5306bf31bae5f5", [:rebar3], [], "hexpm", "81344f561357dc40a8344afa53767c32669153355b626ea9fcbc8da6b3045826"}, "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"}, "mime": {:hex, :mime, "2.0.6", "8f18486773d9b15f95f4f4f1e39b710045fa1de891fada4516559967276e4dc2", [:mix], [], "hexpm", "c9945363a6b26d747389aac3643f8e0e09d30499a138ad64fe8fd1d13d9b153e"}, From ba68fec69b655ff4cc95d8f44ef1110c5f08790d Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 27 Dec 2024 18:04:50 -0500 Subject: [PATCH 2/7] update metro pt 2 - the theme location changed - no more fieldset component from Metro, we add our own here - accordion: "contained" variant got renamed to "multiselect" --- assets/tailwind.config.js | 4 +++- .../components/trip_planner/input_form.ex | 19 ++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index f49cefe512..446943a7e7 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -3,7 +3,9 @@ const plugin = require("tailwindcss/plugin"); const { content, plugins, safelist } = require("mbta_metro"); -const { theme: tailwindTheme } = require("mbta_metro/tailwindTheme"); +const { + theme: { extend: tailwindTheme } +} = require("mbta_metro/tailwindTheme"); const moreColors = { ...tailwindTheme.colors, diff --git a/lib/dotcom_web/components/trip_planner/input_form.ex b/lib/dotcom_web/components/trip_planner/input_form.ex index 1556b72985..818ad0b0e5 100644 --- a/lib/dotcom_web/components/trip_planner/input_form.ex +++ b/lib/dotcom_web/components/trip_planner/input_form.ex @@ -32,7 +32,8 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do phx-change="input_form_change" phx-submit="input_form_submit" > -
+
+ {Phoenix.Naming.humanize(field)} <.algolia_autocomplete config_type="trip-planner" placeholder="Enter a location" @@ -52,13 +53,12 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do {msg} -
-
+ +
+ When <.input_group - legend="When" form={f} field={:datetime_type} - id="datetime_type" options={[{"Now", "now"}, {"Leave at", "leave_at"}, {"Arrive by", "arrive_by"}]} type="radio-button" class="mb-0" @@ -76,10 +76,11 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do <.error_container :for={{msg, _} <- f[:datetime].errors}> {msg} -
+
- <.fieldset id="modes" legend="Modes"> - <.accordion variant="contained"> +
+ Modes + <.accordion variant="multiselect"> <:heading> {Modes.selected_modes(input_value(f, :modes))} @@ -99,8 +100,8 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do <.error_container :for={{msg, _} <- f[:modes].errors}> {msg} -
+
<.input type="checkbox" field={f[:wheelchair]} label="Prefer accessible routes" /> <.icon type="icon-svg" name="icon-accessible-small" class="h-5 w-5" />
From 63707c92b2ec7995e86b031653be0e520d8c6e58 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 27 Dec 2024 18:05:12 -0500 Subject: [PATCH 3/7] fixup(ResultsSummary): remove unused alias, add missing clause --- lib/dotcom_web/components/trip_planner/results_summary.ex | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/dotcom_web/components/trip_planner/results_summary.ex b/lib/dotcom_web/components/trip_planner/results_summary.ex index 46fc0eec26..8ab42e8acd 100644 --- a/lib/dotcom_web/components/trip_planner/results_summary.ex +++ b/lib/dotcom_web/components/trip_planner/results_summary.ex @@ -3,8 +3,6 @@ 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 @@ -53,6 +51,8 @@ defmodule DotcomWeb.Components.TripPlanner.ResultsSummary do "Trips from #{from.changes.name} to #{to.changes.name}" end + defp submission_summary(_), do: nil + defp time_summary(%{datetime: datetime, datetime_type: datetime_type}) do preamble = if datetime_type == "arrive_by", do: "Arriving by ", else: "Leaving at " time_description = Timex.format!(datetime, "{h12}:{m}{am}") From a61737631072ff4566806df446549141a869be07 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 27 Dec 2024 18:05:57 -0500 Subject: [PATCH 4/7] more spacing and styling improvements --- assets/tailwind.config.js | 4 ++++ lib/dotcom_web/components/trip_planner/input_form.ex | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 446943a7e7..1e2f456aee 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -39,6 +39,7 @@ module.exports = { preflight: false }, blocklist: ["container", "collapse"], + important: ".body-wrapper", content: [ ...content, "./js/**/*.js", @@ -124,6 +125,9 @@ module.exports = { }, "h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6, p + h3, p + h4, p + h5, p + h6": { marginTop: theme("spacing.4") + }, + "fieldset legend": { + fontSize: "initial" } }) ) diff --git a/lib/dotcom_web/components/trip_planner/input_form.ex b/lib/dotcom_web/components/trip_planner/input_form.ex index 818ad0b0e5..df4ed87f67 100644 --- a/lib/dotcom_web/components/trip_planner/input_form.ex +++ b/lib/dotcom_web/components/trip_planner/input_form.ex @@ -22,7 +22,7 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do def input_form(assigns) do ~H""" -
+
<.form :let={f} class="md:grid md:grid-cols-2 gap-x-8 gap-y-2" @@ -61,7 +61,7 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do field={:datetime_type} options={[{"Now", "now"}, {"Leave at", "leave_at"}, {"Arrive by", "arrive_by"}]} type="radio-button" - class="mb-0" + class="w-full mb-xs" /> <.error_container :for={{msg, _} <- f[:datetime_type].errors}> {msg} @@ -100,8 +100,8 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do <.error_container :for={{msg, _} <- f[:modes].errors}> {msg} -
+
<.input type="checkbox" field={f[:wheelchair]} label="Prefer accessible routes" /> <.icon type="icon-svg" name="icon-accessible-small" class="h-5 w-5" />
From 6bf07904d86f361a9524a529696a5bf60c329378 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 27 Dec 2024 18:06:21 -0500 Subject: [PATCH 5/7] location inputs: better approach for the labels --- assets/css/_autocomplete-theme.scss | 39 ++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/assets/css/_autocomplete-theme.scss b/assets/css/_autocomplete-theme.scss index 6d77f0f6d5..3247a98921 100644 --- a/assets/css/_autocomplete-theme.scss +++ b/assets/css/_autocomplete-theme.scss @@ -205,19 +205,46 @@ #trip-planner-input-form--from, #trip-planner-input-form--to { + --aa-search-input-height: 2rem; + + .aa-Form { + border-radius: var(--border-radius-default); + padding: var(--spacing-xs); + } + .aa-InputWrapperPrefix { - order: unset; + display: grid; + grid-template-areas: "stack"; + order: 1; + width: calc(var(--aa-spacing) + var(--aa-icon-size) - 1px); + + .aa-Label, .aa-LoadingIndicator { + grid-area: stack; + } + + .aa-Label { + align-content: center; + color: $brand-primary; + font-size: 1.25rem; + font-weight: bold; + text-align: center; + } + } + + .aa-InputWrapperSuffix { + order: 3; + width: calc(var(--aa-spacing) + var(--aa-icon-size) - 1px); } .aa-SubmitButton { - user-select: none; + display: none; } } -#trip-planner-input-form--from .aa-SubmitButton { - @include fa-icon-solid($fa-var-a); +#trip-planner-input-form--from .aa-Label::before { + content: "A" } -#trip-planner-input-form--to .aa-SubmitButton { - @include fa-icon-solid($fa-var-b); +#trip-planner-input-form--to .aa-Label::before { + content: "B" } From 83ec910a82fb97f0f9993fb17cce2e60f6c771a5 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 27 Dec 2024 18:13:10 -0500 Subject: [PATCH 6/7] remove unneeded plugin since it's included with metro --- assets/tailwind.config.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 1e2f456aee..ba95b6f3ef 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -67,10 +67,6 @@ module.exports = { }, plugins: [ ...plugins(), - require("@tailwindcss/forms")({ - // don't make global styles since they conflict with ours - strategy: "class" - }), // Allows prefixing tailwind classes with LiveView classes to add rules // only when LiveView classes are applied, for example: // From 73512658a3465fc2ceb71e5c5b9b7de2cafde6e7 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 27 Dec 2024 18:13:24 -0500 Subject: [PATCH 7/7] bonus: corrected submit button style in mobile --- lib/dotcom_web/components/trip_planner/input_form.ex | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/dotcom_web/components/trip_planner/input_form.ex b/lib/dotcom_web/components/trip_planner/input_form.ex index df4ed87f67..05f733695a 100644 --- a/lib/dotcom_web/components/trip_planner/input_form.ex +++ b/lib/dotcom_web/components/trip_planner/input_form.ex @@ -106,8 +106,12 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do <.icon type="icon-svg" name="icon-accessible-small" class="h-5 w-5" />
-
- <.button type="submit" phx-disable-with="Planning your trip..."> +
+ <.button + type="submit" + phx-disable-with="Planning your trip..." + class="w-full justify-center md:w-fit" + > Get trip suggestions