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

Improve ux of record sets: larger drag handles, text and fix cover density

Browse Source
This commit is contained in:
Claudio Ortolina
2026-02-14 18:31:22 +00:00
parent 162b5208ae
commit 63d143f234
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/record_set_live/index.html.heex
+5 -5
View File
@@ -118,7 +118,7 @@
data-sortable-item data-sortable-item
data-record-id={item.record.id} data-record-id={item.record.id}
class={[ class={[
"flex-none w-24 sm:w-32 group relative", "flex-none w-32 group relative",
is_nil(item.record.purchased_at) && is_nil(item.record.purchased_at) &&
"opacity-60 dark:opacity-40 hover:opacity-100 transition-opacity" "opacity-60 dark:opacity-40 hover:opacity-100 transition-opacity"
]} ]}
@@ -145,7 +145,7 @@
</.link> </.link>
<div <div
data-sortable-handle data-sortable-handle
class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5 cursor-grab active:cursor-grabbing" class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-8 sm:size-5 cursor-grab active:cursor-grabbing"
> >
<.icon <.icon
name="hero-bars-2" name="hero-bars-2"
@@ -197,10 +197,10 @@
</.dropdown_button> </.dropdown_button>
</.dropdown> </.dropdown>
</div> </div>
<h1 class="mt-1 text-xs sm:text-sm leading-6 text-zinc-700"> <h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
<.artist_links joinphrase_class="text-xs" artists={item.record.artists} /> <.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
</h1> </h1>
<h2 class="flex font-semibold text-xs sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap"> <h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
{item.record.title} {item.record.title}
</h2> </h2>
<p class="pointer-events-none block text-sm font-medium text-zinc-500"> <p class="pointer-events-none block text-sm font-medium text-zinc-500">
lib/music_library_web/live/record_set_live/show.html.heex
+1 -1
View File
@@ -108,7 +108,7 @@
</.link> </.link>
<div <div
data-sortable-handle data-sortable-handle
class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5 cursor-grab active:cursor-grabbing" class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-8 sm:size-5 cursor-grab active:cursor-grabbing"
> >
<.icon <.icon
name="hero-bars-2" name="hero-bars-2"