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

Improve selected options formatting

Browse Source
This commit is contained in:
Claudio Ortolina
2025-11-09 19:20:34 +00:00
parent a908c53c31
commit 871798c71a
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/search_components.ex
+5 -4
View File
@@ -27,7 +27,7 @@ defmodule MusicLibraryWeb.SearchComponents do
class={[ class={[
"p-3 rounded-lg cursor-pointer transition-colors", "p-3 rounded-lg cursor-pointer transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700", "hover:bg-zinc-50 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-500" "aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]} ]}
role="option" role="option"
{@rest} {@rest}
@@ -75,7 +75,7 @@ defmodule MusicLibraryWeb.SearchComponents do
class={[ class={[
"p-3 rounded-lg cursor-pointer transition-colors", "p-3 rounded-lg cursor-pointer transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700", "hover:bg-zinc-50 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-500" "aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]} ]}
role="option" role="option"
{@rest} {@rest}
@@ -139,7 +139,7 @@ defmodule MusicLibraryWeb.SearchComponents do
{render_slot(@inner_block)} {render_slot(@inner_block)}
</div> </div>
<div :for={action <- @actions} class="mt-3"> <div :for={action <- @actions} class="px-2 mt-3">
{render_slot(action)} {render_slot(action)}
</div> </div>
</div> </div>
@@ -160,7 +160,8 @@ defmodule MusicLibraryWeb.SearchComponents do
def view_all_button(assigns) do def view_all_button(assigns) do
~H""" ~H"""
<button <button
class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors" role="option"
class="aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
{@rest} {@rest}
> >
{gettext("View all %{count} %{target} results →", count: @count, target: @target)} {gettext("View all %{count} %{target} results →", count: @count, target: @target)}