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

Restyle all grid-like items to just have a shadow on hover

Browse Source
This commit is contained in:
Claudio Ortolina
2025-11-22 11:51:41 +00:00
parent b350193527
commit f297c49097
4 changed files with 14 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/record_components.ex
+2 -2
View File
@@ -230,7 +230,7 @@ defmodule MusicLibraryWeb.RecordComponents do
> >
<.record_cover <.record_cover
record={record} record={record}
class="aspect-square object-cover rounded-lg hover:opacity-85 hover:animate-pulse hover:outline-2 outline-red-500" class="aspect-square object-cover rounded-lg hover:shadow-lg/20"
width={460} width={460}
/> />
<span <span
@@ -430,7 +430,7 @@ defmodule MusicLibraryWeb.RecordComponents do
> >
<.record_cover <.record_cover
record={record} record={record}
class="aspect-square object-cover rounded-lg hover:opacity-85 hover:animate-pulse hover:outline-2 outline-red-500" class="aspect-square object-cover rounded-lg hover:shadow-lg/20"
width={300} width={300}
/> />
<span class="absolute top-2 right-2 rounded-full px-2 py-0.5 text-xs font-medium bg-zinc-900/75 text-white backdrop-blur-sm"> <span class="absolute top-2 right-2 rounded-full px-2 py-0.5 text-xs font-medium bg-zinc-900/75 text-white backdrop-blur-sm">
lib/music_library_web/live/artist_live/show.ex
+12 -18
View File
@@ -62,24 +62,18 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
> >
<li :for={artist <- @artists} class="relative"> <li :for={artist <- @artists} class="relative">
<div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100"> <div
<div class="relative"> class="relative cursor-pointer"
<.artist_image phx-click={
class="pointer-events-none aspect-square object-cover group-hover:opacity-75" JS.patch(~p"/artists/#{artist.musicbrainz_id}")
artist={artist} |> JS.dispatch("music_library:scroll_top")
image_hash={artist.image_data_hash} }
/> >
</div> <.artist_image
<button class="aspect-square object-cover rounded-lg hover:shadow-lg/20"
type="button" artist={artist}
class="absolute inset-0 focus:outline-hidden" image_hash={artist.image_data_hash}
phx-click={ />
JS.patch(~p"/artists/#{artist.musicbrainz_id}")
|> JS.dispatch("music_library:scroll_top")
}
>
<span class="sr-only">{gettext("View details")}</span>
</button>
</div> </div>
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300"> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
{artist.name} {artist.name}
priv/gettext/default.pot
-5
View File
@@ -334,11 +334,6 @@ msgstr ""
msgid "Made by" msgid "Made by"
msgstr "" msgstr ""
#: lib/music_library_web/live/artist_live/show.ex
#, elixir-autogen, elixir-format
msgid "View details"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex #: lib/music_library_web/live/artist_live/show.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Loading biography" msgid "Loading biography"
priv/gettext/en/LC_MESSAGES/default.po
-5
View File
@@ -334,11 +334,6 @@ msgstr ""
msgid "Made by" msgid "Made by"
msgstr "" msgstr ""
#: lib/music_library_web/live/artist_live/show.ex
#, elixir-autogen, elixir-format
msgid "View details"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex #: lib/music_library_web/live/artist_live/show.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Loading biography" msgid "Loading biography"