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> </.focus_wrap>
</div> </div>
</div> </div>
<div> <div class="mt-4">
<%!-- TODO: replace with OSS version --%> <%!-- TODO: replace with OSS version --%>
<dl class="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"> <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")} {gettext("ID")}
</dt> </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> <code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={ <button phx-click={
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id) JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
@@ -161,10 +161,10 @@
</dd> </dd>
</div> </div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <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")} {gettext("Genres")}
</dt> </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 <.link
:for={genre <- @record.genres} :for={genre <- @record.genres}
class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300" class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
@@ -175,10 +175,10 @@
</dd> </dd>
</div> </div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <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")} {gettext("MusicBrainz ID")}
</dt> </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)}> <a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code> <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
</a> </a>
@@ -197,10 +197,10 @@
</dd> </dd>
</div> </div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <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")} {gettext("Purchased on")}
</dt> </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)} {Records.Record.format_as_date(@record.purchased_at)}
</dd> </dd>
</div> </div>
@@ -208,10 +208,10 @@
:if={Records.Record.child_release_groups_count(@record) > 0} :if={Records.Record.child_release_groups_count(@record) > 0}
class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-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")} {gettext("Includes")}
</dt> </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> <ul>
<li :for={child_release_group <- Records.Record.child_release_groups(@record)}> <li :for={child_release_group <- Records.Record.child_release_groups(@record)}>
{child_release_group.artists} - {child_release_group.title} {child_release_group.artists} - {child_release_group.title}
@@ -220,18 +220,18 @@
</dd> </dd>
</div> </div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <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")} {gettext("Inserted at")}
</dt> </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)} {Records.Record.format_as_date(@record.inserted_at)}
</dd> </dd>
</div> </div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <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")} {gettext("Updated at")}
</dt> </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)} {Records.Record.format_as_date(@record.updated_at)}
</dd> </dd>
</div> </div>