Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

make the mobile pagination more useful
All checks were successful
Deploy Website / deploy (push) Successful in 4m33s
Details

Browse Source
This commit is contained in:
Lee 2024-10-14 10:45:43 +01:00
parent ac4298c765
commit eb06801026
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
projects/website/src/components/input/pagination.tsx
View File

@ -112,7 +112,7 @@ export default function Pagination({
startPage = Math.max(1, endPage - maxPagesToShow + 1); startPage = Math.max(1, endPage - maxPagesToShow + 1);
} }
if (startPage > 1 && !mobilePagination) { if (startPage > 1) {
pageNumbers.push( pageNumbers.push(
<> <>
<PaginationItemWrapper key="start" isLoadingPage={isLoading}> <PaginationItemWrapper key="start" isLoadingPage={isLoading}>
@ -120,7 +120,7 @@ export default function Pagination({
1 1
</PaginationLink> </PaginationLink>
</PaginationItemWrapper> </PaginationItemWrapper>
{startPage > 2 && ( {startPage > 2 && !mobilePagination && (
<PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}> <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
<PaginationEllipsis /> <PaginationEllipsis />
</PaginationItemWrapper> </PaginationItemWrapper>
@ -147,7 +147,7 @@ export default function Pagination({
}; };
return ( return (
<ShadCnPagination className="select-none"> <ShadCnPagination className="select-none scale-75">
<PaginationContent> <PaginationContent>
{/* Previous button - disabled on the first page */} {/* Previous button - disabled on the first page */}
<PaginationItemWrapper isLoadingPage={isLoading}> <PaginationItemWrapper isLoadingPage={isLoading}>
@ -161,11 +161,13 @@ export default function Pagination({
{renderPageNumbers()} {renderPageNumbers()}
{!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && ( {currentPage < totalPages && totalPages - currentPage > 2 && (
<> <>
<PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}> {!mobilePagination && (
<PaginationEllipsis className="cursor-default" /> <PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
</PaginationItemWrapper> <PaginationEllipsis className="cursor-default" />
</PaginationItemWrapper>
)}
<PaginationItemWrapper key="end" isLoadingPage={isLoading}> <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
<PaginationLink <PaginationLink
href={generatePageUrl ? generatePageUrl(totalPages) : ""} href={generatePageUrl ? generatePageUrl(totalPages) : ""}