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

Update colors for collection list and pagination

Browse Source
This commit is contained in:
Claudio Ortolina
2024-10-23 23:17:16 +01:00
parent a91edb7949
commit e2643f1801
2 changed files with 50 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/pagination.ex
+22 -7
View File
@@ -14,7 +14,7 @@ defmodule MusicLibraryWeb.Pagination do
<div
:if={@page_links.total_pages > 1}
id={@id}
class="flex items-center justify-between bg-white px-4 py-6 mb-4"
class="flex items-center justify-between bg-white dark:bg-zinc-800 px-4 py-6 mb-4"
>
<%!-- Only on smallest viewport --%>
<div class={[
@@ -24,14 +24,26 @@ defmodule MusicLibraryWeb.Pagination do
<.link
:if={@page_links.prev_page}
patch={"?" <> encode_query(page: @page_links.prev_page, page_size: @pagination_params.page_size, query: @pagination_params.query)}
class="relative inline-flex items-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50"
class={[
"relative inline-flex items-center rounded-md border",
"px-3 py-2 text-sm font-medium",
"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"
]}
>
<%= gettext("Previous") %>
</.link>
<.link
:if={@page_links.next_page}
patch={"?" <> encode_query(page: @page_links.next_page, page_size: @pagination_params.page_size, query: @pagination_params.query)}
class="relative ml-3 inline-flex items-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50"
class={[
"relative ml-3 inline-flex items-center rounded-md border",
"px-3 py-2 text-sm font-medium",
"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"
]}
>
<%= gettext("Next") %>
</.link>
@@ -90,7 +102,10 @@ defmodule MusicLibraryWeb.Pagination do
defp next_link(assigns) do
~H"""
<.link
class="relative inline-flex items-center rounded-r-md px-2 py-2 text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0"
class={[
"relative inline-flex items-center rounded-r-md px-2 py-2",
"text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0"
]}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
>
<span class="sr-only"><%= gettext("Next") %></span>
@@ -129,7 +144,7 @@ defmodule MusicLibraryWeb.Pagination do
defp separator(assigns) do
~H"""
<span class="relative hidden items-center px-4 py-2 text-sm font-semibold text-zinc-900 ring-1 ring-inset ring-zinc-300 focus:z-20 focus:outline-offset-0 md:inline-flex">
<span class="relative hidden items-center px-4 py-2 text-sm font-semibold text-zinc-900 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 focus:z-20 focus:outline-offset-0 md:inline-flex">
...
</span>
"""
@@ -142,7 +157,7 @@ defmodule MusicLibraryWeb.Pagination do
defp numbered_link(assigns) when assigns.active do
~H"""
<span class="relative z-10 inline-flex items-center first:rounded-l-md last:rounded-r-md bg-zinc-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600">
<span class="relative z-10 inline-flex items-center first:rounded-l-md last:rounded-r-md bg-zinc-600 dark:bg-zinc-300 px-4 py-2 text-sm font-semibold text-white dark:text-zinc-700 focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600">
<%= @page_number %>
</span>
"""
@@ -151,7 +166,7 @@ defmodule MusicLibraryWeb.Pagination do
defp numbered_link(assigns) do
~H"""
<.link
class="relative hidden items-center first:rounded-l-md last:rounded-r-md px-4 py-2 text-sm font-semibold text-zinc-900 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-100 focus:z-20 focus:outline-offset-0 md:inline-flex"
class="relative hidden items-center first:rounded-l-md last:rounded-r-md px-4 py-2 text-sm font-semibold text-zinc-900 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300 hover:text-zinc-500 focus:z-20 focus:outline-offset-0 md:inline-flex"
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
>
<%= @page_number %>
lib/music_library_web/live/record_live/index.html.heex
+28 -14
View File
@@ -4,7 +4,16 @@
<form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
<input
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}
name={:query}
value={@record_list_params.query}
@@ -20,7 +29,7 @@
</div>
</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(
"Showing <b>%{visible}</b> of <b>%{total}</b> records",
%{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
@@ -29,11 +38,16 @@
</p>
</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
:for={{id, record} <- @streams.records}
phx-click={JS.navigate(~p"/records/#{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}
>
<div class="flex min-w-0 gap-x-4 items-center">
@@ -46,16 +60,16 @@
<h1 class="text-sm leading-6 text-zinc-700">
<.link
: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"/records?query=mbid:#{artist.musicbrainz_id}"}
>
<%= artist.name %>
</.link>
</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 %>
</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) %>
<span class="sm:hidden">
· <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
@@ -67,7 +81,7 @@
</div>
<div class="flex shrink-0 items-center gap-x-6">
<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(
record.type
) %>
@@ -76,7 +90,7 @@
<div class="relative flex-none">
<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-haspopup="true"
phx-click={toggle_actions_menu(record.id)}
@@ -106,7 +120,7 @@
<.focus_wrap
id={"actions-#{record.id}"}
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"
aria-orientation="vertical"
@@ -114,7 +128,7 @@
tabindex="-1"
>
<.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"
tabindex="-1"
id={"actions-#{record.id}-show"}
@@ -125,7 +139,7 @@
<a
href={musicbrainz_url(record)}
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"
tabindex="-1"
id={"actions-#{record.id}-musicbrainz"}
@@ -134,7 +148,7 @@
</a>
<.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"
tabindex="-1"
id={"actions-#{record.id}-edit"}
@@ -144,7 +158,7 @@
</.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"
tabindex="-1"
id={"actions-#{record.id}-delete"}