cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve markup for color inputs

Browse Source
This commit is contained in:
Claudio Ortolina
2025-07-12 17:37:38 +01:00
parent 06a3e2c54e
commit b598a179fc
1 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/form_component.ex
+18 -20
View File
@@ -59,27 +59,25 @@ defmodule MusicLibraryWeb.FormComponent do
/> />
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<fieldset> <.label for="dominant_colors">
<legend class="text-sm font-medium leading-6 text-zinc-700 dark:text-zinc-300"> {gettext("Dominant Colors")}
{gettext("Dominant Colors")} </.label>
</legend> <div class="mt-2 grid grid-cols-5 gap-2">
<div class="mt-2 grid grid-cols-5 gap-2"> <div
<div :for={{color, index} <- Enum.with_index(@form[:dominant_colors].value, 0)}
:for={{color, index} <- Enum.with_index(@form[:dominant_colors].value, 0)} class="flex flex-col items-center"
class="flex flex-col items-center" >
> <input
<input type="color"
type="color" name={"record[dominant_colors][#{index}]"}
name={"record[dominant_colors][#{index}]"} value={color}
value={color} class="size-8 rounded border border-zinc-300 cursor-pointer"
class="size-8 rounded border border-zinc-300 cursor-pointer" />
/> <span class="text-xs mt-1 text-zinc-600 dark:text-zinc-400">
<span class="text-xs mt-1 text-zinc-600 dark:text-zinc-400"> {String.upcase(color)}
{String.upcase(color)} </span>
</span>
</div>
</div> </div>
</fieldset> </div>
</div> </div>
<div class="col-span-full"> <div class="col-span-full">
<.label for={@uploads.cover_data.ref}> <.label for={@uploads.cover_data.ref}>