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

Improve styling of collection record details page

Browse Source
This commit is contained in:
Claudio Ortolina
2025-01-28 11:33:11 +00:00
parent 7ce2b6a7b2
commit ca0b4fb0e1
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/show.html.heex
+15 -15
View File
@@ -137,14 +137,14 @@
</.focus_wrap>
</div>
</div>
<div>
<div class="mt-4">
<%!-- TODO: replace with OSS version --%>
<dl class="divide-y divide-zinc-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">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("ID")}
</dt>
<dd class="mt-1 text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
@@ -161,10 +161,10 @@
</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">
<dt class="text-xs md: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">
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<.link
:for={genre <- @record.genres}
class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
@@ -175,10 +175,10 @@
</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">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("MusicBrainz ID")}
</dt>
<dd class="mt-1 text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
</a>
@@ -197,10 +197,10 @@
</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">
<dt class="text-xs md: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">
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.purchased_at)}
</dd>
</div>
@@ -208,10 +208,10 @@
:if={Records.Record.child_release_groups_count(@record) > 0}
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">
<dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Includes")}
</dt>
<dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<ul>
<li :for={child_release_group <- Records.Record.child_release_groups(@record)}>
{child_release_group.artists} - {child_release_group.title}
@@ -220,18 +220,18 @@
</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">
<dt class="text-xs md: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">
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@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">
<dt class="text-xs md: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">
<dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
{Records.Record.format_as_date(@record.updated_at)}
</dd>
</div>