feat(autocomplete): on mobile for trip planner, use detached experien…

…ce (#2300)
mbta · Jan 9, 2025 · 1eaca40 · 1eaca40
1 parent fdfa163
commit 1eaca40
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git 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/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",

diff --git a/assets/ts/ui/autocomplete/config.ts b/assets/ts/ui/autocomplete/config.ts
@@ -203,6 +203,7 @@ const TRIP_PLANNER = ({
 
   return {
     ...baseOptions,
+    detachedMediaQuery: "screen and (max-width: 544px)",
     initialState: {
       query: initialState()
     },

diff --git 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
           <legend class="text-charcoal-40 m-0 py-sm">{Phoenix.Naming.humanize(field)}</legend>
           <.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}>