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

Add canonical_tailwind to get correct formatting for tailwind classes

Browse Source
This commit is contained in:
Claudio Ortolina
2026-03-20 13:02:32 +00:00
parent ccc929e939
commit 47ca6fa1d2
41 changed files with 467 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/artist_live/form.ex
+7 -7
View File
@@ -48,7 +48,7 @@ defmodule MusicLibraryWeb.ArtistLive.Form do
<div class="text-center">
<.artist_image
:if={@uploads.image_data.entries == []}
class="rounded-lg mx-auto w-full"
class="mx-auto w-full rounded-lg"
artist={@artist}
image_hash={@artist_info.image_data_hash}
/>
@@ -67,7 +67,7 @@ defmodule MusicLibraryWeb.ArtistLive.Form do
for={@uploads.image_data.ref}
class={[
"relative cursor-pointer rounded-md font-semibold",
"focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2",
"focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 focus-within:outline-none",
"hover:text-zinc-200"
]}
>
@@ -126,7 +126,7 @@ defmodule MusicLibraryWeb.ArtistLive.Form do
<div
:if={@image_search_results != []}
id="image-search-results"
class="grid grid-cols-3 sm:grid-cols-4 gap-2"
class="grid grid-cols-3 gap-2 sm:grid-cols-4"
>
<button
:for={result <- @image_search_results}
@@ -139,8 +139,8 @@ defmodule MusicLibraryWeb.ArtistLive.Form do
"group relative overflow-hidden rounded-md",
"border border-zinc-200 dark:border-zinc-700",
"hover:ring-2 hover:ring-indigo-500",
"focus:outline-none focus:ring-2 focus:ring-indigo-500",
"disabled:opacity-50 disabled:cursor-not-allowed"
"focus:ring-2 focus:ring-indigo-500 focus:outline-none",
"disabled:cursor-not-allowed disabled:opacity-50"
]}
>
<img
@@ -152,8 +152,8 @@ defmodule MusicLibraryWeb.ArtistLive.Form do
<span
:if={result.width && result.height}
class={[
"absolute bottom-0 inset-x-0",
"bg-black/60 text-white text-xs text-center",
"absolute inset-x-0 bottom-0",
"bg-black/60 text-center text-xs text-white",
"py-0.5"
]}
>
lib/music_library_web/live/artist_live/show.ex
+37 -37
View File
@@ -36,10 +36,10 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
defp play_count(assigns) do
~H"""
<span :if={@play_count > 0} class="text-xs font-medium text-zinc-700 dark:text-zinc-300 grow">
<span :if={@play_count > 0} class="grow text-xs font-medium text-zinc-700 dark:text-zinc-300">
{ngettext("1 scrobble", "%{count} scrobbles", @play_count)}
</span>
<span :if={@play_count == 0} class="text-xs font-medium text-zinc-700 dark:text-zinc-300 grow">
<span :if={@play_count == 0} class="grow text-xs font-medium text-zinc-700 dark:text-zinc-300">
{gettext("No scrobbles")}
</span>
"""
@@ -52,7 +52,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
~H"""
<div class="mt-4">
<header class="flex items-baseline justify-start">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
<h2 class="text-base/5 font-semibold text-zinc-700 sm:text-lg dark:text-zinc-300">
{@title}
</h2>
</header>
@@ -69,7 +69,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
}
>
<.artist_image
class="aspect-square object-cover rounded-lg hover:shadow-lg/20"
class="aspect-square rounded-lg object-cover hover:shadow-lg/20"
artist={artist}
image_hash={artist.image_data_hash}
/>
@@ -90,7 +90,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<div class="mt-4 px-4 sm:px-6 lg:px-8">
<header class="mt-1 gap-1">
<div class="flex items-center justify-between">
<h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h1 class="text-2xl/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
{@artist.name}
<.country_flag country={@country} />
</h1>
@@ -140,7 +140,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="icon cursor-pointer text-zinc-500 dark:text-zinc-400"
aria-hidden="true"
data-slot="icon"
/>
@@ -153,7 +153,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
>
<.icon
name="hero-pencil-square"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
class="phx-click-loading:animate-bounce mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -165,7 +165,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
>
<.icon
name="hero-photo"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
class="phx-click-loading:animate-bounce mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -178,7 +178,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
>
<.icon
name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -190,7 +190,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
>
<.icon
name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -202,7 +202,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
>
<.icon
name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -221,10 +221,10 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<.loading />
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<div class="mt-4 text-sm/5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 ml-2 h-5 w-5"
class="-mt-1 mr-1 ml-2 size-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -238,24 +238,24 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
</header>
<div class="mt-4 grid md:grid-cols-10 md:gap-4">
<div class="md:col-span-3 mt-4 order-2 md:order-1">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
<div class="order-2 mt-4 md:order-1 md:col-span-3">
<h2 class="text-base/5 font-semibold text-zinc-700 sm:text-lg dark:text-zinc-300">
{gettext("Meta")}
</h2>
<.artist_image
class="w-full rounded-md shadow-sm mt-4 cursor-pointer"
class="mt-4 w-full cursor-pointer rounded-md shadow-sm"
artist={@artist}
image_hash={@artist_info.image_data_hash}
phx-click={Fluxon.open_dialog("artist-image-modal")}
/>
<.modal
id="artist-image-modal"
class="mx-auto sm:min-w-2xl max-w-sm md:max-w-3xl lg:max-w-5xl mt-8"
class="mx-auto mt-8 max-w-sm sm:min-w-2xl md:max-w-3xl lg:max-w-5xl"
placement="center"
open={false}
>
<.artist_image
class="w-full rounded-md shadow-sm mt-8"
class="mt-8 w-full rounded-md shadow-sm"
artist={@artist}
image_hash={@artist_info.image_data_hash}
/>
@@ -287,25 +287,25 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
</.button>
</div>
<%= if @biography do %>
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<dt class="mt-4 text-sm/6 font-medium text-zinc-900 dark:text-zinc-400">
{gettext("Biography")}
<.badge variant="soft" class="ml-1">{@biography.source}</.badge>
</dt>
<dd class="text-zinc-700 dark:text-zinc-300">
<p
:if={@biography.description}
class="mt-2 text-sm italic text-zinc-500 dark:text-zinc-400"
class="mt-2 text-sm text-zinc-500 italic dark:text-zinc-400"
>
{@biography.description}
</p>
<p class="mt-2 text-sm/7">{@biography.summary_html}</p>
<.link
class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
class="mt-2 block text-sm font-medium text-zinc-900 dark:text-zinc-400"
phx-click={Fluxon.open_dialog("bio")}
>
<.icon
name="hero-arrow-right-end-on-rectangle"
class="-mt-1 mr-1 h-5 w-5"
class="-mt-1 mr-1 size-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -317,19 +317,19 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
class="max-w-2xl text-zinc-700 dark:text-zinc-300"
placement="left"
>
<div class="prose prose-sm dark:prose-invert">
<div class="dark:prose-invert prose prose-sm">
{Phoenix.HTML.raw(@biography.bio_html)}
</div>
<a
:if={@biography.url}
href={@biography.url}
target="_blank"
class="mt-4 block text-sm font-medium text-zinc-900 dark:text-zinc-400 hover:text-zinc-500"
class="mt-4 block text-sm font-medium text-zinc-900 hover:text-zinc-500 dark:text-zinc-400"
>
{gettext("Read full article on Wikipedia")}
<.icon
name="hero-arrow-top-right-on-square"
class="-mt-1 ml-1 h-4 w-4"
class="-mt-1 ml-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -338,15 +338,15 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<% else %>
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
<:loading>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<div class="mt-4 text-sm/5 text-zinc-500 dark:text-zinc-400">
{gettext("Loading biography")}
</div>
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<div class="mt-4 text-sm/5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 h-5 w-5"
class="-mt-1 mr-1 size-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -355,7 +355,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
</:failed>
<dt
:if={lastfm_artist_info.bio not in [nil, ""]}
class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
class="mt-4 text-sm/6 font-medium text-zinc-900 dark:text-zinc-400"
>
{gettext("Biography")}
</dt>
@@ -365,12 +365,12 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
>
{remove_read_more_link(lastfm_artist_info.summary)}
<.link
class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
class="mt-2 block text-sm font-medium text-zinc-900 dark:text-zinc-400"
phx-click={Fluxon.open_dialog("lastfm-bio")}
>
<.icon
name="hero-arrow-right-end-on-rectangle"
class="-mt-1 mr-1 h-5 w-5"
class="-mt-1 mr-1 size-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -389,7 +389,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<% end %>
<.external_links external_links={@external_links} />
</div>
<div class="md:col-span-7 md:order-1">
<div class="md:order-1 md:col-span-7">
<.record_grid
:if={@collection_records_count > 0}
title={gettext("Collection")}
@@ -402,7 +402,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
/>
<.separator
:if={@collection_records_count > 0 && @wishlist_records_count > 0}
class="mt-8 mb-8"
class="my-8"
/>
<.record_grid
:if={@wishlist_records_count > 0}
@@ -417,22 +417,22 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<.async_result :let={similar_artists} assign={@similar_artists}>
<:loading>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<div class="mt-4 text-sm/5 text-zinc-500 dark:text-zinc-400">
{gettext("Loading similar artists")}
</div>
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<div class="mt-4 text-sm/5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 h-5 w-5"
class="-mt-1 mr-1 size-5"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Error loading similar artists")}
</div>
</:failed>
<.separator class="mt-8 mb-8" />
<.separator class="my-8" />
<.artist_grid title={gettext("Similar artists")} artists={similar_artists} />
</.async_result>
</div>
lib/music_library_web/live/collection_live/index.ex
+3 -3
View File
@@ -22,8 +22,8 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<header class="mb-2 gap-6">
<div class="my-2 flex items-center justify-between gap-6">
<.search_form query={@record_list_params.query} />
<.button_group>
<.button
@@ -46,7 +46,7 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-6">
<div class="mt-6 flex items-end justify-between gap-6">
<.button_group>
<.button
patch={order_path(@record_list_params, :purchase)}
lib/music_library_web/live/collection_live/show.ex
+18 -18
View File
@@ -31,7 +31,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="lg:grid lg:grid-cols-2 xl:grid-cols-5 mt-4 px-4 md:gap-x-4">
<div class="mt-4 px-4 md:gap-x-4 lg:grid lg:grid-cols-2 xl:grid-cols-5">
<div class="drop-shadow-sm xl:col-span-2">
<.record_cover
record={@record}
@@ -40,8 +40,8 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
</div>
<div class="xl:col-span-3">
<div class="mt-4 md:mt-0 flex justify-between items-center">
<h1 class="text-base font-medium leading-6 text-zinc-700">
<div class="mt-4 flex items-center justify-between md:mt-0">
<h1 class="text-base/6 font-medium text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
</h1>
<div class="min-w-12">
@@ -91,7 +91,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="icon cursor-pointer text-zinc-500 dark:text-zinc-400"
aria-hidden="true"
data-slot="icon"
/>
@@ -104,7 +104,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-pencil"
class="h-4 w-4 mr-1"
class="mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -117,7 +117,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-code-bracket"
class="h-4 w-4 mr-1"
class="mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -132,7 +132,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-pencil-square"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
class="phx-click-loading:animate-bounce mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -145,7 +145,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-photo"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
class="phx-click-loading:animate-bounce mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -158,7 +158,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -171,7 +171,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-sparkles"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -184,7 +184,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-sparkles"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -197,7 +197,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-paint-brush"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -213,7 +213,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
>
<.icon
name="hero-trash"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -248,7 +248,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<div class="flex justify-between space-x-2">
<span
:if={!@record.selected_release_id}
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
class="text-xs text-zinc-700 md:text-sm dark:text-zinc-300"
>
{gettext("No release selected")}
</span>
@@ -552,7 +552,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
~H"""
<div :if={@similar_records != []} class="mt-8 px-4">
<header class="flex items-baseline justify-start">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
<h2 class="text-base/5 font-semibold text-zinc-700 sm:text-lg dark:text-zinc-300">
{gettext("Similar Records")}
</h2>
<span class="ml-2 text-xs font-normal text-zinc-500 dark:text-zinc-400">
@@ -562,7 +562,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<ul
role="list"
class="mt-4 grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 sm:gap-x-6"
class="mt-4 grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-6"
>
<li
:for={%{record: record, similarity: similarity} <- @similar_records}
@@ -572,10 +572,10 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<div class="group">
<.record_cover
record={record}
class="aspect-square object-cover rounded-lg group-hover:shadow-lg/20"
class="aspect-square rounded-lg object-cover group-hover:shadow-lg/20"
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 bg-zinc-900/75 px-2 py-0.5 text-xs font-medium text-white backdrop-blur-sm">
{Float.round(100 - similarity * 100, 0)}%
</span>
</div>
lib/music_library_web/live/online_store_template_live/form.ex
+5 -5
View File
@@ -46,21 +46,21 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Form do
<.switch field={@form[:enabled]} label={gettext("Enable this template")} />
<div class="mt-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">
<div class="mt-4 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
<h4 class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
{gettext("Available Variables")}
</h4>
<div class="text-sm text-gray-600 dark:text-gray-400">
<p>
<code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{"{artist}"}</code>
<code class="rounded bg-gray-200 px-1 dark:bg-gray-700">{"{artist}"}</code>
- {gettext("Artist name(s)")}
</p>
<p>
<code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{"{title}"}</code>
<code class="rounded bg-gray-200 px-1 dark:bg-gray-700">{"{title}"}</code>
- {gettext("Record title")}
</p>
<p>
<code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{"{format}"}</code>
<code class="rounded bg-gray-200 px-1 dark:bg-gray-700">{"{format}"}</code>
- {gettext("Record format")}
</p>
</div>
lib/music_library_web/live/online_store_template_live/index.ex
+5 -5
View File
@@ -17,8 +17,8 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<header class="mb-2 gap-6">
<div class="my-2 flex items-center justify-between gap-6">
<.search_form query={@list_params.query} />
<.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
@@ -36,9 +36,9 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
>
<li
id="no-templates"
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
class="hidden rounded-lg bg-zinc-50 p-8 text-center only:block dark:bg-zinc-800"
>
<.icon name="hero-building-storefront" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
<.icon name="hero-building-storefront" class="mx-auto mb-4 size-12 text-zinc-400" />
<p class="text-zinc-600 dark:text-zinc-400">
{gettext("No online store templates found")}
</p>
@@ -74,7 +74,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="icon cursor-pointer text-zinc-500 dark:text-zinc-400"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/live/record_set_live/form.ex
+1 -1
View File
@@ -29,7 +29,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Form do
<.textarea
class={[
"w-full min-h-128 md:min-h-164 overflow-scroll font-mono"
"min-h-128 w-full overflow-scroll font-mono md:min-h-164"
]}
field={@form[:description]}
label={gettext("Description (optional)")}
lib/music_library_web/live/record_set_live/index.ex
+24 -24
View File
@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="mb-6">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<div class="my-2 flex items-center justify-between gap-6">
<.search_form query={@list_params.query} />
<.button
variant="solid"
@@ -34,7 +34,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-4">
<div class="mt-4 flex items-end justify-between gap-6">
<.button_group>
<.button
patch={order_path(@list_params, :updated_at)}
@@ -59,9 +59,9 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
<ul id="record-sets-list" class="space-y-6" phx-update="stream">
<li
id="no-record-sets"
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
class="hidden rounded-lg bg-zinc-50 p-8 text-center only:block dark:bg-zinc-800"
>
<.icon name="hero-rectangle-stack" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
<.icon name="hero-rectangle-stack" class="mx-auto mb-4 size-12 text-zinc-400" />
<p class="text-zinc-600 dark:text-zinc-400">
{gettext("No record sets yet")}
</p>
@@ -271,23 +271,23 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
~H"""
<li
id={@id}
class="bg-white dark:bg-zinc-900 rounded-md shadow-sm border-zinc-200 dark:border-zinc-700 p-4"
class="rounded-md border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
>
<div class="flex items-baseline justify-between mb-3">
<div class="mb-3 flex items-baseline justify-between">
<div class="grow">
<header class="sm:flex items-baseline justify-start">
<header class="items-baseline justify-start sm:flex">
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
<.link navigate={~p"/record-sets/#{@record_set}"} class="hover:underline">
{@record_set.name}
</.link>
</h2>
<span class="sm:ml-2 text-xs text-zinc-500 dark:text-zinc-400">
<span class="text-xs text-zinc-500 sm:ml-2 dark:text-zinc-400">
{gettext("%{collected}/%{total} records", RecordSet.count_by_status(@record_set))}
</span>
</header>
<article
:if={@record_set.description}
class="text-sm my-4 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm max-w-none"
class="dark:prose-invert prose prose-h1:text-sm prose-sm prose-zinc my-4 max-w-none text-sm"
>
{@html_description}
</article>
@@ -299,7 +299,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="size-5 cursor-pointer text-zinc-500 dark:text-zinc-400"
aria-hidden="true"
data-slot="icon"
/>
@@ -327,7 +327,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
</div>
<div
class="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-12 gap-3 pb-2"
class="grid grid-cols-3 gap-3 pb-2 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-12"
id={"record-set-#{@record_set.id}-items"}
phx-hook="SortableList"
data-set-id={@record_set.id}
@@ -338,9 +338,9 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
data-sortable-item
data-record-id={item.record.id}
class={[
"flex-none group relative",
"group relative flex-none",
is_nil(item.record.purchased_at) &&
"opacity-60 dark:opacity-40 hover:opacity-100 transition-opacity"
"opacity-60 transition-opacity hover:opacity-100 dark:opacity-40"
]}
>
<.link
@@ -349,7 +349,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
>
<MusicLibraryWeb.RecordComponents.record_cover
record={item.record}
class="rounded-lg aspect-square object-cover"
class="aspect-square rounded-lg object-cover"
width={256}
/>
</.link>
@@ -359,13 +359,13 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
>
<MusicLibraryWeb.RecordComponents.record_cover
record={item.record}
class="rounded-lg aspect-square object-cover"
class="aspect-square rounded-lg object-cover"
width={256}
/>
</.link>
<div
data-sortable-handle
class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-8 sm:size-5 cursor-grab active:cursor-grabbing"
class="absolute top-1 left-1 flex size-8 cursor-grab items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 active:cursor-grabbing sm:size-5 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75"
>
<.icon
name="hero-bars-2"
@@ -378,7 +378,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
phx-value-set-id={@record_set.id}
phx-value-record-id={item.record.id}
data-confirm={gettext("Remove this record from the set?")}
class="absolute top-1 right-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-red-100/75 dark:bg-zinc-700/50 dark:hover:bg-red-900/50 size-8 sm:size-5 cursor-pointer"
class="absolute top-1 right-1 flex size-8 cursor-pointer items-center justify-center rounded-full bg-zinc-100/50 hover:bg-red-100/75 sm:size-5 dark:bg-zinc-700/50 dark:hover:bg-red-900/50"
>
<span class="sr-only">{gettext("Remove")}</span>
<.icon
@@ -387,10 +387,10 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
aria-hidden="true"
/>
</button>
<h2 class="mt-1 text-sm leading-6 text-zinc-700">
<h2 class="mt-1 text-sm/6 text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
</h2>
<h3 class="flex font-semibold text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h3 class="flex text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
{item.record.title}
</h3>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
@@ -399,7 +399,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
<.icon
name="hero-calendar-days"
class="-mt-1 h-4 w-4"
class="-mt-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -410,17 +410,17 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
<.link
patch={~p"/record-sets/#{@record_set}/add-record"}
class={[
"flex-none aspect-square",
"aspect-square flex-none",
"border-2 border-dashed border-zinc-300 dark:border-zinc-600",
"rounded-lg flex items-center justify-center",
"flex items-center justify-center rounded-lg",
"hover:border-zinc-400 dark:hover:border-zinc-500",
"hover:bg-zinc-50 dark:hover:bg-zinc-800",
"transition-colors cursor-pointer"
"cursor-pointer transition-colors"
]}
>
<.icon
name="hero-plus"
class="h-8 w-8 text-zinc-400 dark:text-zinc-500"
class="size-8 text-zinc-400 dark:text-zinc-500"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/live/record_set_live/record_picker.ex
+10 -10
View File
@@ -15,7 +15,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
<h1 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
{@title}
</h1>
<p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
<p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
{gettext("Search your records to add a record to this set.")}
</p>
</header>
@@ -51,7 +51,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
</p>
<div :if={@collected_results != []}>
<h3 class="text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400 mb-1">
<h3 class="mb-1 text-xs font-medium tracking-wide text-zinc-500 uppercase dark:text-zinc-400">
{gettext("Collected")}
</h3>
<ul class="divide-y divide-zinc-100 dark:divide-zinc-700">
@@ -60,7 +60,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
</div>
<div :if={@wishlisted_results != []} class={[@collected_results != [] && "mt-4"]}>
<h3 class="text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400 mb-1">
<h3 class="mb-1 text-xs font-medium tracking-wide text-zinc-500 uppercase dark:text-zinc-400">
{gettext("Wishlisted")}
</h3>
<ul class="divide-y divide-zinc-100 dark:divide-zinc-700">
@@ -77,7 +77,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
<li
role="option"
class={[
"flex items-center gap-3 py-3 px-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 cursor-pointer rounded-lg",
"flex cursor-pointer items-center gap-3 rounded-lg px-2 py-3 hover:bg-zinc-50 dark:hover:bg-zinc-800",
"aria-selected:bg-zinc-100 dark:aria-selected:bg-zinc-700"
]}
phx-click="add_record"
@@ -87,18 +87,18 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
<div class="w-12 flex-none">
<MusicLibraryWeb.RecordComponents.record_cover
record={@record}
class="rounded aspect-square object-cover"
class="aspect-square rounded object-cover"
width={96}
/>
</div>
<div class="min-w-0 flex-auto">
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
<p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
{@record.title}
</p>
<p class="text-xs text-zinc-500 dark:text-zinc-400 truncate">
<p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
{Record.artist_names(@record)}
</p>
<p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
<p class="mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
{Record.format_release_date(@record.release_date)} · {format_label(@record.format)} · {type_label(
@record.type
)}
@@ -110,7 +110,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
</span>
<.icon
name="hero-banknotes"
class="h-4 w-4"
class="size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -121,7 +121,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
<div class="flex-none">
<.icon
name="hero-plus-circle"
class="h-5 w-5 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
class="size-5 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/live/record_set_live/show.ex
+14 -14
View File
@@ -29,7 +29,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="icon cursor-pointer text-zinc-500 dark:text-zinc-400"
aria-hidden="true"
data-slot="icon"
/>
@@ -57,14 +57,14 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
<article
:if={@record_set.description}
class="mt-4 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm max-w-none"
class="dark:prose-invert prose prose-h1:text-sm prose-sm prose-zinc mt-4 max-w-none"
>
{render_description(@record_set.description)}
</article>
<div class="mt-6">
<div
class="grid grid-cols-3 sm:grid-cols-6 lg:grid-cols-8 gap-4"
class="grid grid-cols-3 gap-4 sm:grid-cols-6 lg:grid-cols-8"
id="record-set-records"
phx-hook="SortableList"
>
@@ -76,7 +76,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
class={[
"group relative",
is_nil(item.record.purchased_at) &&
"opacity-60 dark:opacity-40 hover:opacity-100 transition-opacity"
"opacity-60 transition-opacity hover:opacity-100 dark:opacity-40"
]}
>
<.link
@@ -85,7 +85,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
>
<MusicLibraryWeb.RecordComponents.record_cover
record={item.record}
class="rounded-lg aspect-square object-cover"
class="aspect-square rounded-lg object-cover"
width={468}
/>
</.link>
@@ -95,13 +95,13 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
>
<MusicLibraryWeb.RecordComponents.record_cover
record={item.record}
class="rounded-lg aspect-square object-cover"
class="aspect-square rounded-lg object-cover"
width={468}
/>
</.link>
<button
data-sortable-handle
class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-8 sm:size-6 cursor-grab active:cursor-grabbing"
class="absolute top-1 left-1 flex size-8 cursor-grab items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 active:cursor-grabbing sm:size-6 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75"
>
<.icon
name="hero-bars-2"
@@ -113,7 +113,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
phx-click="remove_record"
phx-value-record-id={item.record.id}
data-confirm={gettext("Remove this record from the set?")}
class="absolute top-1 right-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-red-100/75 dark:bg-zinc-700/50 dark:hover:bg-red-900/50 size-8 sm:size-6 cursor-pointer"
class="absolute top-1 right-1 flex size-8 cursor-pointer items-center justify-center rounded-full bg-zinc-100/50 hover:bg-red-100/75 sm:size-6 dark:bg-zinc-700/50 dark:hover:bg-red-900/50"
>
<span class="sr-only">{gettext("Remove")}</span>
<.icon
@@ -122,10 +122,10 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
aria-hidden="true"
/>
</button>
<h2 class="mt-1 text-sm leading-6 text-zinc-700">
<h2 class="mt-1 text-sm/6 text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
</h2>
<h3 class="flex font-semibold text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h3 class="flex text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
{item.record.title}
</h3>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
@@ -134,7 +134,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
<.icon
name="hero-calendar-days"
class="-mt-1 h-4 w-4"
class="-mt-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -146,15 +146,15 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
class={[
"aspect-square",
"border-2 border-dashed border-zinc-300 dark:border-zinc-600",
"rounded-lg flex items-center justify-center",
"flex items-center justify-center rounded-lg",
"hover:border-zinc-400 dark:hover:border-zinc-500",
"hover:bg-zinc-50 dark:hover:bg-zinc-800",
"transition-colors cursor-pointer"
"cursor-pointer transition-colors"
]}
>
<.icon
name="hero-plus"
class="h-8 w-8 text-zinc-400 dark:text-zinc-500"
class="size-8 text-zinc-400 dark:text-zinc-500"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/live/scrobble_live/index.ex
+16 -16
View File
@@ -12,8 +12,8 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<header class="mb-2 gap-6">
<div class="my-2 flex items-center justify-between gap-6">
<.search_form query={@search_query} />
<.button :if={!@can_scrobble?} size="sm" href={LastFm.auth_url()}>
{gettext("Connect your Last.fm account")}
@@ -33,23 +33,23 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
:for={release_group <- @search_results}
phx-click="select_release_group"
phx-value-release_group_id={release_group.id}
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 cursor-pointer"
class="flex cursor-pointer justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700"
>
<div class="shrink-0 flex items-center justify-between w-full px-4">
<div class="flex w-full shrink-0 items-center justify-between px-4">
<img
class="w-20 flex-none rounded-lg mr-4"
class="mr-4 w-20 flex-none rounded-lg"
alt={release_group.title}
src={ReleaseGroupSearchResult.thumb_url(release_group)}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
/>
<div class="min-w-0 flex-auto">
<p class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
<p class="truncate text-sm/6 text-zinc-700 dark:text-zinc-400">
{release_group.artists}
</p>
<p class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<p class="mt-1 flex truncate text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
{release_group.title}
</p>
<p class="mt-1 flex items-center gap-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
<p class="mt-1 flex items-center gap-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
{Records.Record.format_release_date(release_group.release_date)}
<span>&middot;</span>
<.badge variant="soft" size="xs">{type_label(release_group.type)}</.badge>
@@ -81,7 +81,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
<li :for={release <- @releases}>
<.link
navigate={~p"/scrobble/#{release.id}"}
class="flex items-center gap-x-4 py-5 px-4 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
class="flex items-center gap-x-4 px-4 py-5 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-700"
>
<img
class="w-20 flex-none rounded-lg"
@@ -113,9 +113,9 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
<% end %>
<%= if @loading && @search_query != "" do %>
<div class="text-center py-8">
<.loading class="size-8 mx-auto text-zinc-400" />
<p class="text-zinc-600 dark:text-zinc-400 mt-2">
<div class="py-8 text-center">
<.loading class="mx-auto size-8 text-zinc-400" />
<p class="mt-2 text-zinc-600 dark:text-zinc-400">
<%= if @selected_release_group do %>
{gettext("Loading releases...")}
<% else %>
@@ -126,15 +126,15 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
<% end %>
<%= if @search_query != "" && @search_results == [] && not @loading do %>
<div class="text-center py-8">
<div class="py-8 text-center">
<.icon
name="hero-magnifying-glass"
class="h-12 w-12 mx-auto text-zinc-300 dark:text-zinc-600"
class="mx-auto size-12 text-zinc-300 dark:text-zinc-600"
/>
<p class="text-zinc-600 dark:text-zinc-400 mt-3">
<p class="mt-3 text-zinc-600 dark:text-zinc-400">
{gettext("No release groups found for \"%{query}\"", query: @search_query)}
</p>
<p class="text-sm text-zinc-500 dark:text-zinc-500 mt-1">
<p class="mt-1 text-sm text-zinc-500 dark:text-zinc-500">
{gettext("Try a different search term or check the spelling")}
</p>
</div>
lib/music_library_web/live/scrobble_live/show.ex
+5 -5
View File
@@ -31,7 +31,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
</.button>
</div>
<div class="md:flex mt-4 px-4 md:gap-x-4">
<div class="mt-4 px-4 md:flex md:gap-x-4">
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
<img
src={MusicBrainz.Release.thumb_url(@release)}
@@ -43,12 +43,12 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
</div>
<div class="grow">
<div class="mt-4 md:mt-0 flex justify-between items-center">
<h1 :if={@release.artists != []} class="text-base font-medium leading-6 text-zinc-700">
<div class="mt-4 flex items-center justify-between md:mt-0">
<h1 :if={@release.artists != []} class="text-base/6 font-medium text-zinc-700">
{@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
</h1>
</div>
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
<h2 class="mt-1 flex text-lg font-semibold text-wrap text-zinc-700 md:text-2xl dark:text-zinc-300">
{@release.title}
</h2>
@@ -73,7 +73,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
</div>
<div :if={@release.media != []} class="mt-6 space-y-4">
<div class="flex justify-between items-center">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-200">
{gettext("Tracks")}
</h3>
lib/music_library_web/live/scrobble_rules_live/index.ex
+12 -12
View File
@@ -18,8 +18,8 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<header class="mb-2 gap-6">
<div class="my-2 flex items-center justify-between gap-6">
<.search_form query={@list_params.query} />
<.button_group>
<.button
@@ -42,7 +42,7 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-6">
<div class="mt-6 flex items-end justify-between gap-6">
<.button_group>
<.button
patch={order_path(@list_params, :alphabetical)}
@@ -75,9 +75,9 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
>
<li
id="no-scrobble-rules"
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
class="hidden rounded-lg bg-zinc-50 p-8 text-center only:block dark:bg-zinc-800"
>
<.icon name="hero-beaker" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
<.icon name="hero-beaker" class="mx-auto mb-4 size-12 text-zinc-400" />
<p class="text-zinc-600 dark:text-zinc-400">
{gettext("No scrobble rules found")}
</p>
@@ -91,25 +91,25 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
<div class="min-w-0">
<div class="flex items-center gap-2">
<.type_badge type={scrobble_rule.type} />
<p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate">
<p class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">
{scrobble_rule.match_value}
</p>
</div>
<p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-1 truncate">
<p class="mt-1 truncate font-mono text-xs text-zinc-500 dark:text-zinc-400">
{scrobble_rule.target_musicbrainz_id}
</p>
<p
:if={scrobble_rule.description}
class="text-xs text-zinc-500 dark:text-zinc-400 mt-1 truncate"
class="mt-1 truncate text-xs text-zinc-500 dark:text-zinc-400"
>
{scrobble_rule.description}
</p>
<div class="flex items-center gap-1 mt-1 text-xs text-zinc-500 dark:text-zinc-400">
<.icon name="hero-clock" class="h-3.5 w-3.5" aria-hidden="true" />
<div class="mt-1 flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400">
<.icon name="hero-clock" class="size-3.5" aria-hidden="true" />
{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
</div>
</div>
<div class="flex items-center gap-2 shrink-0">
<div class="flex shrink-0 items-center gap-2">
<.status_badge enabled={scrobble_rule.enabled} />
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
<:toggle>
@@ -117,7 +117,7 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="icon cursor-pointer text-zinc-500 dark:text-zinc-400"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/live/scrobbled_tracks_live/index.ex
+13 -13
View File
@@ -22,12 +22,12 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<header class="gap-6">
<div class="mb-2 mt-2">
<div class="my-2">
<.search_form query={@track_list_params.query} />
</div>
</header>
<div class="flex items-end gap-6 mt-6 justify-between">
<div class="mt-6 flex items-end justify-between gap-6">
<.button_group>
<.button
patch={order_path(@track_list_params, :scrobbled_at)}
@@ -81,16 +81,16 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
<div class="mt-6">
<ul
class="divide-y divide-zinc-100 dark:divide-zinc-300/20 mt-5"
class="mt-5 divide-y divide-zinc-100 dark:divide-zinc-300/20"
role="list"
id="tracks"
phx-update="stream"
>
<li
id="no-scrobbled-tracks"
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
class="hidden rounded-lg bg-zinc-50 p-8 text-center only:block dark:bg-zinc-800"
>
<.icon name="hero-musical-note" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
<.icon name="hero-musical-note" class="mx-auto mb-4 size-12 text-zinc-400" />
<p class="text-zinc-600 dark:text-zinc-400">
{gettext("No scrobbled tracks found")}
</p>
@@ -108,12 +108,12 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
}} <- @streams.tracks
}
id={id}
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
class="-mx-2 flex cursor-pointer justify-between gap-x-6 px-2 py-5 hover:bg-zinc-50 md:-mx-4 md:px-4 dark:hover:bg-zinc-800"
>
<div class="flex items-center space-x-4 flex-1 min-w-0">
<div class="flex min-w-0 flex-1 items-center space-x-4">
<div class="shrink-0">
<img
class="h-12 w-12 rounded-md shadow-sm"
class="size-12 rounded-md shadow-sm"
src={track_cover_url(track, cover_hash)}
alt={track.title}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
@@ -121,18 +121,18 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
<p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
{track.title}
</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400 truncate">
<p class="truncate text-sm text-zinc-600 dark:text-zinc-400">
{track.artist.name}
</p>
<p class="text-sm text-zinc-500 dark:text-zinc-500 truncate">
<p class="truncate text-sm text-zinc-500 dark:text-zinc-500">
{track.album.title}
</p>
<time
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
>
{track.scrobbled_at_label}
</time>
@@ -161,7 +161,7 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="icon cursor-pointer text-zinc-500 dark:text-zinc-400"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/live/stats_live/index.ex
+34 -34
View File
@@ -17,7 +17,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("Records")}
</h1>
<dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
@@ -41,9 +41,9 @@ defmodule MusicLibraryWeb.StatsLive.Index do
</dl>
</div>
<div class="grid lg:grid-cols-2 gap-5">
<div class="grid gap-5 lg:grid-cols-2">
<div>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("Formats")}
</h1>
<.counters_by_category
@@ -54,7 +54,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
</div>
<div>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("Types")}
</h1>
<.counters_by_category
@@ -66,15 +66,15 @@ defmodule MusicLibraryWeb.StatsLive.Index do
</div>
<div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
<div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-2">
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
</div>
</div>
<div class="flow-root">
<div class="mt-5 flex justify-between items-center">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<div class="mt-5 flex items-center justify-between">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("Scrobble activity")}
</h1>
<.refresh_lastfm_feed_button />
@@ -99,7 +99,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
<ul
id="scrobble-activity-albums"
role="list"
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
phx-update="stream"
>
<li
@@ -118,37 +118,37 @@ defmodule MusicLibraryWeb.StatsLive.Index do
>
<div class="relative pb-4 group-last:pb-0">
<span
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
aria-hidden="true"
>
</span>
<div class="relative flex space-x-3 items-center justify-between">
<div class="flex min-w-0 justify-between space-x-4 items-center">
<div class="relative flex items-center justify-between space-x-3">
<div class="flex min-w-0 items-center justify-between space-x-4">
<img
class="h-12 w-12 rounded-md shadow-sm"
class="size-12 rounded-md shadow-sm"
src={track_or_album_cover_url(album, cover_hash)}
alt={album.metadata.title}
/>
<div>
<p
:if={!artist_id(album, artist_id)}
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
>
{album.artist.name}
</p>
<.link
:if={artist_id(album, artist_id)}
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
navigate={~p"/artists/#{artist_id(album, artist_id)}"}
>
{album.artist.name}
</.link>
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
{album.metadata.title}
</p>
<time
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
>
{album.scrobbled_at_label}
</time>
@@ -179,7 +179,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
<ul
id="scrobble-activity-tracks"
role="list"
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
phx-update="stream"
>
<li
@@ -198,40 +198,40 @@ defmodule MusicLibraryWeb.StatsLive.Index do
>
<div class="relative pb-4 group-last:pb-0">
<span
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
aria-hidden="true"
>
</span>
<div class="relative flex space-x-3 items-center justify-between">
<div class="flex min-w-0 justify-between space-x-4 items-center">
<div class="relative flex items-center justify-between space-x-3">
<div class="flex min-w-0 items-center justify-between space-x-4">
<img
class="h-12 w-12 rounded-md shadow-sm"
class="size-12 rounded-md shadow-sm"
src={track_or_album_cover_url(track, cover_hash)}
alt={track.title}
/>
<div>
<p
:if={!artist_id(track, artist_id)}
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
>
{track.artist.name}
</p>
<.link
:if={artist_id(track, artist_id)}
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
navigate={~p"/artists/#{artist_id(track, artist_id)}"}
>
{track.artist.name}
</.link>
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
{track.title}
</p>
<p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400">
<p class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
{track.album.title}
</p>
<time
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
>
{track.scrobbled_at_label}
</time>
@@ -261,10 +261,10 @@ defmodule MusicLibraryWeb.StatsLive.Index do
</.tabs>
</div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-5">
<div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-11">
<div class="lg:col-span-3">
<div class="flex justify-between items-center">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<div class="flex items-center justify-between">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("On This day")}
</h1>
<.form
@@ -287,7 +287,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
</.date_picker>
</.form>
</div>
<div class="bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
<.records_on_this_day
current_date={@current_date}
records={@records_on_this_day}
@@ -296,10 +296,10 @@ defmodule MusicLibraryWeb.StatsLive.Index do
</div>
</div>
<div class="lg:col-span-4">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
</h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
<.vertical_bar_chart
data={@records_by_artist}
width={600}
@@ -318,10 +318,10 @@ defmodule MusicLibraryWeb.StatsLive.Index do
</div>
<div class="lg:col-span-4">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
</h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
<.vertical_bar_chart
data={@records_by_genre}
width={600}
lib/music_library_web/live/stats_live/top_albums.ex
+4 -4
View File
@@ -30,18 +30,18 @@ defmodule MusicLibraryWeb.StatsLive.TopAlbums do
]}
>
<img
class="w-12 h-12 rounded-md shadow-sm object-cover"
class="size-12 rounded-md object-cover shadow-sm"
src={cover_url(album)}
alt={album.album_title}
/>
<div class="flex-1 min-w-0">
<div class="min-w-0 flex-1">
<.link
class="text-xs text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 truncate"
class="truncate text-xs text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
navigate={~p"/artists/#{album.artist_musicbrainz_id}"}
>
{album.artist_name}
</.link>
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 truncate">
<p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
{album.album_title}
</p>
</div>
lib/music_library_web/live/stats_live/top_artists.ex
+5 -5
View File
@@ -35,19 +35,19 @@ defmodule MusicLibraryWeb.StatsLive.TopArtists do
>
<.artist_image
:if={artist.musicbrainz_id != ""}
class="w-12 h-12 rounded-md shadow-sm object-cover"
class="size-12 rounded-md object-cover shadow-sm"
artist={artist}
width={96}
image_hash={artist.image_hash}
/>
<div
:if={artist.musicbrainz_id == ""}
class="w-12 h-12 rounded-md bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center"
class="flex size-12 items-center justify-center rounded-md bg-zinc-200 dark:bg-zinc-700"
>
<.icon name="hero-user" class="w-6 h-6 text-zinc-400" />
<.icon name="hero-user" class="size-6 text-zinc-400" />
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 truncate">
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
{artist.name}
</p>
</div>
lib/music_library_web/live/stats_live/top_by_period.ex
+3 -3
View File
@@ -20,7 +20,7 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
def render(assigns) do
~H"""
<div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{@title}
</h1>
<.tabs class="mt-4">
@@ -68,11 +68,11 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
</.tabs_list>
<.async_result :let={items} assign={assigns[@key]}>
<:loading>
<div class="h-182 flex items-center justify-center">
<div class="flex h-182 items-center justify-center">
<.loading />
</div>
</:loading>
<div class="mt-4 p-4 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<div class="mt-4 rounded-md bg-white p-4 shadow-sm dark:bg-zinc-800">
<div class="space-y-2">
{render_slot(@item, items)}
</div>
lib/music_library_web/live/universal_search_live/index.ex
+2 -2
View File
@@ -20,7 +20,7 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
<div class="relative">
<.icon
name="hero-magnifying-glass"
class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-zinc-400"
class="absolute top-1/2 left-3 size-5 -translate-y-1/2 transform text-zinc-400"
/>
<label for="universal-search-input" class="sr-only">Universal Search</label>
<.input
@@ -38,7 +38,7 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
<.no_results :if={@search_query != "" and @total_results == 0} query={@search_query} />
<div :if={@total_results > 0} class="max-h-148 md:max-h-164 overflow-y-auto mt-4">
<div :if={@total_results > 0} class="mt-4 max-h-148 overflow-y-auto md:max-h-164">
<.search_result_group
:if={length(@navigation_links_results) > 0}
title={gettext("Go to")}
lib/music_library_web/live/wishlist_live/index.ex
+2 -2
View File
@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<div class="my-2 flex items-center justify-between gap-6">
<.search_form query={@record_list_params.query} />
<.button
variant="solid"
@@ -34,7 +34,7 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-6">
<div class="mt-6 flex items-end justify-between gap-6">
<.button_group>
<.button
patch={order_path(@record_list_params, :insertion)}
lib/music_library_web/live/wishlist_live/show.ex
+15 -15
View File
@@ -26,7 +26,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="lg:grid lg:grid-cols-2 xl:grid-cols-5 mt-4 px-4 md:gap-x-4">
<div class="mt-4 px-4 md:gap-x-4 lg:grid lg:grid-cols-2 xl:grid-cols-5">
<div class="drop-shadow-sm xl:col-span-2">
<.record_cover
record={@record}
@@ -35,8 +35,8 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
</div>
<div class="xl:col-span-3">
<div class="mt-4 md:mt-0 flex justify-between items-center">
<h1 class="text-base font-medium leading-6 text-zinc-700">
<div class="mt-4 flex items-center justify-between md:mt-0">
<h1 class="text-base/6 font-medium text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
</h1>
<div class="min-w-12">
@@ -60,7 +60,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="icon cursor-pointer text-zinc-500 dark:text-zinc-400"
aria-hidden="true"
data-slot="icon"
/>
@@ -73,7 +73,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
>
<.icon
name="hero-code-bracket"
class="h-4 w-4 mr-1"
class="mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -88,7 +88,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
>
<.icon
name="hero-pencil-square"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
class="phx-click-loading:animate-bounce mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -101,7 +101,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
>
<.icon
name="hero-photo"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
class="phx-click-loading:animate-bounce mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -114,7 +114,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
>
<.icon
name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -127,7 +127,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
>
<.icon
name="hero-sparkles"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -144,7 +144,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
>
<.icon
name="hero-banknotes"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -157,7 +157,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
>
<.icon
name="hero-paint-brush"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -173,7 +173,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
>
<.icon
name="hero-trash"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -194,7 +194,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
<div class="flex justify-between space-x-2">
<span
:if={!@record.selected_release_id}
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
class="text-xs text-zinc-700 md:text-sm dark:text-zinc-300"
>
{gettext("No release selected")}
</span>
@@ -214,7 +214,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
<div :if={@online_store_templates != []} class="mt-4">
<details class="px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
<summary class="text-xs sm:text-sm font-medium cursor-pointer">
<summary class="cursor-pointer text-xs font-medium sm:text-sm">
{gettext("Check Online Stores")}
</summary>
<div class="mt-4 space-y-2">
@@ -238,7 +238,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
</span>
<.icon
name="hero-arrow-top-right-on-square"
class="h-3.5 w-3.5 text-zinc-400"
class="size-3.5 text-zinc-400"
aria-hidden="true"
/>
</.button>