Claudio Ortolina
f4727bdcbd
Use a combination of ghost and soft, with button groups where appropriate. Also remove unnecessary negative margins, and pad around for ease of use on mobile.
276 lines
10 KiB
Plaintext
276 lines
10 KiB
Plaintext
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
<div class="mt-4 px-4 sm:px-6 lg:px-8">
|
|
<header class="mt-1 gap-1">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
{@artist.name}
|
|
<.country_flag country={@country} />
|
|
</h1>
|
|
|
|
<div class="flex items-center">
|
|
<button
|
|
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
|
phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")}
|
|
>
|
|
<span class="sr-only">{gettext("Open Notes")}</span>
|
|
<.icon
|
|
name="hero-pencil-square"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
<.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
|
|
<:toggle>
|
|
<.button variant="ghost">
|
|
<span class="sr-only">{gettext("Actions")}</span>
|
|
<.icon
|
|
name="hero-ellipsis-vertical"
|
|
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</.button>
|
|
</:toggle>
|
|
<.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
|
|
<.dropdown_link
|
|
id={"actions-#{@artist.musicbrainz_id}-edit"}
|
|
patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
|
|
>
|
|
<.icon
|
|
name="hero-pencil-square"
|
|
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Edit")}
|
|
</.dropdown_link>
|
|
<.dropdown_link
|
|
id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
|
|
phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
|
|
>
|
|
<.icon
|
|
name="hero-photo"
|
|
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Refresh image")}
|
|
</.dropdown_link>
|
|
|
|
<.dropdown_link
|
|
id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
|
|
phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
|
|
>
|
|
<.icon
|
|
name="hero-arrow-path"
|
|
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Refresh info")}
|
|
</.dropdown_link>
|
|
</.focus_wrap>
|
|
</.dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
|
|
<:loading>
|
|
<span class="sr-only">{gettext("Loading play count")}</span>
|
|
<.loading />
|
|
</:loading>
|
|
<:failed :let={_failure}>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="-mt-1 mr-1 ml-2 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Error loading play count")}
|
|
</div>
|
|
</:failed>
|
|
<.on_tour_link lastfm_artist_info={lastfm_artist_info} />
|
|
<.play_count play_count={lastfm_artist_info.play_count} />
|
|
</.async_result>
|
|
<.button variant="solid" patch={~p"/artists/#{@artist.musicbrainz_id}/import"}>
|
|
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
|
{gettext("Add more")}
|
|
</.button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mt-4 grid md:grid-cols-10 md:gap-4">
|
|
<div class="md:col-span-3 mt-4 order-2 md:order-1">
|
|
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
|
|
{gettext("Meta")}
|
|
</h2>
|
|
<.artist_image
|
|
class="w-full rounded-md shadow-sm mt-4"
|
|
artist={@artist}
|
|
image_hash={@artist_info.image_data_hash}
|
|
/>
|
|
<dl>
|
|
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
|
|
{gettext("MusicBrainz ID")}
|
|
</dt>
|
|
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300">
|
|
<a href={MusicBrainz.Artist.url(@artist.musicbrainz_id)}>
|
|
<code class="overflow-hidden text-clip" id={"mb-#{@artist.musicbrainz_id}"}>
|
|
{@artist.musicbrainz_id}
|
|
</code>
|
|
</a>
|
|
<button phx-click={
|
|
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @artist.musicbrainz_id)
|
|
|> JS.transition("animate-shake")
|
|
}>
|
|
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
</dd>
|
|
</dl>
|
|
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
|
|
<:loading>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
{gettext("Loading biography")}
|
|
</div>
|
|
</:loading>
|
|
<:failed :let={_failure}>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="-mt-1 mr-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Error loading biography")}
|
|
</div>
|
|
</:failed>
|
|
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
|
|
{gettext("Biography")}
|
|
</dt>
|
|
<dd class="text-zinc-700 dark:text-zinc-300">
|
|
{remove_read_more_link(lastfm_artist_info.summary)}
|
|
<.link
|
|
class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
|
|
phx-click={Fluxon.open_dialog("bio")}
|
|
>
|
|
<.icon
|
|
name="hero-arrow-right-end-on-rectangle"
|
|
class="-mt-1 mr-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Read more")}
|
|
</.link>
|
|
</dd>
|
|
<.sheet id="bio" class="max-w-2xl text-zinc-700 dark:text-zinc-300" placement="left">
|
|
{render_bio(lastfm_artist_info.bio)}
|
|
</.sheet>
|
|
</.async_result>
|
|
<.external_links external_links={@external_links} />
|
|
</div>
|
|
<div class="md:col-span-7 md:order-1">
|
|
<.record_grid
|
|
:if={@collection_records_count > 0}
|
|
title={gettext("Collection")}
|
|
id="collection"
|
|
records={@streams.collection_records}
|
|
records_count={@collection_records_count}
|
|
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
|
record_edit_path={fn record -> ~p"/collection/#{record}/show/edit" end}
|
|
/>
|
|
<.separator :if={@wishlist_records_count > 0} class="mt-8 mb-8" />
|
|
<.record_grid
|
|
:if={@wishlist_records_count > 0}
|
|
title={gettext("Wishlist")}
|
|
id="wishlist"
|
|
records={@streams.wishlist_records}
|
|
records_count={@wishlist_records_count}
|
|
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
|
|
record_edit_path={fn record -> ~p"/wishlist/#{record}/show/edit" end}
|
|
/>
|
|
|
|
<.async_result :let={similar_artists} assign={@similar_artists}>
|
|
<:loading>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
{gettext("Loading similar artists")}
|
|
</div>
|
|
</:loading>
|
|
<:failed :let={_failure}>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="-mt-1 mr-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Error loading similar artists")}
|
|
</div>
|
|
</:failed>
|
|
<.separator class="mt-8 mb-8" />
|
|
<.artist_grid title={gettext("Similar artists")} artists={similar_artists} />
|
|
</.async_result>
|
|
</div>
|
|
</div>
|
|
|
|
<.json_viewer
|
|
:if={@artist_info.musicbrainz_data}
|
|
title={gettext("MusicBrainz data")}
|
|
data={@artist_info.musicbrainz_data}
|
|
/>
|
|
|
|
<.json_viewer
|
|
:if={@artist_info.discogs_data}
|
|
title={gettext("Discogs data")}
|
|
data={@artist_info.discogs_data}
|
|
/>
|
|
</div>
|
|
|
|
<.structured_modal
|
|
:if={@live_action == :import}
|
|
id="record-modal"
|
|
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
|
|
>
|
|
<.live_component
|
|
module={MusicLibraryWeb.Components.AddRecord}
|
|
id={:search}
|
|
title={@page_title}
|
|
action={@live_action}
|
|
patch={~p"/artists/#{@artist.musicbrainz_id}"}
|
|
initial_query={"arid:#{@artist.musicbrainz_id}"}
|
|
icon_name="hero-plus"
|
|
/>
|
|
</.structured_modal>
|
|
|
|
<.live_component
|
|
id="artist-notes"
|
|
sheet_id="artist-notes-sheet"
|
|
module={MusicLibraryWeb.Components.Notes}
|
|
entity={:artist}
|
|
musicbrainz_id={@artist.musicbrainz_id}
|
|
/>
|
|
|
|
<.structured_modal
|
|
:if={@live_action == :edit}
|
|
id="artist-info-modal"
|
|
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
|
|
>
|
|
<.live_component
|
|
module={MusicLibraryWeb.ArtistLive.Form}
|
|
id={@artist_info.id}
|
|
action={@live_action}
|
|
artist_info={@artist_info}
|
|
artist={@artist}
|
|
patch={~p"/artists/#{@artist.musicbrainz_id}"}
|
|
/>
|
|
</.structured_modal>
|
|
</Layouts.app>
|