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
.formatter.exs
+2
View File
@@ -2,6 +2,8 @@
import_deps: [:error_tracker, :ecto, :ecto_sql, :oban, :oban_web, :phoenix, :phoenix_live_view],
subdirectories: ["priv/*/migrations"],
plugins: [Phoenix.LiveView.HTMLFormatter, Quokka],
attribute_formatters: %{class: CanonicalTailwind},
canonical_tailwind: [pool_size: 2],
inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"],
quokka: [
only: [
lib/music_library_web/components/add_record.ex
+7 -7
View File
@@ -56,7 +56,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
<div
:if={@release_groups_count == 0}
id="release-groups-empty"
class="flex items-center justify-center h-32 md:h-64 text-md text-zinc-500"
class="text-md flex h-32 items-center justify-center text-zinc-500 md:h-64"
>
{gettext("No results")}
</div>
@@ -72,21 +72,21 @@ defmodule MusicLibraryWeb.Components.AddRecord do
defp result(assigns) do
~H"""
<li id={@id} class="flex 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">
<h1 class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
<h1 class="truncate text-sm/6 text-zinc-700 dark:text-zinc-400">
{@release_group.artists}
</h1>
<h2 class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h2 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}
</h2>
<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">
{Records.Record.format_release_date(@release_group.release_date)} · {type_label(
@release_group.type
)}
@@ -98,7 +98,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-plus"
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"
/>
lib/music_library_web/components/barcode_scanner.ex
+12 -12
View File
@@ -22,16 +22,16 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
~H"""
<div class="min-w-72" id="barcode-scanner" phx-hook=".BarcodeScanner" phx-target={@myself}>
<header>
<h1 class="text-sm font-medium leading-6 text-zinc-700 dark:text-zinc-400">
<h1 class="text-sm/6 font-medium text-zinc-700 dark:text-zinc-400">
{gettext("Scan one or more barcodes")}
</h1>
</header>
<div class="mt-4">
<.camera_button camera={@camera} />
<video :if={!(@camera == :denied)} class="w-full hidden h-96" id="camera-preview" playsinline />
<video :if={!(@camera == :denied)} class="hidden h-96 w-full" id="camera-preview" playsinline />
</div>
<ul class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5">
<ul class="mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30">
<li
:for={scan_result <- @scan_results}
id={scan_result.number}
@@ -141,7 +141,7 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
|> JS.dispatch("camera_request", to: "#barcode-scanner")
|> JS.hide(to: "#camera-button")
}
class="relative block w-full h-96 rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center hover:border-zinc-400 outline-hidden"
class="relative block h-96 w-full rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center outline-hidden hover:border-zinc-400"
>
<svg
class="mx-auto size-12 text-zinc-400"
@@ -316,11 +316,11 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
defp barcode_not_found(assigns) do
~H"""
<div class="w-full bg-red-50 dark:bg-red-950 p-4">
<h1 class="text-sm leading-6 text-zinc-700 dark:text-zinc-400">
<div class="w-full bg-red-50 p-4 dark:bg-red-950">
<h1 class="text-sm/6 text-zinc-700 dark:text-zinc-400">
{gettext("Barcode not found")}
</h1>
<h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h2 class="mt-1 flex text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
{@number}
</h2>
</div>
@@ -333,21 +333,21 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
defp release(assigns) do
~H"""
<div class="flex items-center justify-between w-full">
<div class="flex w-full items-center justify-between">
<img
class="w-16 md:w-20 flex-none rounded-lg mr-4"
class="mr-4 w-16 flex-none rounded-lg md:w-20"
alt={@release.release_group.title}
src={ReleaseGroupSearchResult.thumb_url(@release.release_group)}
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
/>
<div class="min-w-0 flex-auto">
<h1 class="text-sm leading-6 text-zinc-700 dark:text-zinc-400">
<h1 class="text-sm/6 text-zinc-700 dark:text-zinc-400">
{@release.artists}
</h1>
<h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h2 class="mt-1 flex text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
{@release.title}
</h2>
<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">
{release_format_label(@release)} · {Records.Record.format_release_date(@release.date)} · {RecordComponents.type_label(
@release.release_group.type
)}
lib/music_library_web/components/chart_components.ex
+4 -4
View File
@@ -39,7 +39,7 @@ defmodule MusicLibraryWeb.ChartComponents do
<svg
viewBox={"0 0 #{@width} #{@height}"}
preserveAspectRatio="xMidYMid meet"
class="w-full h-full"
class="size-full"
>
<%!-- Bars and labels --%>
<%= for {datum, index} <- Enum.with_index(@data) do %>
@@ -52,7 +52,7 @@ defmodule MusicLibraryWeb.ChartComponents do
y={y + @bar_height / 2 + 4}
text-anchor="end"
class={[
"text-xs font-medium fill-zinc-500 hover:fill-zinc-700 dark:fill-zinc-400 dark:hover:fill-zinc-200",
"fill-zinc-500 text-xs font-medium hover:fill-zinc-700 dark:fill-zinc-400 dark:hover:fill-zinc-200",
@datum_click && "cursor-pointer"
]}
phx-click={@datum_click && @datum_click.(datum)}
@@ -68,7 +68,7 @@ defmodule MusicLibraryWeb.ChartComponents do
height={@bar_height}
rx="4"
class={[
"opacity-80 hover:opacity-100 transition-opacity",
"opacity-80 transition-opacity hover:opacity-100",
@color_class,
@datum_click && "cursor-pointer"
]}
@@ -82,7 +82,7 @@ defmodule MusicLibraryWeb.ChartComponents do
x={150 + bar_width + 5}
y={y + @bar_height / 2 + 4}
class={[
"text-xs font-semibold fill-zinc-500 dark:fill-zinc-400",
"fill-zinc-500 text-xs font-semibold dark:fill-zinc-400",
@datum_click && "cursor-pointer"
]}
phx-click={@datum_click && @datum_click.(datum)}
lib/music_library_web/components/chat.ex
+18 -18
View File
@@ -66,7 +66,7 @@ defmodule MusicLibraryWeb.Components.Chat do
<.sheet
id={@sheet_id}
placement="right"
class="w-md sm:min-w-lg lg:min-w-2xl flex flex-col h-full"
class="flex h-full w-md flex-col sm:min-w-lg lg:min-w-2xl"
hide_close_button
>
<%= if @view == :list do %>
@@ -99,7 +99,7 @@ defmodule MusicLibraryWeb.Components.Chat do
defp render_list_view(assigns) do
~H"""
<div class="flex items-center justify-between pb-4 border-b border-zinc-200 dark:border-zinc-700">
<div class="flex items-center justify-between border-b border-zinc-200 pb-4 dark:border-zinc-700">
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
{gettext("Chat history")}
</h2>
@@ -122,11 +122,11 @@ defmodule MusicLibraryWeb.Components.Chat do
<div class="flex-1 overflow-y-auto py-4">
<div
:if={@chats == []}
class="flex flex-col items-center justify-center h-full text-center text-zinc-500 dark:text-zinc-400"
class="flex h-full flex-col items-center justify-center text-center text-zinc-500 dark:text-zinc-400"
>
<.icon
name="hero-chat-bubble-left-right"
class="size-12 mb-4 text-zinc-300 dark:text-zinc-600"
class="mb-4 size-12 text-zinc-300 dark:text-zinc-600"
/>
<p class="text-sm font-medium">{gettext("No previous chats")}</p>
</div>
@@ -136,12 +136,12 @@ defmodule MusicLibraryWeb.Components.Chat do
phx-click="select_chat"
phx-value-id={chat.id}
phx-target={@myself}
class="w-full text-left px-3 py-3 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
class="w-full rounded-lg p-3 text-left transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800"
>
<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">
{chat.topic || gettext("Untitled")}
</p>
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
<p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
{ngettext("%{count} message", "%{count} messages", chat.message_count)} · {Calendar.strftime(
chat.updated_at,
"%b %-d, %Y"
@@ -156,7 +156,7 @@ defmodule MusicLibraryWeb.Components.Chat do
phx-value-id={chat.id}
phx-target={@myself}
aria-label={gettext("Delete chat")}
class="absolute top-3 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
class="absolute top-3 right-2 opacity-0 transition-opacity group-hover:opacity-100"
>
<.icon name="hero-trash" class="icon" />
</.button>
@@ -167,8 +167,8 @@ defmodule MusicLibraryWeb.Components.Chat do
defp render_active_view(assigns) do
~H"""
<div class="flex items-center gap-2 pb-4 border-b border-zinc-200 dark:border-zinc-700">
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 flex-1">
<div class="flex items-center gap-2 border-b border-zinc-200 pb-4 dark:border-zinc-700">
<h2 class="flex-1 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
{gettext("Chat about %{title}", title: @title)}
</h2>
<.button
@@ -203,16 +203,16 @@ defmodule MusicLibraryWeb.Components.Chat do
<div
id={"#{@id}-messages"}
class="flex-1 overflow-y-auto py-4 space-y-4"
class="flex-1 space-y-4 overflow-y-auto py-4"
phx-hook=".ScrollBottom"
>
<div
:if={@messages == [] and @current_response == ""}
class="flex flex-col items-center justify-center h-full text-center text-zinc-500 dark:text-zinc-400"
class="flex h-full flex-col items-center justify-center text-center text-zinc-500 dark:text-zinc-400"
>
<.icon
name="hero-chat-bubble-left-right"
class="size-12 mb-4 text-zinc-300 dark:text-zinc-600"
class="mb-4 size-12 text-zinc-300 dark:text-zinc-600"
/>
<p class="text-sm font-medium">{@empty_prompt}</p>
</div>
@@ -225,16 +225,16 @@ defmodule MusicLibraryWeb.Components.Chat do
]}
>
<p :if={message.role == "user"} class="whitespace-pre-wrap">{message.content}</p>
<div :if={message.role == "assistant"} class="prose prose-sm dark:prose-invert">
<div :if={message.role == "assistant"} class="dark:prose-invert prose prose-sm">
{raw(Markdown.to_html(message.content))}
</div>
</div>
<div
:if={@current_response != ""}
class="max-w-[85%] rounded-lg px-4 py-2 text-sm bg-zinc-100 dark:bg-zinc-700 text-zinc-900 dark:text-zinc-100"
class="max-w-[85%] rounded-lg bg-zinc-100 px-4 py-2 text-sm text-zinc-900 dark:bg-zinc-700 dark:text-zinc-100"
>
<div class="prose prose-sm dark:prose-invert">
<div class="dark:prose-invert prose prose-sm">
{raw(Markdown.to_html(@current_response))}
</div>
</div>
@@ -249,7 +249,7 @@ defmodule MusicLibraryWeb.Components.Chat do
<div
:if={@error}
class="max-w-[85%] rounded-lg px-4 py-2 text-sm bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300"
class="max-w-[85%] rounded-lg bg-red-50 px-4 py-2 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-300"
>
<p>{@error}</p>
<.button
@@ -265,7 +265,7 @@ defmodule MusicLibraryWeb.Components.Chat do
</div>
</div>
<div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
<div class="border-t border-zinc-200 pt-4 dark:border-zinc-700">
<form
id={"#{@id}-form"}
phx-submit="send_message"
lib/music_library_web/components/core_components.ex
+7 -7
View File
@@ -113,7 +113,7 @@ defmodule MusicLibraryWeb.CoreComponents do
def debug_data_sheet(assigns) do
~H"""
<.sheet :if={@items != []} id={@id} placement="right" class="w-md sm:min-w-lg lg:min-w-2xl">
<h2 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
<h2 class="mb-4 text-sm font-semibold text-zinc-900 dark:text-zinc-100">
{gettext("Debug data")}
</h2>
<.tabs id={"#{@id}-tabs"}>
@@ -122,11 +122,11 @@ defmodule MusicLibraryWeb.CoreComponents do
</.tabs_list>
<.tabs_panel :for={item <- @items} name={item.name} active={item == hd(@items)}>
<%= if item.type == :json do %>
<div class="mt-4 overflow-auto text-xs rounded-lg [&_pre]:p-4 [&_pre]:rounded-lg">
<div class="mt-4 overflow-auto rounded-lg text-xs [&_pre]:rounded-lg [&_pre]:p-4">
{format_debug_data(item)}
</div>
<% else %>
<pre class="mt-4 overflow-auto text-xs font-mono text-zinc-700 dark:text-zinc-300 bg-zinc-50 dark:bg-zinc-800 rounded-lg p-4"><code>{format_debug_data(item)}</code></pre>
<pre class="mt-4 overflow-auto rounded-lg bg-zinc-50 p-4 font-mono text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"><code>{format_debug_data(item)}</code></pre>
<% end %>
</.tabs_panel>
</.tabs>
@@ -160,7 +160,7 @@ defmodule MusicLibraryWeb.CoreComponents do
~H"""
<Fluxon.Components.Modal.modal
id={@id}
class="mx-auto sm:min-w-2xl max-w-sm md:max-w-3xl mt-8"
class="mx-auto mt-8 max-w-sm sm:min-w-2xl md:max-w-3xl"
placement="top"
open={@open}
on_close={@on_close}
@@ -178,7 +178,7 @@ defmodule MusicLibraryWeb.CoreComponents do
:if={@external_links != []}
class="mt-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("External Links")}
</summary>
<div class="mt-4 space-y-2">
@@ -236,10 +236,10 @@ defmodule MusicLibraryWeb.CoreComponents do
def dl_row(assigns) do
~H"""
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<dt class="text-xs/6 font-medium text-zinc-900 md:text-sm dark:text-zinc-400">
{@label}
</dt>
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<dd class="mt-1 text-xs/6 text-zinc-700 sm:col-span-2 sm:mt-0 md:text-sm dark:text-zinc-300">
{render_slot(@inner_block)}
</dd>
</div>
lib/music_library_web/components/layouts.ex
+2 -2
View File
@@ -29,7 +29,7 @@ defmodule MusicLibraryWeb.Layouts do
@current_section == @section &&
"border-red-500 text-zinc-900 dark:text-zinc-100",
@current_section !== @section &&
"border-transparent text-zinc-500 hover:border-red-300 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200 dark:hover:border-red-700"
"border-transparent text-zinc-500 hover:border-red-300 hover:text-zinc-700 dark:text-zinc-300 dark:hover:border-red-700 dark:hover:text-zinc-200"
]}
>
{render_slot(@inner_block)}
@@ -56,7 +56,7 @@ defmodule MusicLibraryWeb.Layouts do
)
]}
>
<.icon name={@icon} class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
<.icon name={@icon} class="mr-2 size-4" aria-hidden="true" data-slot="icon" />
{render_slot(@inner_block)}
</.dropdown_link>
"""
lib/music_library_web/components/layouts/app.html.heex
+12 -12
View File
@@ -1,9 +1,9 @@
<div
:if={assigns[:static_changed]}
class="bg-yellow-100 dark:bg-yellow-900 border-b border-yellow-300 dark:border-yellow-700 px-4 py-2 text-center text-sm text-yellow-700 dark:text-yellow-200"
class="border-b border-yellow-300 bg-yellow-100 px-4 py-2 text-center text-sm text-yellow-700 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-200"
>
{gettext("The application has been updated.")}
<a href="" onclick="window.location.reload()" class="underline font-medium">
<a href="" onclick="window.location.reload()" class="font-medium underline">
{gettext("Reload")}
</a>
</div>
@@ -15,7 +15,7 @@
<.nav_link route={~p"/"} section={:stats} current_section={@current_section}>
<.icon
name="hero-chart-pie"
class="max-sm:hidden h-4 w-4 mr-2"
class="mr-2 size-4 max-sm:hidden"
aria-hidden="true"
data-slot="icon"
/>
@@ -28,7 +28,7 @@
>
<.icon
name="hero-circle-stack"
class="max-sm:hidden h-4 w-4 mr-2"
class="mr-2 size-4 max-sm:hidden"
aria-hidden="true"
data-slot="icon"
/>
@@ -37,7 +37,7 @@
<.nav_link route={~p"/wishlist"} section={:wishlist} current_section={@current_section}>
<.icon
name="hero-star"
class="max-sm:hidden h-4 w-4 mr-2"
class="mr-2 size-4 max-sm:hidden"
aria-hidden="true"
data-slot="icon"
/>
@@ -50,7 +50,7 @@
>
<.icon
name="hero-rectangle-stack"
class="max-sm:hidden h-4 w-4 mr-2"
class="mr-2 size-4 max-sm:hidden"
aria-hidden="true"
data-slot="icon"
/>
@@ -67,7 +67,7 @@
<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"
/>
@@ -117,25 +117,25 @@
<.dropdown_link href={~p"/dev/dashboard"}>
<.icon
name="hero-chart-bar"
class="h-4 w-4 mr-2"
class="mr-2 size-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Live Dashboard")}
</.dropdown_link>
<.dropdown_link href={~p"/dev/oban"}>
<.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
<.icon name="hero-cog" class="mr-2 size-4" aria-hidden="true" data-slot="icon" />
{gettext("Oban")}
</.dropdown_link>
<.dropdown_link href={~p"/dev/errors"}>
<.icon name="hero-bug-ant" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
<.icon name="hero-bug-ant" class="mr-2 size-4" aria-hidden="true" data-slot="icon" />
{gettext("Errors")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/login"}>
<.icon
name="hero-arrow-left-start-on-rectangle"
class="h-4 w-4 mr-2"
class="mr-2 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -147,7 +147,7 @@
</div>
</div>
</nav>
<main class="px-4 py-4 sm:px-6 lg:px-8">
<main class="p-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-screen-2xl">
<LiveToast.toast_group
flash={@flash}
lib/music_library_web/components/layouts/root.html.heex
+5 -5
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable] scroll-smooth subpixel-antialiased">
<html lang="en" class="scroll-smooth subpixel-antialiased [scrollbar-gutter:stable]">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
@@ -39,9 +39,9 @@
<body class="bg-white dark:bg-zinc-900">
{@inner_content}
<footer class="mt-4 border-t border-slate-900/10 dark:border-slate-300/10">
<div class="mx-auto max-w-screen-2xl pb-8 px-4 sm:px-8 2xl:px-0">
<div class="pt-4 flex items-center justify-between">
<div class="flex gap-x-6 order-2">
<div class="mx-auto max-w-screen-2xl px-4 pb-8 sm:px-8 2xl:px-0">
<div class="flex items-center justify-between pt-4">
<div class="order-2 flex gap-x-6">
<a
href="https://github.com/cloud8421/music_library"
class="text-zinc-600 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-300"
@@ -56,7 +56,7 @@
</svg>
</a>
</div>
<p class="text-sm/6 text-zinc-600 dark:text-zinc-400 order-1">
<p class="order-1 text-sm/6 text-zinc-600 dark:text-zinc-400">
<span>{gettext("Made by")}</span>
<a
class="font-medium text-zinc-500 hover:border-zinc-300 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200"
lib/music_library_web/components/notes.ex
+4 -4
View File
@@ -39,10 +39,10 @@ defmodule MusicLibraryWeb.Components.Notes do
<.sheet
id={@sheet_id}
placement="right"
class="w-md sm:min-w-lg lg:min-w-2xl py-16"
class="w-md py-16 sm:min-w-lg lg:min-w-2xl"
>
<.tabs>
<.tabs_list variant="segmented" class="w-48 mx-auto md:mx-0" active_tab={@mode}>
<.tabs_list variant="segmented" class="mx-auto w-48 md:mx-0" active_tab={@mode}>
<:tab name="read" phx-click="set_mode" phx-value-mode="read" phx-target={@myself}>
{gettext("Read")}
</:tab>
@@ -51,7 +51,7 @@ defmodule MusicLibraryWeb.Components.Notes do
</:tab>
</.tabs_list>
<.tabs_panel active={@mode == "read"} name="read">
<article class="w-full mt-5 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm">
<article class="dark:prose-invert prose prose-h1:text-sm prose-sm prose-zinc mt-5 w-full">
{render_content(@form[:content].value)}
</article>
</.tabs_panel>
@@ -66,7 +66,7 @@ defmodule MusicLibraryWeb.Components.Notes 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",
@form[:content].value != @note.content &&
"border-amber-300 focus-visible:border-amber-300"
]}
lib/music_library_web/components/pagination.ex
+2 -2
View File
@@ -12,7 +12,7 @@ defmodule MusicLibraryWeb.Components.Pagination do
<div
:if={@page_links.total_pages > 1}
id={@id}
class="flex items-center justify-between px-4 py-6 mb-4"
class="mb-4 flex items-center justify-between px-4 py-6"
>
<%!-- Only on smallest viewport --%>
<div class={[
@@ -34,7 +34,7 @@ defmodule MusicLibraryWeb.Components.Pagination do
{gettext("Next")}
</.button>
</div>
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-items-center sm:justify-center">
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-center sm:justify-items-center">
<div>
<.button_group>
<.prev_link
lib/music_library_web/components/record_components.ex
+40 -40
View File
@@ -17,12 +17,12 @@ defmodule MusicLibraryWeb.RecordComponents do
<span
:if={Records.Record.included_release_groups_count(@record) > 0}
class={[
"absolute right-0 bottom-0 rounded-br-lg rounded-tl-lg",
"absolute right-0 bottom-0 rounded-tl-lg rounded-br-lg",
"font-medium",
"border border-zinc-600/20 dark:border-zinc-500/20",
@size == :sm &&
"px-1 text-xs bg-zinc-200/80 dark:bg-zinc-500/70 text-zinc-700 dark:text-zinc-200",
@size == :md && "px-2 text-sm bg-zinc-50 dark:bg-zinc-500/10 text-zinc-700 dark:text-zinc-400"
"bg-zinc-200/80 px-1 text-xs text-zinc-700 dark:bg-zinc-500/70 dark:text-zinc-200",
@size == :md && "bg-zinc-50 px-2 text-sm text-zinc-700 dark:bg-zinc-500/10 dark:text-zinc-400"
]}
>
{Records.Record.included_release_groups_count(@record)}
@@ -77,7 +77,7 @@ defmodule MusicLibraryWeb.RecordComponents do
def record_list(assigns) do
~H"""
<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="records"
phx-update="stream"
@@ -85,28 +85,28 @@ defmodule MusicLibraryWeb.RecordComponents do
<li
:for={{id, record} <- @records}
phx-click={JS.navigate(@record_show_path.(record))}
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"
id={id}
>
<div class="flex min-w-0 gap-x-4 items-center">
<div class="flex min-w-0 items-center gap-x-4">
<div class="relative w-20 flex-none">
<.record_cover record={record} width={160} />
<.release_groups_badge record={record} />
</div>
<div class="min-w-0 flex-auto">
<h1 class="text-sm leading-6 text-zinc-700">
<h1 class="text-sm/6 text-zinc-700">
<.artist_links joinphrase_class="text-xs" artists={record.artists} />
</h1>
<h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h2 class="mt-1 flex text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
{record.title}
</h2>
<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">
{Records.Record.format_release_date(record.release_date)}
<span :if={@current_date && !Records.Record.released?(record, @current_date)}>
({gettext("Unreleased")})
</span>
</p>
<p class="sm:hidden mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
<p class="mt-1 text-xs/5 text-zinc-500 sm:hidden dark:text-zinc-400">
{format_label(record.format)} · {type_label(record.type)}
<span :if={record.purchased_at}>
·
@@ -115,7 +115,7 @@ defmodule MusicLibraryWeb.RecordComponents do
</span>
<.icon
name="hero-banknotes"
class="h-4 w-4"
class="size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -126,7 +126,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<span class="sr-only">
{gettext("Wishlisted on")}
</span>
<.icon name="hero-star" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
<.icon name="hero-star" class="size-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.inserted_at)}
</span>
</p>
@@ -134,21 +134,21 @@ defmodule MusicLibraryWeb.RecordComponents do
</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-zinc-900 dark:text-zinc-300">
<p class="text-xs/6 text-zinc-900 dark:text-zinc-300">
{format_label(record.format)} · {type_label(record.type)}
</p>
<p :if={record.purchased_at} class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
<p :if={record.purchased_at} class="text-xs/6 text-zinc-900 dark:text-zinc-300">
<span class="sr-only">
{gettext("Purchased on")}
</span>
<.icon name="hero-banknotes" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
<.icon name="hero-banknotes" class="size-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.purchased_at)}
</p>
<p :if={!record.purchased_at} class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
<p :if={!record.purchased_at} class="text-xs/6 text-zinc-900 dark:text-zinc-300">
<span class="sr-only">
{gettext("Wishlisted on")}
</span>
<.icon name="hero-star" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
<.icon name="hero-star" class="size-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.inserted_at)}
</p>
</div>
@@ -162,7 +162,7 @@ defmodule MusicLibraryWeb.RecordComponents 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"
/>
@@ -172,7 +172,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}>
<.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"
/>
@@ -189,7 +189,7 @@ defmodule MusicLibraryWeb.RecordComponents 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"
/>
@@ -206,7 +206,7 @@ defmodule MusicLibraryWeb.RecordComponents 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"
/>
@@ -237,7 +237,7 @@ defmodule MusicLibraryWeb.RecordComponents do
:if={@title}
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>
<span class="ml-2 text-xs font-normal text-zinc-700 dark:text-zinc-300">
@@ -257,22 +257,22 @@ defmodule MusicLibraryWeb.RecordComponents do
>
<li :for={{id, record} <- @records} id={id} class="relative">
<div
class="relative cursor-pointer group"
class="group relative cursor-pointer"
phx-click={JS.navigate(@record_show_path.(record))}
>
<.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={460}
/>
<.release_groups_badge record={record} size={:md} />
<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">
<div class="absolute top-2 right-2 size-5 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75">
<.dropdown id={"actions-#{record.id}"} placement="bottom-end">
<:toggle>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="size-5 text-zinc-800 dark:text-zinc-200 cursor-pointer"
class="size-5 cursor-pointer text-zinc-800 dark:text-zinc-200"
aria-hidden="true"
data-slot="icon"
phx-click={JS.toggle_class("pointer-events-none", to: "#{@id} > li")}
@@ -286,7 +286,7 @@ defmodule MusicLibraryWeb.RecordComponents 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"
/>
@@ -303,7 +303,7 @@ defmodule MusicLibraryWeb.RecordComponents 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"
/>
@@ -318,7 +318,7 @@ defmodule MusicLibraryWeb.RecordComponents 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"
/>
@@ -331,7 +331,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<div class="mt-2">
<h1
:if={@display_artist_names}
class="text-sm leading-6 text-zinc-700"
class="text-sm/6 text-zinc-700"
>
<.artist_links joinphrase_class="text-xs" artists={record.artists} />
</h1>
@@ -345,7 +345,7 @@ defmodule MusicLibraryWeb.RecordComponents 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"
/>
@@ -356,7 +356,7 @@ defmodule MusicLibraryWeb.RecordComponents do
>
<.icon
name="hero-banknotes"
class="h-4 w-4"
class="size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -376,7 +376,7 @@ defmodule MusicLibraryWeb.RecordComponents do
~H"""
<div class={[
@class,
"grid grid-cols-2 w-full auto-cols-min items-center space-x-1 text-zinc-700 dark:text-zinc-300"
"grid w-full auto-cols-min grid-cols-2 items-center space-x-1 text-zinc-700 dark:text-zinc-300"
]}>
<div class="space-x-1">
<.format_badge release={@release} />
@@ -454,10 +454,10 @@ defmodule MusicLibraryWeb.RecordComponents do
def record_colors(assigns) do
~H"""
<span class="inline-flex items-end gap-0.5 w-5.5 h-3.5">
<span class="inline-flex h-3.5 w-5.5 items-end gap-0.5">
<span
:for={{color, i} <- Enum.with_index(@record.dominant_colors)}
class="w-0.75 rounded-sm animate-equalizer-bar"
class="animate-equalizer-bar w-0.75 rounded-sm"
style={"background-color: #{color}; animation-delay: #{i * -0.45}s"}
>
</span>
@@ -483,7 +483,7 @@ defmodule MusicLibraryWeb.RecordComponents do
release={release}
class={
@record.selected_release_id == release.id &&
"bg-zinc-100 outline-zinc-100 dark:bg-zinc-700 dark:outline-zinc-700 outline-4 rounded-lg"
"rounded-lg bg-zinc-100 outline-4 outline-zinc-100 dark:bg-zinc-700 dark:outline-zinc-700"
}
/>
</div>
@@ -521,7 +521,7 @@ defmodule MusicLibraryWeb.RecordComponents do
def record_title_and_metadata(assigns) do
~H"""
<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">
{@record.title}
</h2>
<p class="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
@@ -529,7 +529,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<span class="ml-1">
<.icon
name="hero-calendar-days"
class="-mt-1 h-4 w-4"
class="-mt-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -657,7 +657,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<li :for={record_set <- @record_sets} class="flex items-baseline gap-2">
<.link
navigate={~p"/record-sets/#{record_set}"}
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 hover:underline"
class="text-zinc-700 hover:text-zinc-500 hover:underline dark:text-zinc-400 dark:hover:text-zinc-300"
>
{record_set.name}
</.link>
@@ -678,7 +678,7 @@ defmodule MusicLibraryWeb.RecordComponents do
def record_timestamps(assigns) do
~H"""
<p class="mt-2 flex items-center gap-1.5 text-xs text-zinc-400 dark:text-zinc-500">
<.icon name="hero-clock" class="h-3.5 w-3.5" aria-hidden="true" />
<.icon name="hero-clock" class="size-3.5" aria-hidden="true" />
{gettext("Added %{date}", date: Records.Record.format_as_date(@record.inserted_at))}
<span>·</span>
{gettext("Updated %{date}", date: Records.Record.format_as_date(@record.updated_at))}
lib/music_library_web/components/record_form.ex
+16 -16
View File
@@ -21,10 +21,10 @@ defmodule MusicLibraryWeb.Components.RecordForm do
~H"""
<div class="w-full">
<header>
<h1 class="text-base font-medium leading-6 text-zinc-700 dark:text-zinc-300">
<h1 class="text-base/6 font-medium text-zinc-700 dark:text-zinc-300">
{Record.artist_names(@record)}
</h1>
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h2 class="mt-1 flex text-lg/5 font-semibold text-wrap text-zinc-700 md:text-2xl dark:text-zinc-300">
{@record.title}
</h2>
</header>
@@ -38,7 +38,7 @@ defmodule MusicLibraryWeb.Components.RecordForm do
phx-submit="save"
>
<.input field={@form[:title]} label={gettext("Title")} />
<div class="sm:columns-2 space-y-2">
<div class="space-y-2 sm:columns-2">
<.select field={@form[:type]} label={gettext("Type")} options={types_with_labels()} />
<.select field={@form[:format]} label={gettext("Format")} options={formats_with_labels()} />
</div>
@@ -81,7 +81,7 @@ defmodule MusicLibraryWeb.Components.RecordForm do
class="cursor-pointer"
>
{genre}
<.icon name="hero-x-mark" class="h-3.5 w-3.5" />
<.icon name="hero-x-mark" class="size-3.5" />
</.badge>
</div>
<div class="relative" id="genre-input-container" phx-hook=".GenreInput" phx-target={@myself}>
@@ -113,7 +113,7 @@ defmodule MusicLibraryWeb.Components.RecordForm do
phx-value-genre={suggestion}
phx-target={@myself}
class={[
"cursor-pointer select-none px-3 py-2 text-sm",
"cursor-pointer px-3 py-2 text-sm select-none",
"text-zinc-700 dark:text-zinc-300",
"hover:bg-zinc-100 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-100 dark:aria-selected:bg-zinc-700"
@@ -134,8 +134,8 @@ defmodule MusicLibraryWeb.Components.RecordForm do
phx-value-genre={String.downcase(String.trim(@genre_query))}
phx-target={@myself}
class={[
"cursor-pointer select-none px-3 py-2 text-sm",
"text-zinc-500 dark:text-zinc-400 italic",
"cursor-pointer px-3 py-2 text-sm select-none",
"text-zinc-500 italic dark:text-zinc-400",
"hover:bg-zinc-100 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-100 dark:aria-selected:bg-zinc-700"
]}
@@ -236,9 +236,9 @@ defmodule MusicLibraryWeb.Components.RecordForm do
type="color"
name="record[dominant_colors][]"
value={color}
class="size-12 md:size-16 rounded border border-zinc-300 cursor-pointer"
class="size-12 cursor-pointer rounded border border-zinc-300 md:size-16"
/>
<span class="text-xs md:text-sm mt-1 text-zinc-600 dark:text-zinc-400">
<span class="mt-1 text-xs text-zinc-600 md:text-sm dark:text-zinc-400">
{String.upcase(color)}
</span>
</div>
@@ -276,7 +276,7 @@ defmodule MusicLibraryWeb.Components.RecordForm do
for={@uploads.cover_data.ref}
class={[
"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"
]}
>
@@ -335,7 +335,7 @@ defmodule MusicLibraryWeb.Components.RecordForm do
<div
:if={@cover_search_results != []}
id="cover-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 <- @cover_search_results}
@@ -348,8 +348,8 @@ defmodule MusicLibraryWeb.Components.RecordForm 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
@@ -361,8 +361,8 @@ defmodule MusicLibraryWeb.Components.RecordForm 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"
]}
>
@@ -388,7 +388,7 @@ defmodule MusicLibraryWeb.Components.RecordForm do
defp release_option(assigns) do
~H"""
<div class={[
"cursor-default px-2 py-1 md:px-3 md:py-2 rounded-md",
"cursor-default rounded-md px-2 py-1 md:px-3 md:py-2",
"in-data-highlighted:bg-zinc-100 dark:in-data-highlighted:bg-zinc-600",
"[[data-highlighted]_&]:flx-focus:bg-zinc-100"
]}>
lib/music_library_web/components/release.ex
+18 -18
View File
@@ -48,8 +48,8 @@ defmodule MusicLibraryWeb.Components.Release do
placement="right"
class="min-w-xs sm:min-w-sm"
>
<div class="mt-6 flex justify-between items-center gap-4">
<label class="text-lg font-semibold text-zinc-700 dark:text-zinc-300 cursor-pointer">
<div class="mt-6 flex items-center justify-between gap-4">
<label class="cursor-pointer text-lg font-semibold text-zinc-700 dark:text-zinc-300">
<input
:if={
@can_scrobble? && @release_with_tracks.ok? &&
@@ -66,7 +66,7 @@ defmodule MusicLibraryWeb.Components.Release do
phx-click="toggle_medium"
phx-value-medium-number={1}
phx-target={@myself}
class="w-4 h-4 mr-2 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
class="mr-2 size-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
/>
{gettext("Tracks")}
</label>
@@ -104,19 +104,19 @@ defmodule MusicLibraryWeb.Components.Release do
</.button_group>
</div>
<div :if={@release_with_tracks} class="space-y-4 mt-4">
<div :if={@release_with_tracks} class="mt-4 space-y-4">
<.async_result :let={release_with_tracks} assign={@release_with_tracks}>
<:loading>
<div class="flex items-center justify-center mt-48">
<div class="mt-48 flex items-center justify-center">
<span class="sr-only">{gettext("Loading release with tracks")}</span>
<.loading />
</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="h-5 w-5"
class="size-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -125,7 +125,7 @@ defmodule MusicLibraryWeb.Components.Release do
variant="ghost"
size="xs"
phx-click={JS.push("load_release_tracks", target: @myself)}
class="ml-2 cursor-pointer"
class="ml-2 cursor-pointer"
>
{gettext("Retry")}
</.button>
@@ -162,9 +162,9 @@ defmodule MusicLibraryWeb.Components.Release do
~H"""
<div
:if={@media_count > 1}
class="flex justify-between items-center gap-4"
class="flex items-center justify-between gap-4"
>
<label class="text-sm md:text-md font-semibold text-zinc-700 dark:text-zinc-300 cursor-pointer">
<label class="md:text-md cursor-pointer text-sm font-semibold text-zinc-700 dark:text-zinc-300">
<input
:if={@can_scrobble?}
type="checkbox"
@@ -173,7 +173,7 @@ defmodule MusicLibraryWeb.Components.Release do
phx-click="toggle_medium"
phx-value-medium-number={@medium.number}
phx-target={@myself}
class="w-4 h-4 mr-2 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
class="mr-2 size-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
/>
{medium_title(@medium)}
<.badge variant="soft" class="text-xs">
@@ -216,7 +216,7 @@ defmodule MusicLibraryWeb.Components.Release do
myself={@myself}
/>
<.separator />
<p class="text-xs md:text-sm text-right text-zinc-700 dark:text-zinc-300">
<p class="text-right text-xs text-zinc-700 md:text-sm dark:text-zinc-300">
{medium_duration(@medium)}
</p>
"""
@@ -239,10 +239,10 @@ defmodule MusicLibraryWeb.Components.Release do
def track_list(assigns) do
~H"""
<ul id={"disc-#{@medium_number}"} class="w-full table table-auto">
<ul id={"disc-#{@medium_number}"} class="table w-full table-auto">
<li
:for={track <- @tracks}
class="leading-5 text-zinc-700 dark:text-zinc-300 list-none"
class="list-none leading-5 text-zinc-700 dark:text-zinc-300"
>
<label class="contents cursor-pointer">
<div class="table-row">
@@ -254,16 +254,16 @@ defmodule MusicLibraryWeb.Components.Release do
phx-click="toggle_track"
phx-value-track-id={track.id}
phx-target={@myself}
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
class="size-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
/>
</span>
<span class="table-cell text-xs text-right pr-1 text-nowrap">
<span class="table-cell pr-1 text-right text-xs text-nowrap">
{track.number || track.position}
</span>
<span class="table-cell text-xs md:text-sm font-medium leading-8 w-full">
<span class="table-cell w-full text-xs/8 font-medium md:text-sm">
{track.title}
</span>
<span class="table-cell text-xs md:text-sm text-right pl-2">
<span class="table-cell pl-2 text-right text-xs md:text-sm">
{track.length && Duration.format_duration(track.length)}
</span>
</div>
lib/music_library_web/components/scrobble_components.ex
+10 -10
View File
@@ -20,7 +20,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
<span class="sr-only">{gettext("Refresh LastFm Feed")}</span>
<.icon
name="hero-arrow-path"
class="phx-click-loading:animate-spin h-5 w-5"
class="phx-click-loading:animate-spin size-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -32,10 +32,10 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
def track_metadata_tooltip(assigns) do
~H"""
<.tooltip class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-lg ring-1 ring-zinc-200 dark:ring-zinc-700">
<.tooltip class="bg-white text-zinc-900 shadow-lg ring-1 ring-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700">
<.icon
name="hero-information-circle"
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"
/>
@@ -69,10 +69,10 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
def album_metadata_tooltip(assigns) do
~H"""
<.tooltip class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-lg ring-1 ring-zinc-200 dark:ring-zinc-700">
<.tooltip class="bg-white text-zinc-900 shadow-lg ring-1 ring-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700">
<.icon
name="hero-information-circle"
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"
/>
@@ -102,7 +102,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
def record_status_badges(assigns) do
~H"""
<div class="flex gap-1 flex-col text-right">
<div class="flex flex-col gap-1 text-right">
<.badge :if={@musicbrainz_id == ""}>
{gettext("No MB ID")}
</.badge>
@@ -127,7 +127,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-star"
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"
/>
@@ -159,17 +159,17 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
defp metadata_row(assigns) do
~H"""
<div class="px-3 py-2 first:pt-1.5 last:pb-1.5">
<dt class="text-[0.65rem] font-medium uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
<dt class="text-[0.65rem] font-medium tracking-wider text-zinc-400 uppercase dark:text-zinc-500">
{@label}
</dt>
<dd class="mt-0.5 flex items-center justify-between gap-2">
<code
id={@id_prefix}
class={[
"text-xs font-mono truncate",
"truncate font-mono text-xs",
if(@value not in ["", nil],
do: "text-zinc-800 dark:text-zinc-200",
else: "text-zinc-400 dark:text-zinc-500 italic"
else: "text-zinc-400 italic dark:text-zinc-500"
)
]}
>
lib/music_library_web/components/search_components.ex
+31 -31
View File
@@ -26,7 +26,7 @@ defmodule MusicLibraryWeb.SearchComponents do
~H"""
<div
class={[
"p-3 rounded-lg cursor-pointer transition-colors",
"cursor-pointer rounded-lg p-3 transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]}
@@ -37,22 +37,22 @@ defmodule MusicLibraryWeb.SearchComponents do
<div class="shrink-0">
<.record_cover
record={@record}
class="w-12 h-12 rounded-md aspect-square object-cover"
class="aspect-square size-12 rounded-md object-cover"
width={96}
/>
</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">
{@record.title}
</p>
<p class="text-sm text-zinc-500 font-medium dark:text-zinc-400 truncate">
<p class="truncate text-sm font-medium text-zinc-500 dark:text-zinc-400">
{Record.artist_names(@record)}
</p>
<p class="pointer-events-none block text-sm text-zinc-500">
{format_label(@record.format)} · {type_label(@record.type)} ·
<.icon
name="hero-calendar-days"
class="-mt-1 h-4 w-4"
class="-mt-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -61,7 +61,7 @@ defmodule MusicLibraryWeb.SearchComponents do
·
<.icon
name="hero-banknotes"
class="h-4 w-4"
class="size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -89,7 +89,7 @@ defmodule MusicLibraryWeb.SearchComponents do
~H"""
<div
class={[
"p-3 rounded-lg cursor-pointer transition-colors",
"cursor-pointer rounded-lg p-3 transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]}
@@ -99,17 +99,17 @@ defmodule MusicLibraryWeb.SearchComponents do
<div class="flex items-center space-x-3">
<div class="shrink-0">
<.artist_image
class="w-12 h-12 rounded-md aspect-square object-cover"
class="aspect-square size-12 rounded-md object-cover"
artist={@artist}
width={96}
image_hash={@image_data_hash}
/>
</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">
{@artist.name}
</p>
<p :if={@artist.disambiguation} class="text-sm text-zinc-500 dark:text-zinc-400 truncate">
<p :if={@artist.disambiguation} class="truncate text-sm text-zinc-500 dark:text-zinc-400">
{@artist.disambiguation}
</p>
</div>
@@ -132,7 +132,7 @@ defmodule MusicLibraryWeb.SearchComponents do
~H"""
<div
class={[
"p-3 rounded-lg cursor-pointer transition-colors",
"cursor-pointer rounded-lg p-3 transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]}
@@ -140,16 +140,16 @@ defmodule MusicLibraryWeb.SearchComponents do
{@rest}
>
<div class="flex items-center space-x-3">
<div class="shrink-0 w-12 h-12 rounded-md bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center">
<.icon name="hero-queue-list" class="h-6 w-6 text-zinc-400 dark:text-zinc-500" />
<div class="flex size-12 shrink-0 items-center justify-center rounded-md bg-zinc-100 dark:bg-zinc-700">
<.icon name="hero-queue-list" class="size-6 text-zinc-400 dark:text-zinc-500" />
</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">
{@record_set.name}
</p>
<div
:if={@record_set.description}
class="prose prose-zinc dark:prose-invert prose-sm"
class="dark:prose-invert prose prose-sm prose-zinc"
>
{render_description(@record_set.description)}
</div>
@@ -174,7 +174,7 @@ defmodule MusicLibraryWeb.SearchComponents do
~H"""
<div
class={[
"p-3 rounded-lg cursor-pointer transition-colors",
"cursor-pointer rounded-lg p-3 transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]}
@@ -182,8 +182,8 @@ defmodule MusicLibraryWeb.SearchComponents do
{@rest}
>
<div class="flex items-center space-x-3">
<div class="shrink-0 w-8 h-8 rounded-md bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center">
<.icon name={@icon} class="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-zinc-100 dark:bg-zinc-700">
<.icon name={@icon} class="size-4 text-zinc-500 dark:text-zinc-400" />
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
@@ -221,7 +221,7 @@ defmodule MusicLibraryWeb.SearchComponents do
def search_result_group(assigns) do
~H"""
<div class={["p-2", @class]}>
<h3 class="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1 uppercase tracking-wide">
<h3 class="mb-1 text-sm font-medium tracking-wide text-zinc-700 uppercase dark:text-zinc-300">
{@title}
<span :if={@total_count && @total_count > @count}>
{gettext("(%{count} of %{total})", count: @count, total: @total_count)}
@@ -235,7 +235,7 @@ defmodule MusicLibraryWeb.SearchComponents do
{render_slot(@inner_block)}
</div>
<div :for={action <- @actions} class="px-2 mt-2">
<div :for={action <- @actions} class="mt-2 px-2">
{render_slot(action)}
</div>
</div>
@@ -257,7 +257,7 @@ defmodule MusicLibraryWeb.SearchComponents do
~H"""
<button
role="option"
class="aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
class="text-sm text-blue-600 transition-colors hover:text-blue-800 aria-selected:bg-zinc-200 dark:text-blue-400 dark:hover:text-blue-300 dark:aria-selected:bg-zinc-700"
{@rest}
>
{gettext("View all %{count} %{target} results →", count: @count, target: @target)}
@@ -276,20 +276,20 @@ defmodule MusicLibraryWeb.SearchComponents do
def results_footer(assigns) do
~H"""
<div class="p-2 bg-zinc-50 dark:bg-zinc-900 rounded-b-lg border-t border-zinc-200 dark:border-zinc-700">
<div class="rounded-b-lg border-t border-zinc-200 bg-zinc-50 p-2 dark:border-zinc-700 dark:bg-zinc-900">
<div class="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400">
<div class="flex items-center space-x-4">
<div :if={@total_results > 0} class="flex items-center">
<kbd class="px-2 py-1 bg-zinc-200 dark:bg-zinc-700 rounded">↑</kbd>
<kbd class="px-2 py-1 bg-zinc-200 dark:bg-zinc-700 rounded ml-1">↓</kbd>
<kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↑</kbd>
<kbd class="ml-1 rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↓</kbd>
<span class="ml-1">{gettext("Navigate")}</span>
</div>
<div :if={@total_results > 0} class="flex items-center">
<kbd class="px-2 py-1 bg-zinc-200 dark:bg-zinc-700 rounded">Enter</kbd>
<kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">Enter</kbd>
<span class="ml-1">{gettext("Select")}</span>
</div>
<div class="flex items-center">
<kbd class="px-2 py-1 bg-zinc-200 dark:bg-zinc-700 rounded">Esc</kbd>
<kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">Esc</kbd>
<span class="ml-1">{gettext("Close")}</span>
</div>
</div>
@@ -311,9 +311,9 @@ defmodule MusicLibraryWeb.SearchComponents do
def empty_state(assigns) do
~H"""
<div class="p-8 text-center">
<.icon name="hero-magnifying-glass" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
<p class="text-sm text-zinc-500 dark:text-zinc-500 mt-2">
<kbd class="px-2 py-1 bg-zinc-100 dark:bg-zinc-700 rounded text-xs">Cmd/Ctrl+K</kbd>
<.icon name="hero-magnifying-glass" class="mx-auto mb-4 size-12 text-zinc-400" />
<p class="mt-2 text-sm text-zinc-500 dark:text-zinc-500">
<kbd class="rounded bg-zinc-100 px-2 py-1 text-xs dark:bg-zinc-700">Cmd/Ctrl+K</kbd>
{gettext("to open this search")}
</p>
</div>
@@ -332,12 +332,12 @@ defmodule MusicLibraryWeb.SearchComponents do
def no_results(assigns) do
~H"""
<div class="p-8 text-center">
<.icon name="hero-face-frown" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
<.icon name="hero-face-frown" class="mx-auto mb-4 size-12 text-zinc-400" />
<p class="text-zinc-600 dark:text-zinc-400">
{gettext("No results found for '%{query}'", query: @query)}
</p>
<.link
class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate"
class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100"
navigate={~p"/wishlist/import?#{[import_query: @query]}"}
>
{gettext("Add a record instead", query: @query)}
lib/music_library_web/components/stats_components.ex
+38 -38
View File
@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.StatsComponents do
<div
:if={@record}
class={[
"flex items-center rounded-md bg-white dark:bg-zinc-800 px-4 pb-5 pt-5 shadow-sm sm:px-6 sm:pt-6 cursor-pointer",
"flex cursor-pointer items-center rounded-md bg-white px-4 py-5 shadow-sm sm:px-6 sm:pt-6 dark:bg-zinc-800",
@class
]}
phx-click={JS.navigate(~p"/collection/#{@record}")}
@@ -29,16 +29,16 @@ defmodule MusicLibraryWeb.StatsComponents do
<div>
<.record_cover
record={@record}
class="w-20 md:w-24 rounded-md shadow-sm"
class="w-20 rounded-md shadow-sm md:w-24"
width={192}
/>
</div>
<div class="ml-4">
<p class="truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p class="truncate text-xs font-medium text-zinc-500 sm:text-sm dark:text-zinc-400">
{@title}
</p>
<p class="font-semibold">
<span class="text-sm md:text-base lg:text-2xl block text-zinc-900 dark:text-zinc-300">
<span class="block text-sm text-zinc-900 md:text-base lg:text-2xl dark:text-zinc-300">
{@record.title}
</span>
<.artist_links artists={@record.artists} joinphrase_class="text-sm md:text-base" />
@@ -48,11 +48,11 @@ defmodule MusicLibraryWeb.StatsComponents do
<div
:if={!@record}
class={[
"flex items-center rounded-md bg-white dark:bg-zinc-800 px-4 pb-5 pt-5 shadow-sm sm:px-6 sm:pt-6 cursor-pointer",
"flex cursor-pointer items-center rounded-md bg-white px-4 py-5 shadow-sm sm:px-6 sm:pt-6 dark:bg-zinc-800",
@class
]}
>
<p class="truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p class="truncate text-xs font-medium text-zinc-500 sm:text-sm dark:text-zinc-400">
{gettext("No record found")}
</p>
</div>
@@ -66,10 +66,10 @@ defmodule MusicLibraryWeb.StatsComponents do
def counter(assigns) do
~H"""
<div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm flex justify-center items-center">
<div class="flex items-center justify-center overflow-hidden rounded-md bg-white shadow-sm dark:bg-zinc-800">
<div class="p-4 md:p-0">
<dt>
<p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
<p class="truncate text-center text-sm font-medium text-zinc-500 dark:text-zinc-400">
{@title}
</p>
</dt>
@@ -77,13 +77,13 @@ defmodule MusicLibraryWeb.StatsComponents do
<.link
:if={@path}
navigate={@path}
class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
class="block text-center text-2xl font-semibold text-zinc-900 hover:text-zinc-500 sm:text-3xl dark:text-zinc-300 dark:hover:text-zinc-200"
>
{@count}
</.link>
<p
:if={!@path}
class="block cursor-default text-2xl sm:text-3xl font-semibold text-center text-zinc-900 dark:text-zinc-300"
class="block cursor-default text-center text-2xl font-semibold text-zinc-900 sm:text-3xl dark:text-zinc-300"
>
{@count}
</p>
@@ -96,13 +96,13 @@ defmodule MusicLibraryWeb.StatsComponents do
<.link
:if={@path}
navigate={@path}
class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
class="block text-center text-2xl font-semibold text-zinc-900 hover:text-zinc-500 sm:text-3xl dark:text-zinc-300 dark:hover:text-zinc-200"
>
{@count}
</.link>
<p
:if={!@path}
class="block cursor-default text-2xl sm:text-3xl font-semibold text-center text-zinc-900 dark:text-zinc-300"
class="block cursor-default text-center text-2xl font-semibold text-zinc-900 sm:text-3xl dark:text-zinc-300"
>
{@count}
</p>
@@ -120,16 +120,16 @@ defmodule MusicLibraryWeb.StatsComponents do
def counters_by_category(assigns) do
~H"""
<dl class={[
"mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x",
"mt-5 grid divide-x divide-zinc-200 overflow-hidden rounded-md bg-white shadow-sm dark:divide-zinc-900 dark:bg-zinc-800",
stats_class(@categories_with_counts)
]}>
<div :for={{category, count} <- @categories_with_counts} class="px-2 py-5 sm:px-4">
<dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
<dt class="text-center text-sm font-medium break-keep text-zinc-500 max-sm:text-xs dark:text-zinc-400">
{@category_format_fn.(category)}
</dt>
<dd class="mt-1 text-center">
<.link
class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
class="text-xl font-semibold hover:text-zinc-500 lg:text-2xl dark:text-zinc-300 dark:hover:text-zinc-200"
navigate={@category_path_fn.(category)}
>
{count}
@@ -153,7 +153,7 @@ defmodule MusicLibraryWeb.StatsComponents do
>
<li
id="no-records-on-this-day"
class="hidden py-8 only:flex items-center justify-center text-sm text-zinc-500 dark:text-zinc-400"
class="hidden items-center justify-center py-8 text-sm text-zinc-500 only:flex dark:text-zinc-400"
>
{gettext("No records released on this day.")}
</li>
@@ -166,22 +166,22 @@ defmodule MusicLibraryWeb.StatsComponents do
record_show_path={@record_show_path}
/>
<% {:group, %{representative: rep, records: records}} -> %>
<li id={"group-#{rep.musicbrainz_id}"} class="py-2 px-2 md:px-4">
<li id={"group-#{rep.musicbrainz_id}"} class="p-2 md:px-4">
<details class="group/details">
<summary class="flex justify-between gap-x-6 cursor-pointer list-none [&::-webkit-details-marker]:hidden hover:bg-zinc-50 dark:hover:bg-zinc-700 rounded-md -mx-2 px-2 py-1">
<div class="flex min-w-0 gap-x-4 items-center">
<summary class="-mx-2 flex cursor-pointer list-none justify-between gap-x-6 rounded-md px-2 py-1 hover:bg-zinc-50 dark:hover:bg-zinc-700 [&::-webkit-details-marker]:hidden">
<div class="flex min-w-0 items-center gap-x-4">
<div class="relative w-12 flex-none">
<.record_cover record={rep} width={96} />
<.release_groups_badge record={rep} />
</div>
<div class="min-w-0 flex-auto">
<h1 class="text-sm leading-6 text-zinc-700">
<h1 class="text-sm/6 text-zinc-700">
<.artist_links joinphrase_class="text-xs" artists={rep.artists} />
</h1>
<h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h2 class="mt-1 flex text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
{rep.title}
</h2>
<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">
<.released_how_long_ago record={rep} current_date={@current_date} />
· {ngettext("1 release", "%{count} releases", length(records))}
</p>
@@ -190,18 +190,18 @@ defmodule MusicLibraryWeb.StatsComponents do
<div class="flex items-center">
<.icon
name="hero-chevron-right"
class="h-4 w-4 text-zinc-400 transition-transform group-open/details:rotate-90"
class="size-4 text-zinc-400 transition-transform group-open/details:rotate-90"
/>
</div>
</summary>
<ul class="ml-16 mt-1 border-l border-zinc-200 dark:border-zinc-700 pl-4">
<ul class="mt-1 ml-16 border-l border-zinc-200 pl-4 dark:border-zinc-700">
<li
:for={record <- records}
phx-click={JS.navigate(@record_show_path.(record))}
class="flex justify-between gap-x-6 py-1.5 hover:bg-zinc-50 dark:hover:bg-zinc-700 px-2 rounded-md cursor-pointer"
class="flex cursor-pointer justify-between gap-x-6 rounded-md px-2 py-1.5 hover:bg-zinc-50 dark:hover:bg-zinc-700"
id={record.id}
>
<p class="text-xs leading-5 text-zinc-500 dark:text-zinc-400">
<p class="text-xs/5 text-zinc-500 dark:text-zinc-400">
{format_label(record.format)} · {type_label(record.type)}
<span :if={record.purchased_at}>
·
@@ -210,7 +210,7 @@ defmodule MusicLibraryWeb.StatsComponents do
</span>
<.icon
name="hero-banknotes"
class="h-4 w-4"
class="size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -235,22 +235,22 @@ defmodule MusicLibraryWeb.StatsComponents do
~H"""
<li
phx-click={JS.navigate(@record_show_path.(@record))}
class="flex justify-between gap-x-6 py-2 hover:bg-zinc-50 dark:hover:bg-zinc-700 px-2 md:px-4 cursor-pointer"
class="flex cursor-pointer justify-between gap-x-6 p-2 hover:bg-zinc-50 md:px-4 dark:hover:bg-zinc-700"
id={@record.id}
>
<div class="flex min-w-0 gap-x-4 items-center">
<div class="flex min-w-0 items-center gap-x-4">
<div class="relative w-12 flex-none">
<.record_cover record={@record} width={96} />
<.release_groups_badge record={@record} />
</div>
<div class="min-w-0 flex-auto">
<h1 class="text-sm leading-6 text-zinc-700">
<h1 class="text-sm/6 text-zinc-700">
<.artist_links joinphrase_class="text-xs" artists={@record.artists} />
</h1>
<h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<h2 class="mt-1 flex text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
{@record.title}
</h2>
<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">
<.released_how_long_ago record={@record} current_date={@current_date} />
· {format_label(@record.format)} · {type_label(@record.type)}
<span :if={@record.purchased_at}>
@@ -260,7 +260,7 @@ defmodule MusicLibraryWeb.StatsComponents do
</span>
<.icon
name="hero-banknotes"
class="h-4 w-4"
class="size-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -288,8 +288,8 @@ defmodule MusicLibraryWeb.StatsComponents do
<span
:if={same_year?(@years)}
class={[
"text-xs leading-5",
"font-semibold bg-linear-to-r bg-clip-text text-transparent from-red-500 via-red-200 to-red-700 animate-shine"
"text-xs/5",
"animate-shine bg-linear-to-r from-red-500 via-red-200 to-red-700 bg-clip-text font-semibold text-transparent"
]}
>
{gettext("Today")}
@@ -297,12 +297,12 @@ defmodule MusicLibraryWeb.StatsComponents do
<span
:if={!same_year?(@years)}
class={[
"text-xs leading-5",
"text-xs/5",
normal_year?(@years) && "text-zinc-500 dark:text-zinc-400",
gold_year?(@years) &&
"font-semibold bg-linear-to-r bg-clip-text text-transparent from-yellow-500 via-yellow-200 to-yellow-700 animate-shine",
"animate-shine bg-linear-to-r from-yellow-500 via-yellow-200 to-yellow-700 bg-clip-text font-semibold text-transparent",
silver_year?(@years) &&
"font-semibold bg-linear-to-r bg-clip-text text-transparent from-gray-500 via-gray-200 to-gray-700 animate-shine"
"animate-shine bg-linear-to-r from-gray-500 via-gray-200 to-gray-700 bg-clip-text font-semibold text-transparent"
]}
>
{ngettext(
lib/music_library_web/controllers/session_html/new.html.heex
+2 -2
View File
@@ -1,7 +1,7 @@
<div class="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-sm space-y-10">
<div>
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-zinc-900 dark:text-zinc-200">
<h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-zinc-900 dark:text-zinc-200">
{gettext("Welcome to your Music Library")}
</h2>
</div>
@@ -20,7 +20,7 @@
</div>
</div>
<div class="w-full flex justify-center">
<div class="flex w-full justify-center">
<.button variant="solid" type="submit">
{gettext("Login")}
</.button>
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>
mix.exs
+1
View File
@@ -77,6 +77,7 @@ defmodule MusicLibrary.MixProject do
{:phoenix_live_reload, "~> 1.2", only: :dev},
{:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
{:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
{:canonical_tailwind, "~> 0.1.0", only: [:dev, :test], runtime: false},
{:benchee, "~> 1.3", only: :dev, runtime: false},
{:credo, "~> 1.7", only: [:dev, :test], runtime: false},
{:quokka, "~> 2.6", only: [:dev, :test], runtime: false},
mix.lock
+1
View File
@@ -3,6 +3,7 @@
"benchee": {:hex, :benchee, "1.5.0", "4d812c31d54b0ec0167e91278e7de3f596324a78a096fd3d0bea68bb0c513b10", [:mix], [{:deep_merge, "~> 1.0", [hex: :deep_merge, repo: "hexpm", optional: false]}, {:statistex, "~> 1.1", [hex: :statistex, repo: "hexpm", optional: false]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "5b075393aea81b8ae74eadd1c28b1d87e8a63696c649d8293db7c4df3eb67535"},
"briefly": {:hex, :briefly, "0.5.1", "ee10d48da7f79ed2aebdc3e536d5f9a0c3e36ff76c0ad0d4254653a152b13a8a", [:mix], [], "hexpm", "bd684aa92ad8b7b4e0d92c31200993c4bc1469fc68cd6d5f15144041bd15cb57"},
"bunt": {:hex, :bunt, "1.0.0", "081c2c665f086849e6d57900292b3a161727ab40431219529f13c4ddcf3e7a44", [:mix], [], "hexpm", "dc5f86aa08a5f6fa6b8096f0735c4e76d54ae5c9fa2c143e5a1fc7c1cd9bb6b5"},
"canonical_tailwind": {:hex, :canonical_tailwind, "0.1.0", "76ca1225b6804b2e7daaff1ec5ebeb3bb2db39fc28d17ff2b71ca4aa234bddc1", [:mix], [{:tailwind, "~> 0.3", [hex: :tailwind, repo: "hexpm", optional: true]}], "hexpm", "989c1bf1518843e1ce24a6f5c794b9c2a89d1bd873fa1a266c8ee3d1e0367703"},
"castore": {:hex, :castore, "1.0.18", "5e43ef0ec7d31195dfa5a65a86e6131db999d074179d2ba5a8de11fe14570f55", [:mix], [], "hexpm", "f393e4fe6317829b158fb74d86eb681f737d2fe326aa61ccf6293c4104957e34"},
"cc_precompiler": {:hex, :cc_precompiler, "0.1.11", "8c844d0b9fb98a3edea067f94f616b3f6b29b959b6b3bf25fee94ffe34364768", [:mix], [{:elixir_make, "~> 0.7", [hex: :elixir_make, repo: "hexpm", optional: false]}], "hexpm", "3427232caf0835f94680e5bcf082408a70b48ad68a5f5c0b02a3bea9f3a075b9"},
"circular_buffer": {:hex, :circular_buffer, "1.0.0", "25c004da0cba7bd8bc1bdabded4f9a902d095e20600fd15faf1f2ffbaea18a07", [:mix], [], "hexpm", "c829ec31c13c7bafd1f546677263dff5bfb006e929f25635878ac3cfba8749e5"},