From 1fbb9d8c0d3a8ecc01e368baeb298566bf312d98 Mon Sep 17 00:00:00 2001 From: afwilcox <alecwilcox@gmail.com> Date: Fri, 19 Jul 2024 11:38:48 -0700 Subject: [PATCH] feat: support pagination on ipad --- .../common/complaint-pagination.tsx | 23 +++++++++++-------- frontend/src/assets/sass/layout.scss | 2 +- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/components/common/complaint-pagination.tsx b/frontend/src/app/components/common/complaint-pagination.tsx index 0bce2b301..16024ec51 100644 --- a/frontend/src/app/components/common/complaint-pagination.tsx +++ b/frontend/src/app/components/common/complaint-pagination.tsx @@ -3,6 +3,7 @@ import { Form } from "react-bootstrap"; import Select from "react-select"; import Pagination from "react-bootstrap/Pagination"; import Option from "../../types/app/option"; +import config from "../../../config"; interface ComplaintPaginationProps { currentPage: number; @@ -54,8 +55,8 @@ const ComplaintPagination: React.FC<ComplaintPaginationProps> = ({ const items = []; // Calculate the range of pages to display based on the current page - const startPage = Math.max(1, lastPage > 10 ? currentPage - 4 : 1); - const endPage = Math.min(lastPage, startPage + 9); + const startPage = Math.max(1, lastPage > 5 ? currentPage - 4 : 1); + const endPage = Math.min(lastPage, startPage + 5); // Render the ellipsis if necessary if (startPage > 1) { @@ -70,7 +71,7 @@ const ComplaintPagination: React.FC<ComplaintPaginationProps> = ({ ); } - if (startPage > 1 && lastPage > 10) { + if (startPage > 1 && lastPage > 5) { items.push( <Pagination.Ellipsis key="ellipsis-start" @@ -141,13 +142,15 @@ const ComplaintPagination: React.FC<ComplaintPaginationProps> = ({ <div className="pagination_controls_end"> {/* Select total viewable records */} - <Select - menuPlacement="top" - id="resultsPerPageSelect" - options={pageSizeOptions} - classNamePrefix="comp-select" - defaultValue={defaultOption} - /> + {config.SHOW_EXPERIMENTAL_FEATURES === "true" && ( + <Select + menuPlacement="top" + id="resultsPerPageSelect" + options={pageSizeOptions} + classNamePrefix="comp-select" + defaultValue={defaultOption} + /> + )} {/* Go to specific page */} <div className="pagination_specific_page"> diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss index 3262a1f21..f472d6906 100644 --- a/frontend/src/assets/sass/layout.scss +++ b/frontend/src/assets/sass/layout.scss @@ -551,7 +551,7 @@ button.modal-buttons { height: 38px; } -@include media-breakpoint-down(xl) { +@include media-breakpoint-down(lg) { .page-item:not(:first-of-type):not(:last-of-type):not(.active) { display: none; }