centered podiums

ryoung786 · Feb 13, 2024 · b0a958b · b0a958b
1 parent aa5b2c5
commit b0a958b
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/lib/jeopardy_web/components/components.ex b/lib/jeopardy_web/components/components.ex
@@ -26,6 +26,7 @@ defmodule JeopardyWeb.Components do
   attr :score, :integer, default: 0
   attr :lit, :boolean, default: false
   attr :signature, :string, default: nil
+  attr :aspect_ratio, :boolean, default: true
   def podium(assigns)
 
   attr :categories, :list, required: true

diff --git a/lib/jeopardy_web/components/functional_components/podium.html.heex b/lib/jeopardy_web/components/functional_components/podium.html.heex
@@ -1,5 +1,8 @@
 <div
-  class="podium grid gap-2 bg-black text-neutral-100 h-full p-1 aspect-[3/5] text-shadow grid-rows-[28%_1fr]"
+  class={[
+    "podium grid gap-2 bg-black text-neutral-100 h-full p-1 text-shadow grid-rows-[28%_1fr]",
+    @aspect_ratio && "aspect-[3/5]"
+  ]}
   style="border: 5px solid #5f3929; border-bottom: none;"
 >
   <div

diff --git a/lib/jeopardy_web/components/tv/awaiting_players.html.heex b/lib/jeopardy_web/components/tv/awaiting_players.html.heex
@@ -76,17 +76,20 @@
     <div
       :for={name <- @players}
       id={"podium-#{String.replace(name, ~r/\s+/, "-")}"}
-      class={["relative group cursor-pointer", name not in @original_players && "hidden"]}
+      class={[
+        "relative group cursor-pointer aspect-[3/5]",
+        name not in @original_players && "hidden"
+      ]}
       phx-mounted={add_player()}
       phx-click={show_modal("remove-modal-#{name |> String.replace(~r/\s+/, "-")}")}
       phx-target={@myself}
     >
-      <button class="absolute rounded-full bg-error transition-transform -right-1 -top-1 w-4 h-4 active:scale-90 flex justify-center items-center opacity-50 group-hover:opacity-100 group-hover:scale-110">
-        <span class="text-white text-[.7rem] opacity-0 group-hover:opacity-100">
+      <button class="absolute rounded-full bg-red-600 transition-transform -right-1 -top-1 w-4 h-4 active:scale-90 flex justify-center items-center opacity-60 group-hover:opacity-100 group-hover:scale-110">
+        <span class="text-white text-[.6rem] opacity-0 group-hover:opacity-100">
           &times
         </span>
       </button>
-      <.podium name={name} signature={@signatures[name]} />
+      <.podium name={name} signature={@signatures[name]} aspect_ratio={false} />
     </div>
   </div>
 

diff --git a/lib/jeopardy_web/components/tv/selecting_trebek.html.heex b/lib/jeopardy_web/components/tv/selecting_trebek.html.heex
@@ -9,16 +9,16 @@
   >
     <div
       :for={name <- @players}
-      class="relative group cursor-pointer"
+      class="relative group cursor-pointer aspect-[3/5]"
       phx-click={show_modal("elect-modal-#{name |> String.replace(~r/\s+/, "-")}")}
       phx-target={@myself}
     >
-      <button class="absolute rounded-full bg-success transition-all -right-1 -top-1 w-4 h-4 opacity-50 grid place-content-center group-hover:opacity-100 group-hover:scale-110">
-        <span class="text-white text-[.7rem] opacity-0 group-hover:opacity-100">
+      <button class="absolute rounded-full bg-green-600 transition-all -right-1 -top-1 w-4 h-4 opacity-50 grid place-content-center group-hover:opacity-100 group-hover:scale-110">
+        <span class="text-white font-bold text-[.6rem] opacity-0 group-hover:opacity-100">
           &check;️
         </span>
       </button>
-      <.podium name={name} signature={@signatures[name]} />
+      <.podium name={name} signature={@signatures[name]} aspect_ratio={false} />
     </div>
   </div>