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

Fix UI inconsistencies across templates

Browse Source 
- Replace .separator with .dropdown_separator in 4 dropdown menus
- Change gray-* to zinc-* color classes in online store templates
- Wrap hardcoded page titles in gettext() in online store templates
- Add consistent dark:text-zinc-200 to maintenance h3 subsections
- Add text-zinc-900 dark:text-zinc-200 to scrobble section headers
- Fix heading hierarchy (h1/h2 → h2/h3) in record set items
- Align artist form modal header to text-lg font-semibold
- Use size="xs" prop instead of class override on format badge
- Add external link icon to wishlist online store buttons
This commit is contained in:
Claudio Ortolina
2026-03-16 11:37:29 +00:00
parent 028f111300
commit 654b172ddb
13 changed files with 59 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/record_components.ex
+1 -1
View File
@@ -407,7 +407,7 @@ defmodule MusicLibraryWeb.RecordComponents do
defp format_badge(assigns) do
~H"""
<.badge class="text-xs md:text-sm">
<.badge size="xs">
{@release |> ReleaseSearchResult.format() |> format_label()}
</.badge>
"""
lib/music_library_web/live/artist_live/form.ex
+1 -1
View File
@@ -20,7 +20,7 @@ defmodule MusicLibraryWeb.ArtistLive.Form 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-lg font-semibold text-zinc-900 dark:text-zinc-100">
{@artist.name}
</h1>
</header>
lib/music_library_web/live/maintenance_live/index.ex
+5 -5
View File
@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
<h1 class="mt-2 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Maintenance")}
</h1>
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
{gettext("Records")}
</h3>
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
@@ -61,7 +61,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
</.button_group>
</li>
</ul>
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
{gettext("Artists")}
</h3>
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
@@ -127,7 +127,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
</.button_group>
</li>
</ul>
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
{gettext("Database")}
</h3>
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
@@ -156,7 +156,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
</.button_group>
</li>
</ul>
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
{gettext("Assets")}
</h3>
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
@@ -187,7 +187,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
</.button_group>
</li>
</ul>
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
{gettext("Emails")}
</h3>
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
lib/music_library_web/live/online_store_template_live/index.ex
+8 -8
View File
@@ -27,7 +27,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
<div class="mt-6 space-y-4">
<ul
role="list"
class="divide-y divide-gray-200 dark:divide-gray-800"
class="divide-y divide-zinc-100 dark:divide-zinc-300/20"
phx-update="stream"
id="templates"
>
@@ -42,7 +42,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
src={favicon_url(template.url_template)}
alt={template.name}
/>
<p class="text-sm font-semibold text-gray-900 dark:text-white">
<p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
{template.name}
</p>
<.badge :if={template.enabled} color="success">
@@ -52,10 +52,10 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
{gettext("Disabled")}
</.badge>
</div>
<div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
<div class="mt-1 flex items-center gap-x-2 text-xs text-zinc-500 dark:text-zinc-400">
<p class="truncate font-mono">{template.url_template}</p>
</div>
<p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
<p :if={template.description} class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
{template.description}
</p>
</div>
@@ -83,7 +83,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
>
{gettext("Edit")}
</.dropdown_link>
<.separator />
<.dropdown_separator />
<.dropdown_button
phx-click="delete"
phx-value-id={template.id}
@@ -133,19 +133,19 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
defp apply_action(socket, :edit, %{"id" => id}) do
socket
|> assign(:page_title, "Edit Online Store Template")
|> assign(:page_title, gettext("Edit Online Store Template"))
|> assign(:template, OnlineStoreTemplates.get_template!(id))
end
defp apply_action(socket, :new, _params) do
socket
|> assign(:page_title, "New Online Store Template")
|> assign(:page_title, gettext("New Online Store Template"))
|> assign(:template, %OnlineStoreTemplate{})
end
defp apply_action(socket, :index, _params) do
socket
|> assign(:page_title, "Online Store Templates")
|> assign(:page_title, gettext("Online Store Templates"))
|> assign(:template, nil)
end
lib/music_library_web/live/record_set_live/index.ex
+5 -5
View File
@@ -311,7 +311,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
>
{gettext("Edit")}
</.dropdown_link>
<.separator />
<.dropdown_separator />
<.dropdown_button
phx-click="delete_set"
phx-value-id={@record_set.id}
@@ -387,12 +387,12 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
aria-hidden="true"
/>
</button>
<h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
<h2 class="mt-1 text-sm leading-6 text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
</h1>
<h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
{item.record.title}
</h2>
<h3 class="flex font-semibold text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
{item.record.title}
</h3>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
{format_label(item.record.format)} · {type_label(item.record.type)}
</p>
lib/music_library_web/live/record_set_live/show.ex
+5 -5
View File
@@ -41,7 +41,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
>
{gettext("Edit")}
</.dropdown_link>
<.separator />
<.dropdown_separator />
<.dropdown_button
phx-click="delete_set"
data-confirm={gettext("Are you sure?")}
@@ -122,12 +122,12 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
aria-hidden="true"
/>
</button>
<h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
<h2 class="mt-1 text-sm leading-6 text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
</h1>
<h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
{item.record.title}
</h2>
<h3 class="flex font-semibold text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
{item.record.title}
</h3>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
{format_label(item.record.format)} · {type_label(item.record.type)}
</p>
lib/music_library_web/live/scrobble_live/index.ex
+3 -1
View File
@@ -22,7 +22,9 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
</header>
<%= if @search_results != [] && @selected_release_group == nil do %>
<div class="space-y-3">
<h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
<h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-200">
{gettext("Release Groups")}
</h3>
<ul class={[
"mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
"max-h-125 overflow-y-auto"
lib/music_library_web/live/scrobble_live/show.ex
+3 -1
View File
@@ -74,7 +74,9 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
<div :if={@release.media != []} class="mt-6 space-y-4">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold">{gettext("Tracks")}</h3>
<h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-200">
{gettext("Tracks")}
</h3>
<.button
:if={@can_scrobble}
lib/music_library_web/live/scrobble_rules_live/index.ex
+1 -1
View File
@@ -134,7 +134,7 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
>
{gettext("Edit")}
</.dropdown_link>
<.separator />
<.dropdown_separator />
<.dropdown_button
phx-click="delete"
phx-value-id={scrobble_rule.id}
lib/music_library_web/live/wishlist_live/show.ex
+5
View File
@@ -234,6 +234,11 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
<span class="text-sm font-medium text-zinc-900 dark:text-white">
{template.name}
</span>
<.icon
name="hero-arrow-top-right-on-square"
class="h-3.5 w-3.5 text-zinc-400"
aria-hidden="true"
/>
</.button>
</div>
</details>
priv/gettext/default.pot
+10
View File
@@ -2293,3 +2293,13 @@ msgstr ""
#, elixir-autogen, elixir-format
msgid "Timestamp"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.ex
#, elixir-autogen, elixir-format
msgid "Edit Online Store Template"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.ex
#, elixir-autogen, elixir-format
msgid "New Online Store Template"
msgstr ""
priv/gettext/en/LC_MESSAGES/default.po
+10
View File
@@ -2293,3 +2293,13 @@ msgstr ""
#, elixir-autogen, elixir-format
msgid "Timestamp"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.ex
#, elixir-autogen, elixir-format
msgid "Edit Online Store Template"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.ex
#, elixir-autogen, elixir-format
msgid "New Online Store Template"
msgstr ""
test/music_library_web/live/record_set_live/show_test.exs
+2 -2
View File
@@ -28,8 +28,8 @@ defmodule MusicLibraryWeb.RecordSetLive.ShowTest do
conn
|> visit(~p"/record-sets/#{set}")
|> assert_has("h2", escape(r1.title))
|> assert_has("h2", escape(r2.title))
|> assert_has("h3", escape(r1.title))
|> assert_has("h3", escape(r2.title))
end
test "shows add record tile when set has no records", %{conn: conn} do