From 9ff7356113d91a49d95bcdebdbed14f605848645 Mon Sep 17 00:00:00 2001
From: teesloane <tyler.sloane@testdouble.com>
Date: Mon, 30 Oct 2023 06:00:10 -0400
Subject: [PATCH 1/2] Fix: mobile styling for campaign modal

- also, shrink modal padding on mobile to have more space
- change campaign dates into a column on mobile
- change live location picker to put fields into columns on mobile
---
 .../components/live_location.ex               | 55 ++++++++++---------
 lib/bike_brigade_web/core_components.ex       |  2 +-
 .../campaign_live/form_component.html.heex    |  2 +-
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/lib/bike_brigade_web/components/live_location.ex b/lib/bike_brigade_web/components/live_location.ex
index 96d89b92..9d8c17cc 100644
--- a/lib/bike_brigade_web/components/live_location.ex
+++ b/lib/bike_brigade_web/components/live_location.ex
@@ -64,8 +64,7 @@ defmodule BikeBrigadeWeb.Components.LiveLocation do
           location = %Location{}
           changeset = Location.changeset(location)
 
-          {location, changeset
-        }
+          {location, changeset}
       end
 
     form = Phoenix.HTML.FormData.to_form(changeset, as: as)
@@ -173,8 +172,8 @@ defmodule BikeBrigadeWeb.Components.LiveLocation do
           </button>
         </div>
         <div class={"#{if !@open, do: "hidden"} my-1 edit-mode"}>
-          <div class="flex space-x-1">
-            <div class="w-1/2">
+          <div class="flex flex-col md:flex-row items-baseline space-x-1">
+            <div class="w-full md:w-1/2">
               <label class="block text-xs font-medium leading-5 text-gray-700">
                 Address
               </label>
@@ -188,30 +187,32 @@ defmodule BikeBrigadeWeb.Components.LiveLocation do
               </div>
               <%= error_tag(@form, :address, show_field: false) %>
             </div>
-            <div class="w-1/4">
-              <label class="block text-xs font-medium leading-5 text-gray-700">
-                Unit
-              </label>
-              <div class="mt-1 rounded-md shadow-sm">
-                <%= text_input(@form, :unit,
-                  phx_change: "change",
-                  phx_target: @myself,
-                  class:
-                    "block w-full px-3 py-2 placeholder-gray-400 transition duration-150 ease-in-out border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
-                ) %>
+            <div class="flex w-full md:w-1/2 items-baseline">
+              <div class="w-1/2 mr-1">
+                <label class="block text-xs font-medium leading-5 text-gray-700">
+                  Unit
+                </label>
+                <div class="mt-1 rounded-md shadow-sm">
+                  <%= text_input(@form, :unit,
+                    phx_change: "change",
+                    phx_target: @myself,
+                    class:
+                      "block w-full px-3 py-2 placeholder-gray-400 transition duration-150 ease-in-out border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+                  ) %>
+                </div>
               </div>
-            </div>
-            <div class="w-1/4">
-              <label class="block text-xs font-medium leading-5 text-gray-700">
-                Buzzer
-              </label>
-              <div class="mt-1 rounded-md shadow-sm">
-                <%= text_input(@form, :buzzer,
-                  phx_change: "change",
-                  phx_target: @myself,
-                  class:
-                    "block w-full px-3 py-2 placeholder-gray-400 transition duration-150 ease-in-out border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
-                ) %>
+              <div class="mt-2 w-1/2">
+                <label class="block text-xs font-medium leading-5 text-gray-700">
+                  Buzzer
+                </label>
+                <div class="mt-1 rounded-md shadow-sm">
+                  <%= text_input(@form, :buzzer,
+                    phx_change: "change",
+                    phx_target: @myself,
+                    class:
+                      "block w-full px-3 py-2 placeholder-gray-400 transition duration-150 ease-in-out border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+                  ) %>
+                </div>
               </div>
             </div>
           </div>
diff --git a/lib/bike_brigade_web/core_components.ex b/lib/bike_brigade_web/core_components.ex
index 6bd6bae7..a60e122b 100644
--- a/lib/bike_brigade_web/core_components.ex
+++ b/lib/bike_brigade_web/core_components.ex
@@ -718,7 +718,7 @@ defmodule BikeBrigadeWeb.CoreComponents do
               phx-window-keydown={hide_modal(@on_cancel, @id)}
               phx-key="escape"
               phx-click-away={hide_modal(@on_cancel, @id)}
-              class="relative hidden transition bg-white shadow-lg rounded-2xl p-14 shadow-zinc-700/10 ring-1 ring-zinc-700/10"
+              class="relative hidden transition bg-white shadow-lg rounded-2xl p-6 md:p-14 shadow-zinc-700/10 ring-1 ring-zinc-700/10"
             >
               <div class="absolute top-6 right-5">
                 <button
diff --git a/lib/bike_brigade_web/live/campaign_live/form_component.html.heex b/lib/bike_brigade_web/live/campaign_live/form_component.html.heex
index 675cd4e4..769be61e 100644
--- a/lib/bike_brigade_web/live/campaign_live/form_component.html.heex
+++ b/lib/bike_brigade_web/live/campaign_live/form_component.html.heex
@@ -10,7 +10,7 @@
     phx-change="validate"
     phx-submit="save"
   >
-    <div class="flex space-x-2">
+    <div class="flex flex-col space-x-0 space-y-2 md:space-y-0 md:space-x-2 md:flex-row">
       <.input type="date" field={{f, :delivery_date}} label="Delivery Date" />
       <.input type="time" field={{f, :start_time}} label="Start" />
       <.input type="time" field={{f, :end_time}} label="End" />

From 68b7782146269ff11eb1a966cf3b5e364c2af5ff Mon Sep 17 00:00:00 2001
From: teesloane <tyler.sloane@testdouble.com>
Date: Mon, 30 Oct 2023 06:37:15 -0400
Subject: [PATCH 2/2] Add: mobile improvements to `edit program`

---
 .../live/program_live/form_component.html.heex         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/lib/bike_brigade_web/live/program_live/form_component.html.heex b/lib/bike_brigade_web/live/program_live/form_component.html.heex
index d63c5231..abfcffb3 100644
--- a/lib/bike_brigade_web/live/program_live/form_component.html.heex
+++ b/lib/bike_brigade_web/live/program_live/form_component.html.heex
@@ -36,9 +36,10 @@
           </:actions>
         </.header>
 
-        <div :for={{s, i} <- Enum.with_index(inputs_for(c, :schedules))} class="flex space-x-2">
+        <div :for={{s, i} <- Enum.with_index(inputs_for(c, :schedules))} class="flex flex-col space-x-0 space-y-2 md:flex-row md:items-center md:space-y-1 md:space-x-2">
           <.input
             type="select"
+            class="mt-8"
             field={{s, :weekday}}
             options={[
               Monday: :monday,
@@ -52,17 +53,18 @@
           />
           <.input type="time" field={{s, :start_time}} />
           <.input type="time" field={{s, :end_time}} />
-          <div class="justify-center ml-auto">
+          <div class="justify-center mt-1 ml-auto">
             <.button
               color={:clear}
-              size={:xxsmall}
+              size={:xsmall}
               phx-click={JS.push("remove_schedule", value: %{index: i}, target: @myself)}
               type="button"
             >
-              <span class="sr-only">Close</span>
+              <span class="md:hidden mr-2 text-gray-700">Remove Schedule</span>
               <Heroicons.x_mark solid class="w-6 h-6" />
             </.button>
           </div>
+          <hr class="mb-2 md:hidden"/>
         </div>
       </div>