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
lib/music_library_web/components/layouts/root.html.heex
+1 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
<html lang="en" class="[scrollbar-gutter:stable] scroll-smooth">
<head>
<meta charset="utf-8" />
<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
use Phoenix.Component
use Gettext, backend: MusicLibraryWeb.Gettext
alias Phoenix.LiveView.JS
attr :pagination_params, :map, 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",
"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)}
>
<span class="sr-only">{gettext("Next")}</span>
@@ -129,6 +131,7 @@ defmodule MusicLibraryWeb.Pagination do
~H"""
<.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"
phx-click={JS.dispatch("music_library:scroll_top")}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
>
<span class="sr-only">{gettext("Previous")}</span>
@@ -168,6 +171,7 @@ defmodule MusicLibraryWeb.Pagination do
~H"""
<.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"
phx-click={JS.dispatch("music_library:scroll_top")}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
>
{@page_number}