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

make the mobile pagination look nicer
Some checks failed
Deploy Website / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Lee 2024-10-14 10:55:55 +01:00
parent eb06801026
commit a6b99219e1
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,8 @@ import {
PaginationNext, PaginationNext,
PaginationPrevious, PaginationPrevious,
} from "../ui/pagination"; } from "../ui/pagination";
import * as React from "react";
import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/16/solid";
type PaginationItemWrapperProps = { type PaginationItemWrapperProps = {
/** /**
@ -116,9 +118,11 @@ export default function Pagination({
pageNumbers.push( pageNumbers.push(
<> <>
<PaginationItemWrapper key="start" isLoadingPage={isLoading}> <PaginationItemWrapper key="start" isLoadingPage={isLoading}>
<PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}> {!mobilePagination && (
1 <PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}>
</PaginationLink> 1
</PaginationLink>
)}
</PaginationItemWrapper> </PaginationItemWrapper>
{startPage > 2 && !mobilePagination && ( {startPage > 2 && !mobilePagination && (
<PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}> <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
@ -149,6 +153,15 @@ export default function Pagination({
return ( return (
<ShadCnPagination className="select-none scale-75"> <ShadCnPagination className="select-none scale-75">
<PaginationContent> <PaginationContent>
{/* ">>" before the Previous button in mobile mode */}
{mobilePagination && (
<PaginationItemWrapper key="mobile-start" isLoadingPage={isLoading}>
<PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}>
<ChevronDoubleLeftIcon className="h-4 w-4" />
</PaginationLink>
</PaginationItemWrapper>
)}
{/* Previous button - disabled on the first page */} {/* Previous button - disabled on the first page */}
<PaginationItemWrapper isLoadingPage={isLoading}> <PaginationItemWrapper isLoadingPage={isLoading}>
<PaginationPrevious <PaginationPrevious
@ -161,24 +174,6 @@ export default function Pagination({
{renderPageNumbers()} {renderPageNumbers()}
{currentPage < totalPages && totalPages - currentPage > 2 && (
<>
{!mobilePagination && (
<PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
<PaginationEllipsis className="cursor-default" />
</PaginationItemWrapper>
)}
<PaginationItemWrapper key="end" isLoadingPage={isLoading}>
<PaginationLink
href={generatePageUrl ? generatePageUrl(totalPages) : ""}
onClick={e => handleLinkClick(totalPages, e)}
>
{totalPages}
</PaginationLink>
</PaginationItemWrapper>
</>
)}
{/* Next button - disabled on the last page */} {/* Next button - disabled on the last page */}
<PaginationItemWrapper isLoadingPage={isLoading}> <PaginationItemWrapper isLoadingPage={isLoading}>
<PaginationNext <PaginationNext
@ -188,6 +183,18 @@ export default function Pagination({
className={clsx(currentPage === totalPages && "cursor-not-allowed")} className={clsx(currentPage === totalPages && "cursor-not-allowed")}
/> />
</PaginationItemWrapper> </PaginationItemWrapper>
{/* ">>" after the Next button in mobile mode */}
{mobilePagination && (
<PaginationItemWrapper key="mobile-end" isLoadingPage={isLoading}>
<PaginationLink
href={generatePageUrl ? generatePageUrl(totalPages) : ""}
onClick={e => handleLinkClick(totalPages, e)}
>
<ChevronDoubleRightIcon className="h-4 w-4" />
</PaginationLink>
</PaginationItemWrapper>
)}
</PaginationContent> </PaginationContent>
</ShadCnPagination> </ShadCnPagination>
); );

3
projects/website/src/components/ui/pagination.tsx
View File

@ -1,4 +1,5 @@
import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"; import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
import { DotsHorizontalIcon } from "@radix-ui/react-icons";
import * as React from "react"; import * as React from "react";
import { cn } from "@/common/utils"; import { cn } from "@/common/utils";