Fix position of scrobble search form
This commit is contained in:
Claudio Ortolina
@@ -1,146 +1,141 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<header class="gap-6 mb-2">
|
||||||
:if={!@can_scrobble?}
|
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||||
class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mt-4"
|
<.search_form query={@search_query} />
|
||||||
>
|
<.button :if={!@can_scrobble?} size="sm" href={LastFm.auth_url()}>
|
||||||
<.button :if={!@can_scrobble?} size="sm" href={LastFm.auth_url()}>
|
{gettext("Connect your Last.fm account")}
|
||||||
{gettext("Connect your Last.fm account")}
|
</.button>
|
||||||
</.button>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
|
<%= if @search_results != [] && @selected_release_group == nil do %>
|
||||||
<div class="mt-6 space-y-6">
|
<div class="space-y-3">
|
||||||
<.search_form query={@search_query} />
|
<h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
|
||||||
|
<ul class={[
|
||||||
<%= if @search_results != [] && @selected_release_group == nil do %>
|
"mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
|
||||||
<div class="space-y-3">
|
"max-h-[500px] overflow-y-auto"
|
||||||
<h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
|
]}>
|
||||||
<ul class={[
|
<li
|
||||||
"mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
|
:for={release_group <- @search_results}
|
||||||
"max-h-[500px] overflow-y-auto"
|
phx-click="select_release_group"
|
||||||
]}>
|
phx-value-release_group_id={release_group.id}
|
||||||
<li
|
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 cursor-pointer"
|
||||||
:for={release_group <- @search_results}
|
>
|
||||||
phx-click="select_release_group"
|
<div class="shrink-0 flex items-center justify-between w-full px-4">
|
||||||
phx-value-release_group_id={release_group.id}
|
<img
|
||||||
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 cursor-pointer"
|
class="w-20 flex-none rounded-lg mr-4"
|
||||||
>
|
alt={release_group.title}
|
||||||
<div class="shrink-0 flex items-center justify-between w-full px-4">
|
src={ReleaseGroupSearchResult.thumb_url(release_group)}
|
||||||
<img
|
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||||
class="w-20 flex-none rounded-lg mr-4"
|
/>
|
||||||
alt={release_group.title}
|
<div class="min-w-0 flex-auto">
|
||||||
src={ReleaseGroupSearchResult.thumb_url(release_group)}
|
<h1 class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
|
||||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
{release_group.artists}
|
||||||
/>
|
</h1>
|
||||||
<div class="min-w-0 flex-auto">
|
<h2 class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||||
<h1 class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
|
{release_group.title}
|
||||||
{release_group.artists}
|
</h2>
|
||||||
</h1>
|
<p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
|
||||||
<h2 class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
{Records.Record.format_release_date(release_group.release_date)} · {type_label(
|
||||||
{release_group.title}
|
release_group.type
|
||||||
</h2>
|
)}
|
||||||
<p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
|
</p>
|
||||||
{Records.Record.format_release_date(release_group.release_date)} · {type_label(
|
|
||||||
release_group.type
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<%= if @selected_release_group && @releases != [] do %>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<.button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
phx-click="clear_selection"
|
||||||
|
>
|
||||||
|
<.icon name="hero-arrow-left" class="h-4 w-4" />
|
||||||
|
</.button>
|
||||||
|
<h3 class="text-lg font-semibold">
|
||||||
|
{gettext("Releases for \"%{title}\"", title: @selected_release_group.title)}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= if @selected_release_group && @releases != [] do %>
|
<div class="grid gap-3">
|
||||||
<div class="space-y-3">
|
<%= for release <- @releases do %>
|
||||||
<div class="flex items-center gap-2">
|
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||||
<.button
|
<.link
|
||||||
variant="ghost"
|
navigate={~p"/scrobble/#{release.id}"}
|
||||||
size="sm"
|
class="block p-4"
|
||||||
phx-click="clear_selection"
|
>
|
||||||
>
|
<div class="flex justify-start">
|
||||||
<.icon name="hero-arrow-left" class="h-4 w-4" />
|
<div>
|
||||||
</.button>
|
<img
|
||||||
<h3 class="text-lg font-semibold">
|
class="w-20 flex-none rounded-lg mr-4"
|
||||||
{gettext("Releases for \"%{title}\"", title: @selected_release_group.title)}
|
alt={release.title}
|
||||||
</h3>
|
src={Release.thumb_url(release)}
|
||||||
</div>
|
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||||
|
/>
|
||||||
<div class="grid gap-3">
|
</div>
|
||||||
<%= for release <- @releases do %>
|
<div>
|
||||||
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
<h4 class="font-medium text-gray-900 dark:text-gray-100">
|
||||||
<.link
|
{release.title}
|
||||||
navigate={~p"/scrobble/#{release.id}"}
|
</h4>
|
||||||
class="block p-4"
|
<div class="text-sm text-gray-600 dark:text-gray-400 mt-1 space-y-1">
|
||||||
>
|
<%= if release.date do %>
|
||||||
<div class="flex justify-start">
|
<p>Released: {release.date}</p>
|
||||||
<div>
|
<% end %>
|
||||||
<img
|
<%= if release.country do %>
|
||||||
class="w-20 flex-none rounded-lg mr-4"
|
<p>Country: {release.country}</p>
|
||||||
alt={release.title}
|
<% end %>
|
||||||
src={Release.thumb_url(release)}
|
<%= if release.barcode do %>
|
||||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
<p>Barcode: {release.barcode}</p>
|
||||||
/>
|
<% end %>
|
||||||
</div>
|
<%= if release.catalog_number do %>
|
||||||
<div>
|
<p>Catalog: {release.catalog_number}</p>
|
||||||
<h4 class="font-medium text-gray-900 dark:text-gray-100">
|
<% end %>
|
||||||
{release.title}
|
<%= if release.media != [] do %>
|
||||||
</h4>
|
<p>
|
||||||
<div class="text-sm text-gray-600 dark:text-gray-400 mt-1 space-y-1">
|
{ngettext("1 disc", "%{count} discs", Release.media_count(release))}
|
||||||
<%= if release.date do %>
|
</p>
|
||||||
<p>Released: {release.date}</p>
|
<% end %>
|
||||||
<% end %>
|
|
||||||
<%= if release.country do %>
|
|
||||||
<p>Country: {release.country}</p>
|
|
||||||
<% end %>
|
|
||||||
<%= if release.barcode do %>
|
|
||||||
<p>Barcode: {release.barcode}</p>
|
|
||||||
<% end %>
|
|
||||||
<%= if release.catalog_number do %>
|
|
||||||
<p>Catalog: {release.catalog_number}</p>
|
|
||||||
<% end %>
|
|
||||||
<%= if release.media != [] do %>
|
|
||||||
<p>
|
|
||||||
{ngettext("1 disc", "%{count} discs", Release.media_count(release))}
|
|
||||||
</p>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</.link>
|
</div>
|
||||||
</div>
|
</.link>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
<%= if @loading && @search_query != "" do %>
|
<%= if @loading && @search_query != "" do %>
|
||||||
<div class="text-center py-8">
|
<div class="text-center py-8">
|
||||||
<.icon name="hero-arrow-path" class="h-8 w-8 animate-spin mx-auto text-gray-400" />
|
<.icon name="hero-arrow-path" class="h-8 w-8 animate-spin mx-auto text-gray-400" />
|
||||||
<p class="text-gray-600 dark:text-gray-400 mt-2">
|
<p class="text-gray-600 dark:text-gray-400 mt-2">
|
||||||
<%= if @selected_release_group do %>
|
<%= if @selected_release_group do %>
|
||||||
Loading releases...
|
Loading releases...
|
||||||
<% else %>
|
<% else %>
|
||||||
Searching...
|
Searching...
|
||||||
<% end %>
|
<% end %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<%= if @search_query != "" && @search_results == [] && not @loading do %>
|
<%= if @search_query != "" && @search_results == [] && not @loading do %>
|
||||||
<div class="text-center py-8">
|
<div class="text-center py-8">
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-magnifying-glass"
|
name="hero-magnifying-glass"
|
||||||
class="h-12 w-12 mx-auto text-gray-300 dark:text-gray-600"
|
class="h-12 w-12 mx-auto text-gray-300 dark:text-gray-600"
|
||||||
/>
|
/>
|
||||||
<p class="text-gray-600 dark:text-gray-400 mt-3">
|
<p class="text-gray-600 dark:text-gray-400 mt-3">
|
||||||
No release groups found for "{@search_query}"
|
No release groups found for "{@search_query}"
|
||||||
</p>
|
</p>
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-500 mt-1">
|
<p class="text-sm text-gray-500 dark:text-gray-500 mt-1">
|
||||||
Try a different search term or check the spelling
|
Try a different search term or check the spelling
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Layouts.app>
|
</Layouts.app>
|
||||||
|
|||||||
Reference in New Issue
Block a user