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

Update colours for wishlist

Browse Source
This commit is contained in:
Claudio Ortolina
2024-10-23 21:31:13 +01:00
parent 0be8f70123
commit a91edb7949
2 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+5 -2
View File
@@ -231,8 +231,11 @@ defmodule MusicLibraryWeb.CoreComponents do
<button <button
type={@type} type={@type}
class={[ class={[
"phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3", "phx-submit-loading:opacity-75 rounded-md py-2 px-3",
"text-sm font-semibold leading-6 text-white active:text-white/80", "text-sm font-semibold leading-6 ",
"bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
"text-white active:text-white/80 dark:text-gray-900 dark:active:text-gray-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
@class @class
]} ]}
{@rest} {@rest}
lib/music_library_web/live/wishlist_live/index.html.heex
+30 -16
View File
@@ -4,7 +4,16 @@
<form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search"> <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
<input <input
type="search" type="search"
class="w-full rounded-lg text-zinc-900 border-gray-300 focus:border-zinc-400 focus:ring-0 text-sm leading-6" class={[
"relative block w-full rounded-md border-0 py-1.5",
"sm:text-sm sm:leading-6",
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
"text-gray-900 dark:text-gray-200",
"dark:bg-zinc-700",
"ring-gray-200 dark:ring-gray-400",
"placeholder:text-gray-400 dark:placeholder:text-gray-400",
"focus:ring-zinc-400 dark:focus:ring-zinc-300"
]}
id={:query} id={:query}
name={:query} name={:query}
value={@record_list_params.query} value={@record_list_params.query}
@@ -20,7 +29,7 @@
</div> </div>
</header> </header>
<p class="text-right text-base max-sm:text-xs mt-8"> <p class="text-right text-base max-sm:text-xs mt-8 text-zinc-900 dark:text-zinc-400">
<%= gettext( <%= gettext(
"Showing <b>%{visible}</b> of <b>%{total}</b> records", "Showing <b>%{visible}</b> of <b>%{total}</b> records",
%{visible: Enum.count(@streams.records), total: @record_list_params.total_entries} %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
@@ -29,11 +38,16 @@
</p> </p>
</div> </div>
<ul class="divide-y divide-gray-100" role="list" id="records" phx-update="stream"> <ul
class="divide-y divide-gray-100 dark:divide-slate-300/30 mt-5"
role="list"
id="records"
phx-update="stream"
>
<li <li
:for={{id, record} <- @streams.records} :for={{id, record} <- @streams.records}
phx-click={JS.navigate(~p"/wishlist/#{record}")} phx-click={JS.navigate(~p"/wishlist/#{record}")}
class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 px-2 -mx-2 md:px-4 md:-mx-4 rounded-lg cursor-pointer" class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
id={id} id={id}
> >
<div class="flex min-w-0 gap-x-4 items-center"> <div class="flex min-w-0 gap-x-4 items-center">
@@ -43,19 +57,19 @@
src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"} src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
/> />
<div class="min-w-0 flex-auto"> <div class="min-w-0 flex-auto">
<h1 class="text-sm leading-6 text-zinc-700"> <h1 class="text-sm leading-6">
<.link <.link
:for={artist <- record.artists} :for={artist <- record.artists}
class="hover:text-zinc-500" class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
patch={~p"/wishlist?query=mbid:#{artist.musicbrainz_id}"} patch={~p"/wishlist?query=mbid:#{artist.musicbrainz_id}"}
> >
<%= artist.name %> <%= artist.name %>
</.link> </.link>
</h1> </h1>
<h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 text-wrap"> <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<%= record.title %> <%= record.title %>
</h2> </h2>
<p class="mt-1 text-xs leading-5 text-gray-500"> <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
<%= Records.Record.format_release(record.release) %> <%= Records.Record.format_release(record.release) %>
<span class="sm:hidden"> <span class="sm:hidden">
· <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label( · <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
@@ -67,7 +81,7 @@
</div> </div>
<div class="flex shrink-0 items-center gap-x-6"> <div class="flex shrink-0 items-center gap-x-6">
<div class="hidden sm:flex sm:flex-col sm:items-end"> <div class="hidden sm:flex sm:flex-col sm:items-end">
<p class="text-xs leading-6 text-gray-900"> <p class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
<%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label( <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
record.type record.type
) %> ) %>
@@ -76,7 +90,7 @@
<div class="relative flex-none"> <div class="relative flex-none">
<button <button
type="button" type="button"
class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900" class="-m-2.5 block p-2.5 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
phx-click={toggle_actions_menu(record.id)} phx-click={toggle_actions_menu(record.id)}
@@ -106,7 +120,7 @@
<.focus_wrap <.focus_wrap
id={"actions-#{record.id}"} id={"actions-#{record.id}"}
class={[ class={[
"hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
]} ]}
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
@@ -114,7 +128,7 @@
tabindex="-1" tabindex="-1"
> >
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-gray-900 hover:bg-gray-50" class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-show"} id={"actions-#{record.id}-show"}
@@ -125,7 +139,7 @@
<a <a
href={musicbrainz_url(record)} href={musicbrainz_url(record)}
target=".blank" target=".blank"
class="block px-3 py-1 text-sm leading-6 text-gray-900 hover:bg-gray-50" class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-musicbrainz"} id={"actions-#{record.id}-musicbrainz"}
@@ -134,7 +148,7 @@
</a> </a>
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-gray-900 hover:bg-gray-50" class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-edit"} id={"actions-#{record.id}-edit"}
@@ -144,7 +158,7 @@
</.link> </.link>
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-gray-900 hover:bg-gray-50" class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-purchase"} id={"actions-#{record.id}-purchase"}
@@ -154,7 +168,7 @@
</.link> </.link>
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50" class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-delete"} id={"actions-#{record.id}-delete"}