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