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

Add canonical_tailwind to get correct formatting for tailwind classes

Browse Source
This commit is contained in:
Claudio Ortolina
2026-03-20 13:02:32 +00:00
parent ccc929e939
commit 47ca6fa1d2
41 changed files with 467 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/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(