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

Smooth scroll to top when paginating records

Browse Source
This commit is contained in:
Claudio Ortolina
2024-12-08 15:18:14 +01:00
parent 517a5e26fa
commit 7e31c95839
4 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+3
View File
@@ -40,6 +40,9 @@ window.addEventListener("music_library:clipcopy", (event) => {
alert("Sorry, your browser does not support clipboard copy."); alert("Sorry, your browser does not support clipboard copy.");
} }
}); });
window.addEventListener("music_library:scroll_top", (event) => {
window.scrollTo(0, 0);
});
// connect if there are any LiveViews on the page // connect if there are any LiveViews on the page
liveSocket.connect() liveSocket.connect()
lib/music_library_web/components/layouts/root.html.heex
+1 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]"> <html lang="en" class="[scrollbar-gutter:stable] scroll-smooth">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
lib/music_library_web/components/pagination.ex
+5 -1
View File
@@ -1,8 +1,9 @@
defmodule MusicLibraryWeb.Pagination do defmodule MusicLibraryWeb.Pagination do
use Phoenix.Component use Phoenix.Component
use Gettext, backend: MusicLibraryWeb.Gettext use Gettext, backend: MusicLibraryWeb.Gettext
alias Phoenix.LiveView.JS
attr :pagination_params, :map, required: true attr :pagination_params, :map, required: true
attr :id, :atom, required: true attr :id, :atom, required: true
@@ -107,6 +108,7 @@ defmodule MusicLibraryWeb.Pagination do
"relative inline-flex items-center rounded-r-md px-2 py-2", "relative inline-flex items-center rounded-r-md px-2 py-2",
"text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0" "text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0"
]} ]}
phx-click={JS.dispatch("music_library:scroll_top")}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)} patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
> >
<span class="sr-only">{gettext("Next")}</span> <span class="sr-only">{gettext("Next")}</span>
@@ -129,6 +131,7 @@ defmodule MusicLibraryWeb.Pagination do
~H""" ~H"""
<.link <.link
class="relative inline-flex items-center rounded-l-md px-2 py-2 text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0" class="relative inline-flex items-center rounded-l-md px-2 py-2 text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0"
phx-click={JS.dispatch("music_library:scroll_top")}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)} patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
> >
<span class="sr-only">{gettext("Previous")}</span> <span class="sr-only">{gettext("Previous")}</span>
@@ -168,6 +171,7 @@ defmodule MusicLibraryWeb.Pagination do
~H""" ~H"""
<.link <.link
class="relative hidden items-center first:rounded-l-md last:rounded-r-md px-4 py-2 text-sm font-semibold text-zinc-900 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300 hover:text-zinc-500 focus:z-20 focus:outline-offset-0 md:inline-flex" class="relative hidden items-center first:rounded-l-md last:rounded-r-md px-4 py-2 text-sm font-semibold text-zinc-900 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300 hover:text-zinc-500 focus:z-20 focus:outline-offset-0 md:inline-flex"
phx-click={JS.dispatch("music_library:scroll_top")}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)} patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
> >
{@page_number} {@page_number}
priv/gettext/default.pot
+4 -4
View File
@@ -156,8 +156,8 @@ msgstr ""
msgid "MusicBrainz ID" msgid "MusicBrainz ID"
msgstr "" msgstr ""
#: lib/music_library_web/components/pagination.ex:49 #: lib/music_library_web/components/pagination.ex:50
#: lib/music_library_web/components/pagination.ex:112 #: lib/music_library_web/components/pagination.ex:114
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Next" msgid "Next"
msgstr "" msgstr ""
@@ -183,8 +183,8 @@ msgstr ""
msgid "Password" msgid "Password"
msgstr "" msgstr ""
#: lib/music_library_web/components/pagination.ex:36 #: lib/music_library_web/components/pagination.ex:37
#: lib/music_library_web/components/pagination.ex:134 #: lib/music_library_web/components/pagination.ex:137
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Previous" msgid "Previous"
msgstr "" msgstr ""