From f2e1f532bb1046673c8f4cf8781b30aafc9ecd6c Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 3 Jan 2025 13:31:05 -0500 Subject: [PATCH 1/3] fix: make any tailwind class used in important enables use of tailwind classes in modals and overlays, which aren't included in under the `.body-wrapper` --- assets/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index ba95b6f3ef..7995bb2db9 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -39,7 +39,7 @@ module.exports = { preflight: false }, blocklist: ["container", "collapse"], - important: ".body-wrapper", + important: "body", content: [ ...content, "./js/**/*.js", From 74708213ed1953c3d7ed5b5b9a49d9055bed56c8 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Fri, 3 Jan 2025 13:46:20 -0500 Subject: [PATCH 2/3] feat(autocomplete): on mobile for trip planner, use detached experience --- assets/css/_autocomplete-theme.scss | 29 +++++++++++++++++------------ assets/ts/ui/autocomplete/config.ts | 1 + 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/assets/css/_autocomplete-theme.scss b/assets/css/_autocomplete-theme.scss index 3247a98921..7ceedb5976 100644 --- a/assets/css/_autocomplete-theme.scss +++ b/assets/css/_autocomplete-theme.scss @@ -1,11 +1,12 @@ @import '@algolia/autocomplete-theme-classic'; // styles that will be used for every instance -[phx-hook='AlgoliaAutocomplete'] { +[phx-hook='AlgoliaAutocomplete'], .aa-Detached { .aa-Autocomplete { --aa-icon-color-rgb: 22, 92, 150; // $brand-primary; --aa-primary-color-rgb: 22, 92, 150; // $brand-primary; --aa-input-border-color-rgb: 22, 92, 150; + --aa-overlay-color-rgb: 22, 92, 150; // $brand-primary; } .aa-Label { @@ -24,7 +25,7 @@ order: 2; } - .aa-Form { + .aa-Form, .aa-DetachedSearchButton { border-color: rgb(var(--aa-input-border-color-rgb)); border-width: 3px; @@ -205,13 +206,6 @@ #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 { display: grid; grid-template-areas: "stack"; @@ -236,15 +230,26 @@ width: calc(var(--aa-spacing) + var(--aa-icon-size) - 1px); } - .aa-SubmitButton { + // hide default search magnifying glass icon + .aa-SubmitIcon { display: none; } + + .aa-DetachedSearchButtonIcon { + font-size: 1.25rem; + font-weight: bold; + width: calc(var(--aa-spacing) + (var(--aa-icon-size) * 0.5) - 1px); + } } -#trip-planner-input-form--from .aa-Label::before { +#trip-planner-input-form--from .aa-DetachedSearchButtonIcon::before { content: "A" } -#trip-planner-input-form--to .aa-Label::before { +#trip-planner-input-form--to .aa-DetachedSearchButtonIcon::before { content: "B" } + +.aa-DetachedOverlay .aa-InputWrapper { + padding-left: calc(var(--aa-spacing)); +} diff --git a/assets/ts/ui/autocomplete/config.ts b/assets/ts/ui/autocomplete/config.ts index 71f1f57350..5a7a053685 100644 --- a/assets/ts/ui/autocomplete/config.ts +++ b/assets/ts/ui/autocomplete/config.ts @@ -204,6 +204,7 @@ const TRIP_PLANNER = ({ return { ...baseOptions, + detachedMediaQuery: "screen and (max-width: 544px)", initialState: { query: initialState() }, From 9d5bd22bb1dec6a022cd7b7df6013438042f9236 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Tue, 7 Jan 2025 13:34:46 -0500 Subject: [PATCH 3/3] differentiate the placeholder names --- lib/dotcom_web/components/trip_planner/input_form.ex | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/dotcom_web/components/trip_planner/input_form.ex b/lib/dotcom_web/components/trip_planner/input_form.ex index 05f733695a..e735af855b 100644 --- a/lib/dotcom_web/components/trip_planner/input_form.ex +++ b/lib/dotcom_web/components/trip_planner/input_form.ex @@ -36,7 +36,7 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do {Phoenix.Naming.humanize(field)} <.algolia_autocomplete config_type="trip-planner" - placeholder="Enter a location" + placeholder={"Enter #{if(field == :from, do: "an origin", else: "a destination")} location"} id={"trip-planner-input-form--#{field}"} > <.inputs_for :let={location_f} field={f[field]} skip_hidden={true}>