fixed card width in core.css

This commit is contained in:
pramod mahajan 2025-07-14 18:17:07 +05:30 committed by pramod.mahajan
parent dce29422f4
commit 6a7eb0ee91
3 changed files with 145 additions and 147 deletions

View File

@ -2553,7 +2553,7 @@ progress {
} }
.table-responsive { .table-responsive {
/* overflow-x: auto; */ overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

View File

@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
}, [prefernceContacts]); }, [prefernceContacts]);
return ( return (
<div className="container-fluid"> <div className={IsPage ? "container-fluid":""}>
{IsPage && ( {IsPage && (
<Breadcrumb <Breadcrumb
data={[ data={[

View File

@ -263,155 +263,153 @@ const ProjectList = () => {
<p className="text-center text-muted">No projects found.</p> <p className="text-center text-muted">No projects found.</p>
)} )}
{listView ? ( {listView ? (
<div className="card cursor-pointer"> <div className="card cursor-pointer">
<div className="card-body p-2" style={{ minHeight: "200px" }}> <div className="card-body p-2">
<div className="table-responsive text-nowrap py-2"> <div className="table-responsive text-nowrap py-2 " style={{minHeight:"400px"}}>
<table className="table m-3"> <table className="table m-3">
<thead> <thead>
<tr> <tr>
<th className="text-start" colSpan={5}> <th className="text-start" colSpan={5} >
Project Name Project Name
</th> </th>
<th className="mx-2 text-start">Contact Person</th> <th className="mx-2 text-start">Contact Person</th>
<th className="mx-2">START DATE</th> <th className="mx-2">START DATE</th>
<th className="mx-2">DEADLINE</th> <th className="mx-2">DEADLINE</th>
<th className="mx-2">Task</th> <th className="mx-2">Task</th>
<th className="mx-2">Progress</th> <th className="mx-2">Progress</th>
<th className="mx-2"> <th className="mx-2">
<div className="dropdown"> <div className="dropdown">
<a <a
className="dropdown-toggle hide-arrow cursor-pointer" className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
Status <i className="bx bx-filter bx-sm"></i> Status <i className="bx bx-filter bx-sm"></i>
</a> </a>
<ul className="dropdown-menu p-2 text-capitalize"> <ul className="dropdown-menu p-2 text-capitalize">
{[ {[
{ {
id: "b74da4c2-d07e-46f2-9919-e75e49b12731", id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active", label: "Active",
}, },
{ {
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba", id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
label: "On Hold", label:"In Progress"
}, },
{ {
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d", id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "Inactive", label: "On Hold",
}, },
{ {
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81", id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Completed", label: "Inactive",
}, },
].map(({ id, label }) => ( {
<li key={id}> id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
<div className="form-check"> label: "Completed",
<input },
className="form-check-input" ].map(({ id, label }) => (
type="checkbox" <li key={id}>
checked={selectedStatuses.includes(id)} <div className="form-check">
onChange={() => handleStatusChange(id)} <input
/> className="form-check-input "
<label className="form-check-label">{label}</label> type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">
{label}
</label>
</div>
</li>
))}
</ul>
</div> </div>
</li> </th>
))} <th
</ul> className={`mx-2 ${
</div> HasManageProject ? "d-sm-table-cell" : "d-none"
</th> }`}
<th >
className={`mx-2 ${ Action
HasManageProject ? "d-sm-table-cell" : "d-none" </th>
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto ">
{currentItems.length === 0 ? (
<tr className="text-center">
<td colSpan="12" rowSpan='12'style={{height:"200px"}} >
No projects found
</td>
</tr>
) : (
currentItems.map((project) => (
<ProjectListView
key={project.id}
projectData={project}
recall={sortingProject}
/>
))
)}
</tbody>
</table>
</div>{" "}
</div>{" "}
</div>
) : (
<div className="row">
{currentItems.map((project) => (
<ProjectCard
key={project.id}
projectData={project}
recall={sortingProject}
/>
))}
</div>
)}
{!loading && totalPages > 1 && (
<nav>
<ul className="pagination pagination-sm justify-content-end py-2">
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
<button
className="page-link"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, i) => (
<li
key={i}
className={`page-item ${currentPage === i + 1 && "active"}`}
>
<button
className="page-link"
onClick={() => setCurrentPage(i + 1)}
>
{i + 1}
</button>
</li>
))}
<li
className={`page-item ${
currentPage === totalPages && "disabled"
}`} }`}
> >
Action <button
</th> className="page-link"
</tr> onClick={() =>
</thead> setCurrentPage((p) => Math.min(totalPages, p + 1))
<tbody className="table-border-bottom-0" style={{ height: "200px" }}> }
{currentItems.length === 0 ? (
<tr>
<td
colSpan="12"
className="text-center"
style={{
verticalAlign: "middle",
height: "200px",
paddingTop: 0,
paddingBottom: 0,
}}
> >
<div className="d-flex flex-column justify-content-center align-items-center h-100"> &raquo;
<p className="mb-0">No projects found</p> </button>
</div> </li>
</td> </ul>
</tr> </nav>
) : ( )}
currentItems.map((project) => (
<ProjectListView
key={project.id}
projectData={project}
recall={sortingProject}
/>
))
)}
</tbody>
</table>
</div>
</div>
</div>
) : (
<div className="row">
{currentItems.map((project) => (
<ProjectCard
key={project.id}
projectData={project}
recall={sortingProject}
/>
))}
</div>
)}
{!loading && totalPages > 1 && (
<nav>
<ul className="pagination pagination-sm justify-content-end py-2">
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
<button
className="page-link"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, i) => (
<li
key={i}
className={`page-item ${currentPage === i + 1 && "active"}`}
>
<button
className="page-link"
onClick={() => setCurrentPage(i + 1)}
>
{i + 1}
</button>
</li>
))}
<li className={`page-item ${currentPage === totalPages && "disabled"}`}>
<button
className="page-link"
onClick={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
>
&raquo;
</button>
</li>
</ul>
</nav>
)}
</div> </div>
</> </>
); );