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

Redesign record show page

Browse Source
This commit is contained in:
Claudio Ortolina
2024-10-26 23:03:07 +01:00
parent 750dae431b
commit 60ae641902
5 changed files with 100 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+1 -1
View File
@@ -582,7 +582,7 @@ defmodule MusicLibraryWeb.CoreComponents do
<div class="mt-4 md:mt-16"> <div class="mt-4 md:mt-16">
<.link <.link
navigate={@navigate} navigate={@navigate}
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700" class="text-sm font-semibold leading-6 text-zinc-900 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
> >
<.icon name="hero-arrow-left-solid" class="h-3 w-3" /> <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
lib/music_library_web/live/record_live/import_component.ex
+1 -1
View File
@@ -112,7 +112,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
JS.push("import", value: %{id: @release_group.id, format: format}, page_loading: true) JS.push("import", value: %{id: @release_group.id, format: format}, page_loading: true)
} }
> >
<%= Records.Record.format_short_label(format) %> <%= Records.Record.format_long_label(format) %>
</.link> </.link>
</.focus_wrap> </.focus_wrap>
</div> </div>
lib/music_library_web/live/record_live/show.html.heex
+80 -56
View File
@@ -1,69 +1,93 @@
<.header> <nav class="flex justify-end gap-x-4">
<.link <.link patch={~p"/records/#{@record}/show/edit"} phx-click={JS.push_focus()}>
:for={artist <- @record.artists} <.button>
class=" hover:text-gray-500" <%= gettext("Edit") %>
patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"} </.button>
>
<%= artist.name %>
</.link> </.link>
<:subtitle> <.link
<%= @record.title %> phx-click={JS.push("delete", value: %{id: @record.id})}
</:subtitle> data-confirm={gettext("Are you sure?")}
<:actions> >
<.link patch={~p"/records/#{@record}/show/edit"} phx-click={JS.push_focus()}> <.button class="!bg-red-900 hover:!bg-red-700 dark:text-white">
<.button> <%= gettext("Delete") %>
<%= gettext("Edit") %> </.button>
</.button> </.link>
</.link> </nav>
<.link
phx-click={JS.push("delete", value: %{id: @record.id})}
data-confirm={gettext("Are you sure?")}
>
<.button class="!bg-red-900 hover:!bg-red-700">
<%= gettext("Delete") %>
</.button>
</.link>
</:actions>
</.header>
<div class="md:columns-2 mt-4"> <div class="md:columns-2 mt-4 px-4">
<div class="relative block md:inline-block drop-shadow"> <div class="drop-shadow">
<img <img
class="w-full rounded-lg shadow" class="w-full rounded-lg shadow"
src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash || ""}"} src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash || ""}"}
alt={@record.title} alt={@record.title}
/> />
<span class="absolute right-2 bottom-1 block text-white drop-shadow-md">
<%= Records.Record.format_short_label(@record.format) %>
</span>
</div> </div>
<.list> <div class="mt-4 md:mt-0">
<:item title={gettext("Type")}> <h1 class="text-base font-medium leading-6 text-zinc-700">
<span class="inline-flex items-center mr-2 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"> <.link
<%= @record.type %> :for={artist <- @record.artists}
</span> class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
</:item> patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
<:item title={gettext("Musicbrainz ID")}>
<a href={musicbrainz_url(@record)}>
<code><%= @record.musicbrainz_id %></code>
</a>
</:item>
<:item title={gettext("Release")}>
<%= Records.Record.format_release(@record.release) %>
</:item>
<:item title={gettext("Genres")}>
<span
:for={genre <- @record.genres}
class="inline-flex items-center mr-2 mb-2 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
> >
<%= genre %> <%= artist.name %>
</span> </.link>
</:item> </h1>
<:item title={gettext("Purchased at")}><%= @record.purchased_at %></:item> <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
<:item title={gettext("Inserted at")}><%= @record.inserted_at %></:item> <%= @record.title %>
<:item title={gettext("Updated at")}><%= @record.updated_at %></:item> </h2>
</.list> <p class="mt-1 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<%= Records.Record.format_release(@record.release) %> · <%= Records.Record.format_long_label(
@record.format
) %> · <%= Records.Record.type_long_label(@record.type) %>
</p>
</div>
<div>
<dl class="mt-4 divide-y divide-gray-100 dark:divide-slate-300/30">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("Genres") %>
</dt>
<dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<%= Enum.join(@record.genres, ", ") %>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("MusicBrainz ID") %>
</dt>
<dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<a href={musicbrainz_url(@record)}>
<code><%= @record.musicbrainz_id %></code>
</a>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("Purchased on") %>
</dt>
<dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<%= @record.purchased_at %>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("Inserted at") %>
</dt>
<dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<%= @record.inserted_at %>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("Updated at") %>
</dt>
<dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<%= @record.updated_at %>
</dd>
</div>
</dl>
</div>
</div> </div>
<div class="mt-8"> <div class="mt-8">
priv/gettext/default.pot
+17 -11
View File
@@ -123,7 +123,6 @@ msgid "No cover selected"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:50 #: lib/music_library_web/live/record_live/form_component.ex:50
#: lib/music_library_web/live/record_live/show.html.heex:63
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Purchased at" msgid "Purchased at"
msgstr "" msgstr ""
@@ -135,7 +134,6 @@ msgid "Record updated successfully"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:45 #: lib/music_library_web/live/record_live/form_component.ex:45
#: lib/music_library_web/live/record_live/show.html.heex:52
#: lib/music_library_web/live/wishlist_live/show.html.heex:52 #: lib/music_library_web/live/wishlist_live/show.html.heex:52
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Release" msgid "Release"
@@ -152,7 +150,6 @@ msgid "Saving..."
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:33 #: lib/music_library_web/live/record_live/form_component.ex:33
#: lib/music_library_web/live/record_live/show.html.heex:42
#: lib/music_library_web/live/wishlist_live/show.html.heex:42 #: lib/music_library_web/live/wishlist_live/show.html.heex:42
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Type" msgid "Type"
@@ -174,7 +171,7 @@ msgid "Search for records"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/index.html.heex:166 #: lib/music_library_web/live/record_live/index.html.heex:166
#: lib/music_library_web/live/record_live/show.html.heex:20 #: lib/music_library_web/live/record_live/show.html.heex:9
#: lib/music_library_web/live/wishlist_live/index.html.heex:176 #: lib/music_library_web/live/wishlist_live/index.html.heex:176
#: lib/music_library_web/live/wishlist_live/show.html.heex:20 #: lib/music_library_web/live/wishlist_live/show.html.heex:20
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
@@ -182,7 +179,7 @@ msgid "Are you sure?"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/index.html.heex:168 #: lib/music_library_web/live/record_live/index.html.heex:168
#: lib/music_library_web/live/record_live/show.html.heex:23 #: lib/music_library_web/live/record_live/show.html.heex:12
#: lib/music_library_web/live/wishlist_live/index.html.heex:178 #: lib/music_library_web/live/wishlist_live/index.html.heex:178
#: lib/music_library_web/live/wishlist_live/show.html.heex:23 #: lib/music_library_web/live/wishlist_live/show.html.heex:23
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
@@ -192,7 +189,7 @@ msgstr ""
#: lib/music_library_web/live/record_live/index.ex:54 #: lib/music_library_web/live/record_live/index.ex:54
#: lib/music_library_web/live/record_live/index.html.heex:157 #: lib/music_library_web/live/record_live/index.html.heex:157
#: lib/music_library_web/live/record_live/show.ex:50 #: lib/music_library_web/live/record_live/show.ex:50
#: lib/music_library_web/live/record_live/show.html.heex:15 #: lib/music_library_web/live/record_live/show.html.heex:4
#: lib/music_library_web/live/wishlist_live/index.ex:55 #: lib/music_library_web/live/wishlist_live/index.ex:55
#: lib/music_library_web/live/wishlist_live/index.html.heex:157 #: lib/music_library_web/live/wishlist_live/index.html.heex:157
#: lib/music_library_web/live/wishlist_live/show.ex:50 #: lib/music_library_web/live/wishlist_live/show.ex:50
@@ -266,30 +263,29 @@ msgstr ""
msgid "View on MusicBrainz" msgid "View on MusicBrainz"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:71 #: lib/music_library_web/live/record_live/show.html.heex:95
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Back to records" msgid "Back to records"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:55 #: lib/music_library_web/live/record_live/show.html.heex:49
#: lib/music_library_web/live/wishlist_live/show.html.heex:55 #: lib/music_library_web/live/wishlist_live/show.html.heex:55
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Genres" msgid "Genres"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:64 #: lib/music_library_web/live/record_live/show.html.heex:75
#: lib/music_library_web/live/wishlist_live/show.html.heex:63 #: lib/music_library_web/live/wishlist_live/show.html.heex:63
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Inserted at" msgid "Inserted at"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:47
#: lib/music_library_web/live/wishlist_live/show.html.heex:47 #: lib/music_library_web/live/wishlist_live/show.html.heex:47
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Musicbrainz ID" msgid "Musicbrainz ID"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:65 #: lib/music_library_web/live/record_live/show.html.heex:83
#: lib/music_library_web/live/wishlist_live/show.html.heex:64 #: lib/music_library_web/live/wishlist_live/show.html.heex:64
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Updated at" msgid "Updated at"
@@ -345,3 +341,13 @@ msgstr ""
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Types" msgid "Types"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:57
#, elixir-autogen, elixir-format
msgid "MusicBrainz ID"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:67
#, elixir-autogen, elixir-format
msgid "Purchased on"
msgstr ""
test/music_library_web/live/record_show_test.exs
+1 -1
View File
@@ -33,7 +33,7 @@ defmodule MusicLibraryWeb.RecordShowTest do
assert html =~ escape(record.title) assert html =~ escape(record.title)
assert html =~ to_string(record.release) assert html =~ to_string(record.release)
assert html =~ Record.format_short_label(record.format) assert html =~ Record.format_long_label(record.format)
assert html =~ record.release assert html =~ record.release
assert html =~ ~p"/covers/#{record.id}?vsn=#{record.cover_hash}" assert html =~ ~p"/covers/#{record.id}?vsn=#{record.cover_hash}"
assert html =~ Phoenix.HTML.Safe.to_iodata(record.purchased_at) assert html =~ Phoenix.HTML.Safe.to_iodata(record.purchased_at)