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

Improve styling of wishlist record details page

Browse Source
This commit is contained in:
Claudio Ortolina
2025-01-28 11:36:48 +00:00
parent ca0b4fb0e1
commit 06a1ebbe76
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/wishlist_live/show.html.heex
+14 -14
View File
@@ -155,14 +155,14 @@
</div>
</div>
<div>
<div class="mt-4">
<%!-- TODO: replace with OSS version --%>
<dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
<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)
@@ -179,10 +179,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"
@@ -193,10 +193,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>
@@ -218,10 +218,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}
@@ -230,18 +230,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>