alex/cobblemon-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style upload
All checks were successful
Build and Deploy / Build & Push Image (push) Successful in 36s
Details

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-16 21:27:55 -06:00
parent 452b2ab21b
commit 4a79cc1a38
3 changed files with 31 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
lib/cobblemon_ui_web/live/pokemon_components.ex
View File

@@ -50,12 +50,13 @@ defmodule CobblemonUiWeb.PokemonComponents do
:if={!@tier}
title="Tier data not downloaded"
class={[
"inline-flex items-center justify-center font-black rounded leading-none shrink-0",
"bg-base-300/20 text-base-content/25 ring-1 ring-base-300/30",
if(@compact, do: "text-[11px] w-6 h-6", else: "text-sm w-7 h-7")
"inline-flex flex-col items-center justify-center rounded leading-none shrink-0",
"bg-base-300/20 text-base-content/25",
if(@compact, do: "w-7 h-8 px-1", else: "w-8 h-9 px-1.5")
]}
>
?
<span class={["font-black leading-none", if(@compact, do: "text-[11px]", else: "text-sm")]}>?</span>
<span class="text-[7px] font-semibold opacity-40 leading-none mt-0.5">tier</span>
</div>
<div :if={@pokemon.shiny} title="Shiny">
<.icon
@@ -100,19 +101,20 @@ defmodule CobblemonUiWeb.PokemonComponents do
target="_blank"
rel="noopener noreferrer"
class={[
"inline-flex items-center justify-center font-black rounded leading-none shrink-0 hover:scale-110 transition-transform",
if(@compact, do: "text-[11px] w-6 h-6", else: "text-sm w-7 h-7"),
"inline-flex flex-col items-center justify-center rounded leading-none shrink-0 hover:scale-110 transition-transform",
if(@compact, do: "w-7 h-8 px-1", else: "w-8 h-9 px-1.5"),
case @tier do
"S" -> "bg-red-500/20 text-red-400 ring-1 ring-red-500/30 hover:bg-red-500/30"
"A" -> "bg-orange-500/20 text-orange-400 ring-1 ring-orange-500/30 hover:bg-orange-500/30"
"B" -> "bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30 hover:bg-yellow-500/30"
"C" -> "bg-green-500/20 text-green-400 ring-1 ring-green-500/30 hover:bg-green-500/30"
"D" -> "bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30 hover:bg-blue-500/30"
_ -> "bg-base-300/30 text-base-content/40 ring-1 ring-base-300/40"
"S" -> "bg-red-500/20 text-red-400 hover:bg-red-500/30"
"A" -> "bg-orange-500/20 text-orange-400 hover:bg-orange-500/30"
"B" -> "bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30"
"C" -> "bg-green-500/20 text-green-400 hover:bg-green-500/30"
"D" -> "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
_ -> "bg-base-300/30 text-base-content/40"
end
]}
>
{@tier}
<span class={["font-black leading-none", if(@compact, do: "text-[11px]", else: "text-sm")]}>{@tier}</span>
<span class="text-[7px] font-semibold opacity-40 leading-none mt-0.5">tier</span>
</a>
"""
end