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

Merge pull request 'Reduce the checkbox size and remove unnecessary spacing within the Directory Notes and Contact filters.' (#228) from Kartik_Bug#612 into Issues_July_1W

Browse Source 
Reviewed-on: #228
This commit is contained in:
Vikas Nale 2025-07-05 11:13:57 +00:00
commit 6914b1cd90
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/Directory/DirectoryPageHeader.jsx
View File

@ -306,7 +306,7 @@ const DirectoryPageHeader = ({
)} )}
</a> </a>
<div className="dropdown-menu p-0" style={{ minWidth: "700px" }}> <div className="dropdown-menu p-0" style={{ minWidth: "550px" }}>
{/* Scrollable Filter Content */} {/* Scrollable Filter Content */}
<div <div
className="p-3" className="p-3"
@ -319,18 +319,19 @@ const DirectoryPageHeader = ({
> >
<div className="d-flex gap-3"> <div className="d-flex gap-3">
{/* Created By */} {/* Created By */}
<div style={{ flex: 0.50, maxHeight: "260px", overflowY: "auto" }}> <div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}> <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
<p className="text-muted mb-2 pt-2">Created By</p> <p className="text-muted mb-2 pt-2">Created By</p>
</div> </div>
{allCreators.map((name, idx) => ( {allCreators.map((name, idx) => (
<div className="form-check mb-1" key={`creator-${idx}`}> <div className="form-check mb-1" key={`creator-${idx}`}>
<input <input
className="form-check-input" className="form-check-input form-check-input-sm"
type="checkbox" type="checkbox"
id={`creator-${idx}`} id={`creator-${idx}`}
checked={selectedCreators.includes(name)} checked={selectedCreators.includes(name)}
onChange={() => handleToggleCreator(name)} onChange={() => handleToggleCreator(name)}
style={{ width: "1rem", height: "1rem" }}
/> />
<label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}> <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
{name} {name}
@ -340,18 +341,19 @@ const DirectoryPageHeader = ({
</div> </div>
{/* Organization */} {/* Organization */}
<div style={{ flex: 1, maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}> <div style={{ maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}> <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
<p className="text-muted mb-2 pt-2">Organization</p> <p className="text-muted mb-2 pt-2">Organization</p>
</div> </div>
{filteredOrganizations.map((org, idx) => ( {filteredOrganizations.map((org, idx) => (
<div className="form-check mb-1" key={`org-${idx}`}> <div className="form-check mb-1" key={`org-${idx}`}>
<input <input
className="form-check-input" className="form-check-input form-check-input-sm"
type="checkbox" type="checkbox"
id={`org-${idx}`} id={`org-${idx}`}
checked={selectedOrgs.includes(org)} checked={selectedOrgs.includes(org)}
onChange={() => handleToggleOrg(org)} onChange={() => handleToggleOrg(org)}
style={{ width: "1rem", height: "1rem" }}
/> />
<label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}> <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
{org} {org}
@ -444,11 +446,12 @@ const DirectoryPageHeader = ({
{filteredBuckets.map(({ id, name }) => ( {filteredBuckets.map(({ id, name }) => (
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}> <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
<input <input
className="form-check-input" className="form-check-input form-check-input-sm"
type="checkbox" type="checkbox"
id={`bucket-${id}`} id={`bucket-${id}`}
checked={tempSelectedBucketIds.includes(id)} checked={tempSelectedBucketIds.includes(id)}
onChange={() => handleTempBucketChange(id)} onChange={() => handleTempBucketChange(id)}
style={{ width: "1rem", height: "1rem" }}
/> />
<label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}> <label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
{name} {name}
@ -463,11 +466,12 @@ const DirectoryPageHeader = ({
{filteredCategories.map(({ id, name }) => ( {filteredCategories.map(({ id, name }) => (
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}> <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
<input <input
className="form-check-input" className="form-check-input form-check-input-sm"
type="checkbox" type="checkbox"
id={`cat-${id}`} id={`cat-${id}`}
checked={tempSelectedCategoryIds.includes(id)} checked={tempSelectedCategoryIds.includes(id)}
onChange={() => handleTempCategoryChange(id)} onChange={() => handleTempCategoryChange(id)}
style={{ width: "1rem", height: "1rem" }}
/> />
<label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}> <label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
{name} {name}