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