ui(TripPlanner): Fix margins, paddings, and borders for results panel

mbta · Dec 18, 2024 · d49b6d1 · d49b6d1
1 parent c8a86bf
commit d49b6d1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 35 deletions.
diff --git a/lib/dotcom_web/components/trip_planner/results.ex b/lib/dotcom_web/components/trip_planner/results.ex
@@ -12,12 +12,11 @@ defmodule DotcomWeb.Components.TripPlanner.Results do
     ~H"""
     <section class={[
       "w-full",
-      "border border-solid border-slate-400",
       @class
     ]}>
       <div
         :if={Enum.count(@results.itinerary_groups) > 0 && @results.itinerary_group_selection}
-        class="h-min w-full p-4"
+        class="h-min w-full mb-3.5"
       >
         <button type="button" phx-click="reset_itinerary_group" class="btn-link">
           <span class="flex flex-row items-center">
@@ -26,7 +25,7 @@ defmodule DotcomWeb.Components.TripPlanner.Results do
           </span>
         </button>
       </div>
-      <div :if={Enum.count(@results.itinerary_groups) > 0} class="w-full p-4 row-start-2 col-start-1">
+      <div :if={Enum.count(@results.itinerary_groups) > 0} class="w-full">
         <.itinerary_panel results={@results} />
       </div>
     </section>
@@ -35,32 +34,34 @@ defmodule DotcomWeb.Components.TripPlanner.Results do
 
   defp itinerary_panel(%{results: %{itinerary_group_selection: nil}} = assigns) do
     ~H"""
-    <div
-      :for={{%{summary: summary}, index} <- Enum.with_index(@results.itinerary_groups)}
-      class="border border-solid m-4 p-4"
-    >
+    <div class="flex flex-col gap-4">
       <div
-        :if={summary.tag}
-        class="whitespace-nowrap leading-none font-bold font-heading text-sm uppercase bg-brand-primary-darkest text-white px-3 py-2 mb-3 -ml-4 -mt-4 rounded-br-lg w-min"
+        :for={{%{summary: summary}, index} <- Enum.with_index(@results.itinerary_groups)}
+        class="border border-solid border-gray-lighter p-4"
       >
-        {summary.tag}
-      </div>
-      <.itinerary_summary summary={summary} />
-      <div class="flex justify-end items-center">
-        <div :if={Enum.count(summary.next_starts) > 0} class="grow text-sm text-grey-dark">
-          Similar trips depart at {Enum.map(
-            summary.next_starts,
-            &Timex.format!(&1, "%-I:%M", :strftime)
-          )
-          |> Enum.join(", ")}
-        </div>
-        <button
-          class="btn-link font-semibold underline"
-          phx-click="select_itinerary_group"
-          phx-value-index={index}
+        <div
+          :if={summary.tag}
+          class="whitespace-nowrap leading-none font-bold font-heading text-sm uppercase bg-brand-primary-darkest text-white px-3 py-2 mb-3 -ml-4 -mt-4 rounded-br-lg w-min"
         >
-          Details
-        </button>
+          {summary.tag}
+        </div>
+        <.itinerary_summary summary={summary} />
+        <div class="flex justify-end items-center">
+          <div :if={Enum.count(summary.next_starts) > 0} class="grow text-sm text-grey-dark">
+            Similar trips depart at {Enum.map(
+              summary.next_starts,
+              &Timex.format!(&1, "%-I:%M", :strftime)
+            )
+            |> Enum.join(", ")}
+          </div>
+          <button
+            class="btn-link font-semibold underline"
+            phx-click="select_itinerary_group"
+            phx-value-index={index}
+          >
+            Details
+          </button>
+        </div>
       </div>
     </div>
     """
@@ -76,11 +77,9 @@ defmodule DotcomWeb.Components.TripPlanner.Results do
     }
 
     ~H"""
-    <div class="mt-30">
-      <div class="border-b-[1px] border-gray-lighter">
-        <.itinerary_summary summary={@summary} />
-        <.itinerary_detail results={@results} />
-      </div>
+    <div>
+      <.itinerary_summary summary={@summary} />
+      <.itinerary_detail results={@results} />
     </div>
     """
   end

diff --git a/lib/dotcom_web/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex
@@ -67,14 +67,13 @@ defmodule DotcomWeb.Live.TripPlanner do
       <.input_form changeset={@input_form.changeset} />
       <.results_summary changeset={@input_form.changeset} results={@results} />
       <div class={[
-        "flex flex-col md:grid",
-        Enum.count(@results.itinerary_groups) > 0 && "md:grid-cols-2",
-        Enum.count(@results.itinerary_groups) == 0 && "md:grid-cols-1"
+        "flex flex-col gap-4 md:flex-row md:gap-7"
       ]}>
         <.live_component
           module={MbtaMetro.Live.Map}
           id="trip-planner-map"
           class={[
+            "md:order-last",
             "h-64 md:h-96 w-full",
             @results.itinerary_group_selection == nil && "hidden md:block",
             @results.itinerary_group_selection != nil && "block"
@@ -84,7 +83,11 @@ defmodule DotcomWeb.Live.TripPlanner do
           pins={@map.pins}
           points={@map.points}
         />
-        <.results class="row-start-1 col-start-1" results={@results} />
+        <.results
+          :if={Enum.count(@results.itinerary_groups) > 0}
+          class="md:max-w-[25rem]"
+          results={@results}
+        />
       </div>
     </div>
     """