Canonicalize tailwind classes
This commit is contained in:
@@ -31,7 +31,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
|
||||
~H"""
|
||||
<div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-5">
|
||||
<section class="md:col-span-3 md:p-4 md:border-r md:border-zinc-200 md:dark:border-zinc-800">
|
||||
<section class="md:col-span-3 md:border-r md:border-zinc-200 md:p-4 md:dark:border-zinc-800">
|
||||
<.simple_form
|
||||
for={@form}
|
||||
id={:import_form}
|
||||
@@ -135,7 +135,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
|
||||
class="flex gap-3 px-4 py-3"
|
||||
>
|
||||
<img
|
||||
class="w-12 h-12 rounded-md object-cover"
|
||||
class="size-12 rounded-md object-cover"
|
||||
alt={item.title}
|
||||
src={item.thumb_url}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
@@ -153,7 +153,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
|
||||
<select
|
||||
name="format"
|
||||
aria-label={gettext("Format")}
|
||||
class="rounded-md border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-xs px-1.5 py-0.5"
|
||||
class="rounded-md border border-zinc-300 bg-white px-1.5 py-0.5 text-xs dark:border-zinc-700 dark:bg-zinc-950"
|
||||
>
|
||||
<option
|
||||
:for={format <- Records.Record.formats()}
|
||||
@@ -193,11 +193,11 @@ defmodule MusicLibraryWeb.Components.AddRecord do
|
||||
~H"""
|
||||
<li
|
||||
id={@id}
|
||||
class="flex justify-between gap-x-6 py-5 md:px-4 hover:bg-zinc-100 dark:hover:bg-zinc-700"
|
||||
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-100 md:px-4 dark:hover:bg-zinc-700"
|
||||
>
|
||||
<div class="flex w-full shrink-0 items-center justify-between">
|
||||
<img
|
||||
class="mr-4 w-12 md:w-20 flex-none rounded-lg"
|
||||
class="mr-4 w-12 flex-none rounded-lg md:w-20"
|
||||
alt={@release_group.title}
|
||||
src={ReleaseGroupSearchResult.thumb_url(@release_group)}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
@@ -218,7 +218,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
|
||||
|
||||
<span
|
||||
:if={@in_cart?}
|
||||
class="mr-2 inline-flex items-center gap-1 rounded-full bg-emerald-100 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 text-xs font-medium px-2 py-0.5"
|
||||
class="mr-2 inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300"
|
||||
>
|
||||
<.icon name="hero-check" class="size-3" aria-hidden="true" data-slot="icon" />
|
||||
<span :if={length(@cart_formats) > 1}>{length(@cart_formats)}</span>
|
||||
|
||||
@@ -25,7 +25,7 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
|
||||
~H"""
|
||||
<div id="barcode-scanner" phx-hook=".BarcodeScanner" phx-target={@myself}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-5">
|
||||
<section class="md:col-span-3 md:p-4 md:border-r md:border-zinc-200 md:dark:border-zinc-800">
|
||||
<section class="md:col-span-3 md:border-r md:border-zinc-200 md:p-4 md:dark:border-zinc-800">
|
||||
<header>
|
||||
<h1 class="text-sm/6 font-medium text-zinc-700 dark:text-zinc-400">
|
||||
{gettext("Scan one or more barcodes")}
|
||||
@@ -357,7 +357,7 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
|
||||
|
||||
defp cart_item(%{result: %{status: :not_found}} = assigns) do
|
||||
~H"""
|
||||
<.barcode_icon class="w-12 h-12 flex-none rounded-md p-2 bg-red-50 text-red-400 dark:bg-red-950" />
|
||||
<.barcode_icon class="size-12 flex-none rounded-md bg-red-50 p-2 text-red-400 dark:bg-red-950" />
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{@result.number}
|
||||
@@ -384,7 +384,7 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
|
||||
defp cart_item(assigns) do
|
||||
~H"""
|
||||
<img
|
||||
class="w-12 h-12 rounded-md flex-none object-cover"
|
||||
class="size-12 flex-none rounded-md object-cover"
|
||||
alt={@result.release.release_group.title}
|
||||
src={ReleaseGroupSearchResult.thumb_url(@result.release.release_group)}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
|
||||
@@ -55,7 +55,7 @@ defmodule MusicLibraryWeb.CartComponents do
|
||||
"border-t md:border-t-0 md:border-l md:border-zinc-200 md:dark:border-zinc-800",
|
||||
"flex flex-col"
|
||||
]}>
|
||||
<div class="px-4 py-3 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
|
||||
<div class="flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
|
||||
{gettext("Cart")}
|
||||
@@ -78,7 +78,7 @@ defmodule MusicLibraryWeb.CartComponents do
|
||||
type="button"
|
||||
phx-click={@on_toggle}
|
||||
phx-target={@target}
|
||||
class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 dark:hover:bg-zinc-800 md:hidden"
|
||||
class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 md:hidden dark:hover:bg-zinc-800"
|
||||
aria-label={gettext("Toggle cart")}
|
||||
>
|
||||
<.icon
|
||||
@@ -91,7 +91,7 @@ defmodule MusicLibraryWeb.CartComponents do
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={["md:!block", not @expanded? && "hidden"]}>
|
||||
<div class={["md:block!", not @expanded? && "hidden"]}>
|
||||
<div
|
||||
:if={@count == 0}
|
||||
id="cart-empty"
|
||||
@@ -109,14 +109,14 @@ defmodule MusicLibraryWeb.CartComponents do
|
||||
<ul
|
||||
:if={@count > 0}
|
||||
id="cart-items"
|
||||
class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
|
||||
class="divide-y divide-zinc-200 overflow-y-auto md:max-h-[calc(100vh-20rem)] dark:divide-zinc-800"
|
||||
>
|
||||
{render_slot(@inner_block)}
|
||||
</ul>
|
||||
|
||||
<div
|
||||
:if={@count > 0 and @action != []}
|
||||
class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
|
||||
class="border-t border-zinc-200 px-4 py-3 dark:border-zinc-800"
|
||||
>
|
||||
{render_slot(@action)}
|
||||
</div>
|
||||
|
||||
@@ -42,7 +42,7 @@ defmodule MusicLibraryWeb.ChartComponents do
|
||||
|
||||
<%= if @datum_click do %>
|
||||
<div
|
||||
class="group col-span-3 grid grid-cols-subgrid cursor-pointer items-center"
|
||||
class="group col-span-3 grid cursor-pointer grid-cols-subgrid items-center"
|
||||
phx-click={@datum_click.(datum)}
|
||||
>
|
||||
<.bar_row
|
||||
|
||||
@@ -226,7 +226,7 @@ defmodule MusicLibraryWeb.Components.Chat do
|
||||
>
|
||||
{raw(Markdown.to_html(message.content, link_target: "_blank"))}
|
||||
</div>
|
||||
<div :if={message.role == "assistant"} class="flex justify-end -mb-1 -mr-2">
|
||||
<div :if={message.role == "assistant"} class="-mr-2 -mb-1 flex justify-end">
|
||||
<.copy_to_clipboard
|
||||
target_id={"#{@id}-msg-#{index}"}
|
||||
label={gettext("Copy message")}
|
||||
|
||||
@@ -129,7 +129,7 @@ defmodule MusicLibraryWeb.RecordComponents do
|
||||
<h2 class="mt-1 text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
|
||||
{record.title}
|
||||
</h2>
|
||||
<p class="flex items-center gap-1 mt-1 text-xs/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">
|
||||
<.release_status_tooltip record={record} />
|
||||
{Records.Record.format_release_date(record.release_date)}
|
||||
<span :if={@current_date && !Records.Record.released?(record, @current_date)}>
|
||||
@@ -302,7 +302,7 @@ defmodule MusicLibraryWeb.RecordComponents do
|
||||
{record.title}
|
||||
</p>
|
||||
</div>
|
||||
<p class="flex items-center gap-1 pointer-events-none text-sm font-medium text-zinc-500">
|
||||
<p class="pointer-events-none flex items-center gap-1 text-sm font-medium text-zinc-500">
|
||||
<.release_status_tooltip record={record} />
|
||||
{format_label(record.format)} · {type_label(record.type)}
|
||||
</p>
|
||||
|
||||
@@ -301,7 +301,7 @@ defmodule MusicLibraryWeb.Components.Release do
|
||||
<ul id={"disc-#{@medium_number}"} class="table w-full table-auto">
|
||||
<li
|
||||
:for={track <- @tracks}
|
||||
class="list-none leading-5 text-zinc-700 dark:text-zinc-300 md:mt-4"
|
||||
class="list-none leading-5 text-zinc-700 md:mt-4 dark:text-zinc-300"
|
||||
>
|
||||
<label class="contents cursor-pointer">
|
||||
<div class="table-row">
|
||||
|
||||
@@ -158,7 +158,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
|
||||
class={[
|
||||
"cursor-pointer",
|
||||
@status == :mixed &&
|
||||
"bg-linear-50 from-success/10 to-warning/30 dark:from-success/20 dark:to-warning/60 text-foreground-success-soft"
|
||||
"dark:from-success/20 dark:to-warning/60 from-success/10 text-foreground-success-soft to-warning/30 bg-linear-50"
|
||||
]}
|
||||
>
|
||||
{ngettext("1 record", "%{count} records", @count)}
|
||||
|
||||
@@ -114,7 +114,7 @@ defmodule MusicLibraryWeb.ScrobbleRulePicker do
|
||||
<p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{Record.artist_names(@record)}
|
||||
</p>
|
||||
<p class="flex items-center gap-1 mt-1 text-xs/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">
|
||||
<.release_status_tooltip record={@record} />
|
||||
{Record.format_release_date(@record.release_date)} · {format_label(@record.format)} · {type_label(
|
||||
@record.type
|
||||
|
||||
@@ -296,7 +296,7 @@ defmodule MusicLibraryWeb.SearchComponents do
|
||||
~H"""
|
||||
<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="hidden sm:flex items-center space-x-4">
|
||||
<div class="hidden items-center space-x-4 sm:flex">
|
||||
<div :if={@show_nav_hints} class="flex items-center gap-1">
|
||||
<kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↑</kbd>
|
||||
<kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↓</kbd>
|
||||
|
||||
@@ -52,7 +52,7 @@ defmodule MusicLibraryWeb.StatsComponents do
|
||||
class={[
|
||||
"flex items-center rounded-md bg-white px-4 py-5 shadow-sm sm:px-6 sm:pt-6 dark:bg-zinc-800",
|
||||
"border border-dashed border-zinc-300 dark:border-zinc-600",
|
||||
"group hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors",
|
||||
"group transition-colors hover:border-zinc-400 dark:hover:border-zinc-500",
|
||||
@class
|
||||
]}
|
||||
>
|
||||
@@ -204,7 +204,7 @@ defmodule MusicLibraryWeb.StatsComponents do
|
||||
<li
|
||||
:for={record <- records}
|
||||
phx-click={JS.navigate(@record_show_path.(record))}
|
||||
class="flex items-center cursor-pointer rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-700"
|
||||
class="flex cursor-pointer items-center rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-700"
|
||||
id={record.id}
|
||||
>
|
||||
<div class="w-6 flex-none">
|
||||
|
||||
@@ -68,7 +68,7 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
|
||||
data-slot="icon"
|
||||
/>
|
||||
<span class="sr-only sm:not-sr-only">{gettext("Chat")}</span>
|
||||
<span :if={@chat_count > 0} class="sr-only sm:not-sr-only text-xs font-medium">
|
||||
<span :if={@chat_count > 0} class="sr-only text-xs font-medium sm:not-sr-only">
|
||||
{@chat_count}
|
||||
</span>
|
||||
</.button>
|
||||
|
||||
@@ -400,7 +400,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
|
||||
<h3 class="text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
|
||||
{item.record.title}
|
||||
</h3>
|
||||
<p class="flex gap-1 items-center pointer-events-none text-sm font-medium text-zinc-500">
|
||||
<p class="pointer-events-none flex items-center gap-1 text-sm font-medium text-zinc-500">
|
||||
<.release_status_tooltip record={item.record} />
|
||||
{format_label(item.record.format)} · {type_label(item.record.type)}
|
||||
</p>
|
||||
|
||||
@@ -99,7 +99,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
|
||||
<p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{Record.artist_names(@record)}
|
||||
</p>
|
||||
<p class="flex items-center gap-1 mt-1 text-xs/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">
|
||||
<.release_status_tooltip record={@record} />
|
||||
{Record.format_release_date(@record.release_date)} · {format_label(@record.format)} · {type_label(
|
||||
@record.type
|
||||
|
||||
@@ -134,7 +134,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
|
||||
<h3 class="text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
|
||||
{item.record.title}
|
||||
</h3>
|
||||
<p class="flex gap-1 items-center pointer-events-none text-sm font-medium text-zinc-500">
|
||||
<p class="pointer-events-none flex items-center gap-1 text-sm font-medium text-zinc-500">
|
||||
<.release_status_tooltip record={item.record} />
|
||||
{format_label(item.record.format)} · {type_label(item.record.type)}
|
||||
</p>
|
||||
|
||||
@@ -310,7 +310,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
||||
<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="size-12 object-cover rounded-md shadow-sm"
|
||||
class="size-12 rounded-md object-cover shadow-sm"
|
||||
src={track_or_album_cover_url(album, cover_hash)}
|
||||
alt={album.metadata.title}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
@@ -388,7 +388,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
||||
<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="size-12 object-cover rounded-md shadow-sm"
|
||||
class="size-12 rounded-md object-cover shadow-sm"
|
||||
src={track_or_album_cover_url(track, cover_hash)}
|
||||
alt={track.title}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
@@ -522,7 +522,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
||||
~H"""
|
||||
<.section>
|
||||
<:title>{gettext("Records")}</:title>
|
||||
<div class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5 min-h-35">
|
||||
<div class="mt-5 grid min-h-35 grid-cols-3 gap-5 sm:grid-cols-5">
|
||||
<.album_preview
|
||||
record={@latest_record}
|
||||
title={gettext("Latest purchase")}
|
||||
|
||||
@@ -82,7 +82,7 @@ defmodule MusicLibraryWeb.StatsLive.TopAlbums do
|
||||
class={[
|
||||
"cursor-pointer",
|
||||
status == :mixed &&
|
||||
"bg-linear-50 from-success/10 to-warning/30 dark:from-success/20 dark:to-warning/60 text-foreground-success-soft"
|
||||
"dark:from-success/20 dark:to-warning/60 from-success/10 text-foreground-success-soft to-warning/30 bg-linear-50"
|
||||
]}
|
||||
>
|
||||
{@album.play_count}
|
||||
|
||||
Reference in New Issue
Block a user