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

Fix jittering in record detail pages

Browse Source 
Use flex instead of columns.
This commit is contained in:
Claudio Ortolina
2025-05-02 21:06:43 +01:00
parent 23e59edeec
commit 38f60d62e0
2 changed files with 491 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/show.html.heex
+6 -4
View File
@@ -1,4 +1,4 @@
<div class="md:columns-2 mt-4 px-4"> <div class="md:flex mt-4 px-4 md:gap-x-4">
<div class="drop-shadow-sm md:max-w-[38rem]"> <div class="drop-shadow-sm md:max-w-[38rem]">
<img <img
class="w-full rounded-lg drop-shadow-sm" class="w-full rounded-lg drop-shadow-sm"
@@ -7,6 +7,7 @@
/> />
</div> </div>
<div class="grow">
<div class="mt-4 md:mt-0 flex justify-between"> <div class="mt-4 md:mt-0 flex justify-between">
<div> <div>
<h1 class="text-base font-medium leading-6 text-zinc-700"> <h1 class="text-base font-medium leading-6 text-zinc-700">
@@ -22,9 +23,9 @@
{@record.title} {@record.title}
</h2> </h2>
<p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400"> <p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
{Records.Record.format_release_date(@record.release_date)} · {format_label(@record.format)} · {type_label( {Records.Record.format_release_date(@record.release_date)} · {format_label(
@record.type @record.format
)} )} · {type_label(@record.type)}
</p> </p>
</div> </div>
<div class="relative flex-none"> <div class="relative flex-none">
@@ -253,6 +254,7 @@
</dl> </dl>
</div> </div>
</div> </div>
</div>
<!-- TODO: extract to a component --> <!-- TODO: extract to a component -->
<details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"> <details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
<summary class="text-xs sm:text-sm">{gettext("MusicBrainz data")}</summary> <summary class="text-xs sm:text-sm">{gettext("MusicBrainz data")}</summary>
lib/music_library_web/live/wishlist_live/show.html.heex
+3 -1
View File
@@ -1,4 +1,4 @@
<div class="md:columns-2 mt-4 px-4"> <div class="md:flex mt-4 px-4 md:gap-x-4">
<div class="drop-shadow-sm md:max-w-[38rem]"> <div class="drop-shadow-sm md:max-w-[38rem]">
<img <img
class="w-full rounded-lg drop-shadow-sm" class="w-full rounded-lg drop-shadow-sm"
@@ -7,6 +7,7 @@
/> />
</div> </div>
<div class="grow">
<div class="mt-4 md:mt-0 flex justify-between"> <div class="mt-4 md:mt-0 flex justify-between">
<div> <div>
<h1 class="text-base font-medium leading-6 text-zinc-700"> <h1 class="text-base font-medium leading-6 text-zinc-700">
@@ -268,6 +269,7 @@
</dl> </dl>
</div> </div>
</div> </div>
</div>
<!-- TODO: extract to a component --> <!-- TODO: extract to a component -->
<details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"> <details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
<summary class="text-xs sm:text-sm">{gettext("MusicBrainz data")}</summary> <summary class="text-xs sm:text-sm">{gettext("MusicBrainz data")}</summary>