feat(Map): Added an option to show 'Offline characters' to map admins & managers only

- updated UI layout for map settings modal

lib/wanderer_app_web/components/core_components.ex

@@ -143,15 +143,10 @@ defmodule WandererAppWeb.CoreComponents do
   def server_status(assigns) do
     ~H"""
     <div
-      class="flex flex-col p-4 items-center absolute bottom-16 left-1 gap-2 tooltip tooltip-right"
+      class="flex flex-col p-4 items-center absolute bottom-16 left-2 gap-2 tooltip tooltip-right"
       data-tip="server: Tranquility"
     >
-      <div
-        :if={@online}
-        class="absolute block w-4 h-4 rounded-full shadow-inner bg-green-500 animate-ping"
-      >
-      </div>
-      <div class={"block w-4 h-4 rounded-full shadow-inner  #{if @online, do: " bg-green-500", else: "bg-red-500"}"}>
+      <div class={"block w-2 h-2 rounded-full shadow-inner  #{if @online, do: " bg-green-500", else: "bg-red-500"}"}>
       </div>
     </div>
     """
@@ -336,6 +331,7 @@ defmodule WandererAppWeb.CoreComponents do
   """
   attr(:id, :any, default: nil)
   attr(:class, :string, default: nil)
+  attr(:wrapper_class, :string, default: nil)
   attr(:name, :any)
   attr(:label, :string, default: nil)
   attr(:prefix, :string, default: nil)
@@ -381,21 +377,62 @@ defmodule WandererAppWeb.CoreComponents do
       end)
 
     ~H"""
-    <div phx-feedback-for={@name} class="form-control mt-8">
-      <label class="label cursor-pointer gap-2">
-        <span class="label-text"><%= @label %></span>
-        <input type="hidden" name={@name} value="false" />
-        <input
-          type="checkbox"
-          id={@id}
-          name={@name}
-          value="true"
-          checked={@checked}
-          class="checkbox"
-          {@rest}
-        />
+    <div phx-feedback-for={@name} class="form-control mt-2">
+      <label class="inputContainer" for={@name}>
+        <span><%= @label %></span>
+        <div></div>
+        <div class="smallInputSwitch">
+          <div class="flex items-center">
+            <div
+              class={[
+                "checkboxRoot sizeM p-checkbox p-component",
+                classes("p-highlight": @checked)
+              ]}
+              data-p-highlight={@checked}
+              data-p-disabled="false"
+              data-pc-name="checkbox"
+              data-pc-section="root"
+            >
+              <input
+                id={@id}
+                name={@name}
+                type="checkbox"
+                class="p-checkbox-input"
+                aria-invalid="false"
+                data-pc-section="input"
+                value="true"
+                checked={@checked}
+                {@rest}
+              />
+              <div
+                class="p-checkbox-box"
+                data-p-highlight={@checked}
+                data-p-disabled="false"
+                data-pc-section="box"
+              >
+                <svg
+                  :if={@checked}
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="p-icon p-checkbox-icon"
+                  aria-hidden="true"
+                  data-pc-section="icon"
+                >
+                  <path
+                    d="M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z"
+                    fill="currentColor"
+                  >
+                  </path>
+                </svg>
+              </div>
+            </div>
+            <label for={@name} class="select-none ml-1.5"></label>
+          </div>
+        </div>
       </label>
-      <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
   end
@@ -403,24 +440,28 @@ defmodule WandererAppWeb.CoreComponents do
   def input(%{type: "range"} = assigns) do
     ~H"""
     <div phx-feedback-for={@name}>
-      <label class="form-control w-full">
+      <div class="form-control w-full">
         <.label for={@id}>
-          <span class="label-text"><%= @label %></span>
-          <span class="label-value"><%= @value %></span>
+          <span><%= @label %></span>
+          <div></div>
+          <%= @value %>
         </.label>
-        <input
-          type="range"
-          id={@id}
-          name={@name}
-          value={@value}
-          class={[
-            "p-component w-full",
-            @class,
-            @errors != [] && "border-rose-400 focus:border-rose-400"
-          ]}
-          {@rest}
-        />
-      </label>
+
+        <div>
+          <input
+            type="range"
+            id={@id}
+            name={@name}
+            value={@value}
+            class={[
+              "p-component w-full",
+              @class,
+              @errors != [] && "border-rose-400 focus:border-rose-400"
+            ]}
+            {@rest}
+          />
+        </div>
+      </div>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
@@ -428,13 +469,20 @@ defmodule WandererAppWeb.CoreComponents do
 
   def input(%{type: "select"} = assigns) do
     ~H"""
-    <div phx-feedback-for={@name}>
+    <div
+      phx-feedback-for={@name}
+      class={[
+        "inputContainer",
+        @wrapper_class
+      ]}
+    >
       <.label :if={@label} for={@id}><%= @label %></.label>
+      <div :if={@label}></div>
       <select
         id={@id}
         name={@name}
         class={[
-          "w-full",
+          "p-component",
           @class
         ]}
         multiple={@multiple}
@@ -503,9 +551,9 @@ defmodule WandererAppWeb.CoreComponents do
 
   def label(assigns) do
     ~H"""
-    <div for={@for} class="label">
+    <label for={@for} class="inputContainer">
       <%= render_slot(@inner_block) %>
-    </div>
+    </label>
     """
   end
 

lib/wanderer_app_web/components/map/map_picker.ex

@@ -48,7 +48,7 @@ defmodule WandererAppWeb.MapPicker do
             :if={maps}
             type="select"
             field={f[:map_slug]}
-            class="select h-8 min-h-[0px] !pt-1 !pb-1 text-sm bg-neutral-900"
+            class="select h-8 min-h-[10px] !pt-1 !pb-1 text-sm bg-neutral-900"
             placeholder="Select a map..."
             options={Enum.map(@maps.result, fn map -> {map.label, map.value} end)}
           />