mirror of
https://github.com/oxen-io/oxen-website.git
synced 2023-12-13 21:00:18 +01:00
Fix pagination button logic on mobile
This commit is contained in:
parent
f1d55e7782
commit
7a2e68ef5b
1 changed files with 9 additions and 2 deletions
|
@ -111,6 +111,13 @@ const Blog = (props: Props) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Mobile Pagination Settings
|
||||||
|
const MAX_PAGINATION_BUTTONS_MOBILE = 5; // On mobile, we want to only have a maximum of 5 pagination buttons
|
||||||
|
const hasTooManyButtons =
|
||||||
|
isMobile && pageCount > MAX_PAGINATION_BUTTONS_MOBILE; // Check if the maximum number of pagination buttons have been reached
|
||||||
|
const EDGE_PAGES = [1, 2, pageCount - 1, pageCount]; // Check if the current page is an edge page, to keep the number of pagination buttons consistent
|
||||||
|
const isEdgePage = isMobile && EDGE_PAGES.includes(currentPage);
|
||||||
|
|
||||||
const pagination = (
|
const pagination = (
|
||||||
<Contained>
|
<Contained>
|
||||||
<div className="flex justify-center mb-4">
|
<div className="flex justify-center mb-4">
|
||||||
|
@ -124,8 +131,8 @@ const Blog = (props: Props) => {
|
||||||
containerClassName={'pagination bg-primary text-white front-prompt'}
|
containerClassName={'pagination bg-primary text-white front-prompt'}
|
||||||
initialPage={currentPage - 1}
|
initialPage={currentPage - 1}
|
||||||
pageCount={pageCount}
|
pageCount={pageCount}
|
||||||
marginPagesDisplayed={isMobile ? 1 : 2}
|
marginPagesDisplayed={hasTooManyButtons && !isEdgePage ? 1 : 2}
|
||||||
pageRangeDisplayed={1}
|
pageRangeDisplayed={isMobile ? 1 : 2}
|
||||||
onPageChange={paginationHandler}
|
onPageChange={paginationHandler}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue