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

Move scrobbled at info to make import button more visible

Browse Source
This commit is contained in:
Claudio Ortolina
2024-11-09 08:34:55 +00:00
parent 4f03efa5e2
commit 38ecfa72ea
2 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/stats_live/index.html.heex
+49 -49
View File
@@ -78,37 +78,38 @@
aria-hidden="true" aria-hidden="true"
> >
</span> </span>
<div class="relative flex space-x-3 items-center"> <div class="relative flex space-x-3 items-center justify-between">
<img class="h-12 w-12 rounded-md shadow" src={track.cover_url} alt={track.title} /> <div class="flex min-w-0 justify-between space-x-4 items-center">
<div class="flex min-w-0 flex-1 justify-between space-x-4 items-center"> <img class="h-12 w-12 rounded-md shadow" src={track.cover_url} alt={track.title} />
<div class="font-semibold grow"> <div class="font-semibold">
<p class="text-sm md:text-base block cursor-pointer text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300"> <p class="text-sm md:text-base block cursor-pointer text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300">
<%= track.artist.name %> <%= track.artist.name %>
</p> </p>
<p class="text-sm md:text-base text-zinc-700 dark:text-zinc-300"> <p class="text-sm md:text-base text-zinc-700 dark:text-zinc-300">
<%= track.title %> <%= track.title %>
</p> </p>
</div> <time
<time datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)} class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
>
<%= track.scrobbled_at_label %>
</time>
<div class="relative flex-none">
<button
type="button"
class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
aria-expanded="false"
aria-haspopup="true"
phx-click={toggle_actions_menu(track.scrobbled_at_uts)}
phx-click-away={close_actions_menu(track.scrobbled_at_uts)}
> >
<span class="sr-only"><%= gettext("Open options") %></span> <%= track.scrobbled_at_label %>
<.icon name="hero-plus" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" /> </time>
</button> </div>
<!-- </div>
<div class="relative flex-none">
<button
type="button"
class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
aria-expanded="false"
aria-haspopup="true"
phx-click={toggle_actions_menu(track.scrobbled_at_uts)}
phx-click-away={close_actions_menu(track.scrobbled_at_uts)}
>
<span class="sr-only"><%= gettext("Open options") %></span>
<.icon name="hero-plus" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
</button>
<!--
Dropdown menu, show/hide based on menu state. Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100" Entering: "transition ease-out duration-100"
@@ -118,33 +119,32 @@
From: "transform opacity-100 scale-100" From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95" To: "transform opacity-0 scale-95"
--> -->
<.focus_wrap <.focus_wrap
id={"actions-#{track.scrobbled_at_uts}"} id={"actions-#{track.scrobbled_at_uts}"}
class={[ class={[
"hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none" "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
]} ]}
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
aria-labelledby="options-menu-0-button" aria-labelledby="options-menu-0-button"
tabindex="-1"
>
<.link
:for={format <- Records.Record.formats()}
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{track.scrobbled_at_uts}-#{format}-import"}
phx-click={
JS.push("import",
value: %{id: track.album.musicbrainz_id, format: format},
page_loading: true
)
}
> >
<.link <%= Records.Record.format_long_label(format) %>
:for={format <- Records.Record.formats()} </.link>
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" </.focus_wrap>
role="menuitem"
tabindex="-1"
id={"actions-#{track.scrobbled_at_uts}-#{format}-import"}
phx-click={
JS.push("import",
value: %{id: track.album.musicbrainz_id, format: format},
page_loading: true
)
}
>
<%= Records.Record.format_long_label(format) %>
</.link>
</.focus_wrap>
</div>
</div> </div>
</div> </div>
</div> </div>
priv/gettext/default.pot
+1 -1
View File
@@ -178,7 +178,7 @@ msgstr ""
#: lib/music_library_web/live/record_live/import_component.ex:76 #: lib/music_library_web/live/record_live/import_component.ex:76
#: lib/music_library_web/live/record_live/index.html.heex:89 #: lib/music_library_web/live/record_live/index.html.heex:89
#: lib/music_library_web/live/stats_live/index.html.heex:108 #: lib/music_library_web/live/stats_live/index.html.heex:109
#: lib/music_library_web/live/wishlist_live/index.html.heex:89 #: lib/music_library_web/live/wishlist_live/index.html.heex:89
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Open options" msgid "Open options"