style: fixed height issue in module card (#599)

This commit is contained in:
Kunal Vishwakarma 2023-03-30 12:09:42 +05:30 committed by GitHub
parent 06fb3e9b58
commit 531b9e3d64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 9 deletions

View File

@ -191,7 +191,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col h-full items-end"> <div className="flex flex-col items-end h-20">
<div className="flex w-full items-center justify-between gap-2 justify-self-end bg-gray-100 p-4"> <div className="flex w-full items-center justify-between gap-2 justify-self-end bg-gray-100 p-4">
<span>Progress</span> <span>Progress</span>
<div className="bar relative h-1 w-full rounded bg-gray-300"> <div className="bar relative h-1 w-full rounded bg-gray-300">
@ -204,16 +204,19 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</div> </div>
<span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span> <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
</div> </div>
<div className="flex justify-between w-full px-4 pb-4 bg-gray-100 item-center"> <div className="flex justify-between w-full h-full px-4 pb-4 bg-gray-100 item-center">
<p className="text-[#858E96]"> <p className="text-[#858E96]">
Last updated: Last updated:
<span className="text-black font-medium"> <span className="text-black font-medium">
{renderShortDateWithYearFormat(lastUpdated)} {renderShortDateWithYearFormat(lastUpdated)}
</span> </span>
</p> </p>
<div className="flex items-center gap-1"> {
<AssigneesList users={module.members_detail} length={4} /> module.members_detail.length>0 &&
</div> <div className="flex items-center gap-1">
<AssigneesList users={module.members_detail} length={4} />
</div>
}
</div> </div>
</div> </div>
</div> </div>

View File

@ -95,7 +95,7 @@ const ProjectModules: NextPage<UserAuth> = (props) => {
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<h3 className="text-3xl font-semibold text-black">Modules</h3> <h3 className="text-3xl font-semibold text-black">Modules</h3>
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
{modules.map((module) => ( {modules.map((module) => (
<SingleModuleCard <SingleModuleCard
key={module.id} key={module.id}