claude/mtg_wheel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix wheel animation and layout shift

Browse Source
This commit is contained in:
claude
2026-05-18 12:11:05 +02:00
parent dac464ba5f
commit 36f2e7e7c7
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/mtg_wheel_web/live/wheel_live.ex
+5 -5
View File
@@ -54,10 +54,10 @@ defmodule MtgWheelWeb.WheelLive do
<div class={["mt-2 rounded-2xl bg-gray-800 border border-purple-700 p-6 w-full max-w-lg text-center shadow-xl", (@result == nil || @spinning) && "invisible"]}> <div class={["mt-2 rounded-2xl bg-gray-800 border border-purple-700 p-6 w-full max-w-lg text-center shadow-xl", (@result == nil || @spinning) && "invisible"]}>
<h2 class="text-lg font-semibold text-purple-300 mb-3">Your Deck</h2> <h2 class="text-lg font-semibold text-purple-300 mb-3">Your Deck</h2>
<div class="grid grid-cols-2 gap-3 text-sm"> <div class="grid grid-cols-2 gap-3 text-sm">
<.stat label="Budget" value={@result && @result.budget} /> <.stat label="Budget" value={(@result && @result.budget) || " "} />
<.stat label="Archetype" value={@result && @result.archetype} /> <.stat label="Archetype" value={(@result && @result.archetype) || " "} />
<.stat label="Subtheme" value={@result && @result.subtheme} /> <.stat label="Subtheme" value={(@result && @result.subtheme) || " "} />
<.stat label="Colors" value={@result && @result.colors} /> <.stat label="Colors" value={(@result && @result.colors) || " "} />
</div> </div>
</div> </div>
</div> </div>
@@ -69,7 +69,7 @@ defmodule MtgWheelWeb.WheelLive do
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<span class="text-xs font-semibold uppercase tracking-widest text-gray-400"><%= @label %></span> <span class="text-xs font-semibold uppercase tracking-widest text-gray-400"><%= @label %></span>
<div class="relative w-28 h-28 rounded-full border-4 border-purple-600 overflow-hidden bg-gray-900 shadow-lg shadow-purple-950"> <div class="relative w-28 h-28 rounded-full border-4 border-purple-600 overflow-hidden bg-gray-900 shadow-lg shadow-purple-950">
<div class={["wheel-inner absolute inset-0 flex flex-col items-center", @spinning && "spinning"]}> <div class={["wheel-inner absolute top-0 left-0 right-0 flex flex-col items-center", @spinning && "spinning"]}>
<%= for _ <- 1..5 do %> <%= for _ <- 1..5 do %>
<%= for item <- @items do %> <%= for item <- @items do %>
<div class="wheel-item flex-shrink-0 w-full h-28 flex items-center justify-center text-xs font-bold text-center px-1"> <div class="wheel-item flex-shrink-0 w-full h-28 flex items-center justify-center text-xs font-bold text-center px-1">