PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-02 16:23:48 +03:00
Code Issues Actions 1 Packages Projects Releases 1 Wiki Activity

feat: smooth scrolling on pagination

Browse Source
This commit is contained in:
Hachi-R 2024-12-23 18:49:18 -03:00
parent 502f3b4aa7
commit a499aae31f
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/pages/catalogue/catalogue.scss
View File

@ -1,11 +1,13 @@
@use "../../scss/globals.scss"; @use "../../scss/globals.scss";
.catalogue { .catalogue {
overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc(globals.$spacing-unit * 2); gap: calc(globals.$spacing-unit * 2);
width: 100%; width: 100%;
padding: 16px; padding: 16px;
scroll-behavior: smooth;
&__filters-container { &__filters-container {
width: 270px; width: 270px;

10
src/renderer/src/pages/catalogue/catalogue.tsx
View File

@ -33,6 +33,7 @@ const PAGE_SIZE = 20;
export default function Catalogue() { export default function Catalogue() {
const abortControllerRef = useRef<AbortController | null>(null); const abortControllerRef = useRef<AbortController | null>(null);
const cataloguePageRef = useRef<HTMLDivElement>(null);
const { steamGenres, steamUserTags, steamDevelopers, steamPublishers } = const { steamGenres, steamUserTags, steamDevelopers, steamPublishers } =
useCatalogue(); useCatalogue();
@ -214,7 +215,7 @@ export default function Catalogue() {
]); ]);
return ( return (
<div className="catalogue"> <div className="catalogue" ref={cataloguePageRef}>
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -303,7 +304,12 @@ export default function Catalogue() {
<Pagination <Pagination
page={page} page={page}
totalPages={Math.ceil(itemsCount / PAGE_SIZE)} totalPages={Math.ceil(itemsCount / PAGE_SIZE)}
onPageChange={(page) => dispatch(setPage(page))} onPageChange={(page) => {
dispatch(setPage(page));
if (cataloguePageRef.current) {
cataloguePageRef.current.scrollTop = 0;
}
}}
/> />
</div> </div>
</div> </div>