rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix card items alignement

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-03-16 18:30:57 +01:00
parent 09f853e4a8
commit 34ef38a0eb
1 changed files with 53 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
apps/console/src/pages/FrameworkOverviewPage.tsx
View File

@@ -121,63 +121,67 @@ function FrameworkOverviewPageContent({
key={index} key={index}
className="rounded-xl border border-gray-200 relative" className="rounded-xl border border-gray-200 relative"
> >
<div className="p-4 rounded-xl"> <div className="p-4 rounded-xl h-full flex flex-col">
<div className="flex items-center justify-between"> <div className="flex items-center h-8">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Shield className="w-4 h-4 text-muted-foreground" /> <Shield className="w-4 h-4 text-muted-foreground" />
<span className="text-sm font-medium">{card.title}</span> <span className="text-sm font-medium">{card.title}</span>
</div> </div>
</div> </div>
<div className="mt-4 space-y-2"> <div className="mt-4 flex-1 flex flex-col justify-between">
<div className="flex flex-wrap gap-1"> <div className="min-h-[40px]">
{Array(card.total) <div className="flex flex-wrap gap-1">
.fill(0) {Array(card.total)
.map((_, i) => { .fill(0)
const control = card.controls[i]; .map((_, i) => {
return ( const control = card.controls[i];
<div return (
key={i} <div
className={`h-4 w-4 ${ key={i}
control?.state === "IMPLEMENTED" className={`h-4 w-4 ${
? "bg-[#D1FA84]" control?.state === "IMPLEMENTED"
: "bg-[#E5E7EB]" ? "bg-[#D1FA84]"
} rounded-md hover:scale-110 hover:shadow-md transition-all duration-200 cursor-pointer`} : "bg-[#E5E7EB]"
onMouseEnter={(e) => { } rounded-md hover:scale-110 hover:shadow-md transition-all duration-200 cursor-pointer`}
setHoveredCard(index); onMouseEnter={(e) => {
setHoveredControl(i); setHoveredCard(index);
const rect = setHoveredControl(i);
e.currentTarget.getBoundingClientRect(); const rect =
e.currentTarget.getBoundingClientRect();
setTooltipPosition({ setTooltipPosition({
x: rect.left, x: rect.left,
y: rect.top - 10, y: rect.top - 10,
width: 400, width: 400,
}); });
}} }}
onClick={() => { onClick={() => {
if (control?.id) { if (control?.id) {
navigate( navigate(
`/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}` `/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`
); );
}
}}
onMouseLeave={() => {
setTimeout(() => {
if (!isTooltipHovered) {
setHoveredCard(null);
setHoveredControl(null);
setTooltipPosition(null);
} }
}, 500); }}
}} onMouseLeave={() => {
title={control?.name} setTimeout(() => {
/> if (!isTooltipHovered) {
); setHoveredCard(null);
})} setHoveredControl(null);
setTooltipPosition(null);
}
}, 500);
}}
title={control?.name}
/>
);
})}
</div>
</div>
<div className="mt-2">
<span className="text-sm text-muted-foreground">
{card.completed}/{card.total} Controls validated
</span>
</div> </div>
<span className="text-sm text-muted-foreground">
{card.completed}/{card.total} Controls validated
</span>
</div> </div>
</div> </div>
</div> </div>