Fix: mobile styling for campaign modal (#252)

- 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
bikebrigade · Nov 7, 2023 · d3e7fef · d3e7fef
1 parent e217861
commit d3e7fef
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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" />