Canonicalize tailwind classes

This commit is contained in:
Claudio Ortolina
2026-04-21 14:21:19 +01:00
parent 007f59b0c3
commit 016c4691be
17 changed files with 32 additions and 32 deletions
@@ -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
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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}