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

"Pagination overlaps on '+' (Add) button in Directory – bottom right corner"

Browse Source
This commit is contained in:
Kartik sharma 2025-06-28 15:52:28 +05:30
parent 2bdaed1d83
commit 7919c147ee
1 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,25 +129,29 @@ 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={{ marginRight: '70px' }}>
{/* Previous Button */}
<button <button
className="btn btn-sm rounded-circle border" 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))} onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
title="Previous" title="Previous"
style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
> >
« «
</button> </button>
{/* Page Number Buttons */}
{[...Array(totalPages)].map((_, i) => { {[...Array(totalPages)].map((_, i) => {
const page = i + 1; const page = i + 1;
return ( return (
<button <button
key={page} key={page}
className={`btn btn-sm rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-outline-primary" // 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: "32px", height: "32px", padding: 0 }} style={{ width: "38px", height: "38px", padding: 0, fontSize: "1rem", lineHeight: "1" }} // Adjusted size and font for better fit
onClick={() => handlePageClick(page)} onClick={() => handlePageClick(page)}
> >
{page} {page}
@ -155,16 +159,17 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
); );
})} })}
{/* Next Button */}
<button <button
className="btn btn-sm rounded-circle border" 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))} onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
title="Next" title="Next"
style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
> >
» »
</button> </button>
</div> </div>
</div>
)} )}
</div> </div>
); );