admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge pull request '"Pagination overlaps on '+' (Add) button in Directory – bottom right corner"' (#218) from Kartik_Bug#611 into Issues_Jun_3W

Browse Source 
Reviewed-on: #218
This commit is contained in:
Vikas Nale 2025-06-30 06:43:00 +00:00
commit d86c8a2c0b
1 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/Directory/NotesCardViewDirectory.jsx
View File

@ -107,7 +107,7 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
return (
<div className="w-100 h-100 ">
{/* Filter Dropdown */}
<div className="dropdown mb-3 ms-2">
<div className="dropdown mb-3 ms-2">
</div>
{/* Notes List */}
@ -129,41 +129,46 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
{/* Pagination */}
{totalPages > 1 && (
<div className="d-flex justify-content-end mt-3 me-3">
<div className="d-flex align-items-center gap-2">
<button
className="btn btn-sm rounded-circle border"
onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
disabled={currentPage === 1}
title="Previous"
>
«
</button>
<div className="d-flex justify-content-end mt-2 align-items-center gap-2"
style={{ marginBottom: '70px' }}>
{/* Previous Button */}
<button
className="btn btn-sm rounded-circle border text-secondary" // Added text-secondary for lighter color, kept btn-sm for smaller size like in image
onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
disabled={currentPage === 1}
title="Previous"
style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
>
«
</button>
{[...Array(totalPages)].map((_, i) => {
const page = i + 1;
return (
<button
key={page}
className={`btn btn-sm rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-outline-primary"
}`}
style={{ width: "32px", height: "32px", padding: 0 }}
onClick={() => handlePageClick(page)}
>
{page}
</button>
);
})}
{/* Page Number Buttons */}
{[...Array(totalPages)].map((_, i) => {
const page = i + 1;
return (
<button
key={page}
// Changed btn-sm to just btn, adjusted class for active/inactive state backgrounds and text colors
className={`btn rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-light text-secondary"
}`}
style={{ width: "38px", height: "38px", padding: 0, fontSize: "1rem", lineHeight: "1" }} // Adjusted size and font for better fit
onClick={() => handlePageClick(page)}
>
{page}
</button>
);
})}
<button
className="btn btn-sm rounded-circle border"
onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages}
title="Next"
>
»
</button>
</div>
{/* Next Button */}
<button
className="btn btn-sm rounded-circle border text-secondary" // Added text-secondary for lighter color, kept btn-sm
onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages}
title="Next"
style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
>
»
</button>
</div>
)}
</div>