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

Simplify record grid markup

Browse Source
This commit is contained in:
Claudio Ortolina
2025-11-06 14:54:29 +00:00
parent ca81bdaac9
commit 794ff004d7
1 changed files with 61 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/record_components.ex
+61 -64
View File
@@ -212,7 +212,6 @@ defmodule MusicLibraryWeb.RecordComponents do
{ngettext("1 record", "%{count} records", @records_count)} {ngettext("1 record", "%{count} records", @records_count)}
</span> </span>
</header> </header>
<%!-- TODO: replace with OSS version --%>
<ul <ul
id={@id} id={@id}
phx-update="stream" phx-update="stream"
@@ -225,71 +224,69 @@ defmodule MusicLibraryWeb.RecordComponents do
]} ]}
> >
<li :for={{id, record} <- @records} id={id} class="relative"> <li :for={{id, record} <- @records} id={id} class="relative">
<div class="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 cursor-pointer"
class="relative cursor-pointer" phx-click={JS.navigate(@record_show_path.(record))}
phx-click={JS.navigate(@record_show_path.(record))} >
<.record_cover
record={record}
class="aspect-square rounded-lg hover:opacity-85"
width={460}
/>
<span
:if={Records.Record.included_release_groups_count(record) > 0}
class={[
"absolute right-0 bottom-0 rounded-br-lg rounded-tl-lg px-2",
"text-sm font-medium",
"bg-zinc-50 dark:bg-zinc-500/10",
"text-zinc-700 dark:text-zinc-400",
"border border-zinc-600/20 dark:border-zinc-500/20"
]}
> >
<.record_cover {Records.Record.included_release_groups_count(record)}
record={record} </span>
class="aspect-square object-cover hover:opacity-85" <div class="absolute right-2 top-2 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5">
width={460} <.dropdown id={"actions-#{record.id}"} placement="bottom-end">
/> <:toggle>
<span <span class="sr-only">{gettext("Actions")}</span>
:if={Records.Record.included_release_groups_count(record) > 0} <.icon
class={[ name="hero-ellipsis-vertical"
"absolute right-0 bottom-0 rounded-br-lg rounded-tl-lg px-2", class="size-5 text-zinc-800 dark:text-zinc-400 cursor-pointer"
"text-sm font-medium", aria-hidden="true"
"bg-zinc-50 dark:bg-zinc-500/10", data-slot="icon"
"text-zinc-700 dark:text-zinc-400", phx-click={JS.toggle_class("pointer-events-none", to: "#{@id} > li")}
"border border-zinc-600/20 dark:border-zinc-500/20" phx-click-away={JS.remove_class("pointer-events-none", to: "#{@id} > li")}
]} />
> </:toggle>
{Records.Record.included_release_groups_count(record)} <.focus_wrap id={"actions-#{record.id}-focus-wrap"}>
</span> <.dropdown_link
<div class="absolute right-2 top-2 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5"> id={"actions-#{record.id}-edit"}
<.dropdown id={"actions-#{record.id}"} placement="bottom-end"> patch={@record_edit_path.(record)}
<:toggle> >
<span class="sr-only">{gettext("Actions")}</span> {gettext("Edit")}
<.icon </.dropdown_link>
name="hero-ellipsis-vertical"
class="size-5 text-zinc-800 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
phx-click={JS.toggle_class("pointer-events-none", to: "#{@id} > li")}
phx-click-away={JS.remove_class("pointer-events-none", to: "#{@id} > li")}
/>
</:toggle>
<.focus_wrap id={"actions-#{record.id}-focus-wrap"}>
<.dropdown_link
id={"actions-#{record.id}-edit"}
patch={@record_edit_path.(record)}
>
{gettext("Edit")}
</.dropdown_link>
<.dropdown_link <.dropdown_link
:if={!record.purchased_at} :if={!record.purchased_at}
id={"actions-#{record.id}-purchase"} id={"actions-#{record.id}-purchase"}
phx-click={ phx-click={
JS.dispatch("music_library:confetti") JS.dispatch("music_library:confetti")
|> JS.push("add-to-collection", value: %{id: record.id}) |> JS.push("add-to-collection", value: %{id: record.id})
} }
> >
{gettext("Purchased")} {gettext("Purchased")}
</.dropdown_link> </.dropdown_link>
<.dropdown_separator /> <.dropdown_separator />
<.dropdown_link <.dropdown_link
id={"actions-#{record.id}-delete"} id={"actions-#{record.id}-delete"}
phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")} phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
data-confirm={gettext("Are you sure?")} data-confirm={gettext("Are you sure?")}
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!" class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
> >
{gettext("Delete")} {gettext("Delete")}
</.dropdown_link> </.dropdown_link>
</.focus_wrap> </.focus_wrap>
</.dropdown> </.dropdown>
</div>
</div> </div>
</div> </div>
<div class="mt-2"> <div class="mt-2">