Claudio Ortolina
907f480bc1
Prefer inline Tailwind classes for consistency with rest of the codebase
107 lines
4.3 KiB
Plaintext
107 lines
4.3 KiB
Plaintext
<div class="mt-4 px-4 sm:px-6 lg:px-8">
|
|
<h1 class="flex items-end mt-1 font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
{@artist.name}
|
|
<span :if={@artist_info.ok? && @artist_info.result && @artist_info.result.play_count > 0}>
|
|
<span class="sr-only">
|
|
{gettext("Number of scrobbles")}
|
|
</span>
|
|
<span class={[
|
|
"rounded-full ml-2",
|
|
"px-2 py-1 text-xs font-medium",
|
|
"ring-1 ring-inset",
|
|
"bg-gray-50 dark:bg-gray-400/10",
|
|
"text-gray-600 dark:text-gray-500",
|
|
"ring-gray-500/10 dark:ring-gray-400/20"
|
|
]}>
|
|
{@artist_info.result.play_count}
|
|
</span>
|
|
</span>
|
|
</h1>
|
|
<details
|
|
:if={artist_info = @artist_info.ok? && @artist_info.result}
|
|
class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
|
|
>
|
|
<summary class="text-sm mb-4">{gettext("Biography")}</summary>
|
|
{render_bio(artist_info.bio)}
|
|
</details>
|
|
<div :if={!@artist_info.ok?} class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
{gettext("Biography not available")}
|
|
</div>
|
|
|
|
<div :if={@artist_records.collection !== []} class="mt-4">
|
|
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
|
|
{gettext("Collection")}
|
|
</h2>
|
|
<ul
|
|
role="list"
|
|
class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
|
|
>
|
|
<li :for={record <- @artist_records.collection} class="relative">
|
|
<div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
|
|
<img
|
|
alt={record.title}
|
|
src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
|
|
class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="absolute inset-0 focus:outline-none"
|
|
phx-click={JS.navigate(~p"/collection/#{record}")}
|
|
>
|
|
<span class="sr-only">{gettext("View details")}</span>
|
|
</button>
|
|
</div>
|
|
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
|
|
{record.title}
|
|
</p>
|
|
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
|
{Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
|
|
record.type
|
|
)}
|
|
</p>
|
|
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
|
{Records.Record.format_release(record.release)}
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div :if={@artist_records.wishlist !== []} class="mt-4">
|
|
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
|
|
{gettext("Wishlist")}
|
|
</h2>
|
|
<ul
|
|
role="list"
|
|
class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
|
|
>
|
|
<li :for={record <- @artist_records.wishlist} class="relative">
|
|
<div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zing-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
|
|
<img
|
|
alt={record.title}
|
|
src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
|
|
class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="absolute inset-0 focus:outline-none"
|
|
phx-click={JS.navigate(~p"/wishlist/#{record}")}
|
|
>
|
|
<span class="sr-only">{gettext("View details")}</span>
|
|
</button>
|
|
</div>
|
|
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
|
|
{record.title}
|
|
</p>
|
|
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
|
{Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
|
|
record.type
|
|
)}
|
|
</p>
|
|
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
|
{Records.Record.format_release(record.release)}
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|