style: Tighten CV list spacing on dashboard
- Reduce table cell padding for more compact rows - Smaller status badges and icons - Reduced margins and gaps throughout - More CVs visible without scrolling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -118,10 +118,10 @@
|
|||||||
else
|
else
|
||||||
{
|
{
|
||||||
<!-- Stats Cards -->
|
<!-- Stats Cards -->
|
||||||
<div class="row mb-4 g-4">
|
<div class="row mb-3 g-3">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card border-0 shadow-sm stat-card h-100">
|
<div class="card border-0 shadow-sm stat-card h-100">
|
||||||
<div class="card-body p-4">
|
<div class="card-body p-3">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<div class="stat-icon stat-icon-primary me-3">
|
<div class="stat-icon stat-icon-primary me-3">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
||||||
@@ -139,7 +139,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card border-0 shadow-sm stat-card h-100">
|
<div class="card border-0 shadow-sm stat-card h-100">
|
||||||
<div class="card-body p-4">
|
<div class="card-body p-3">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<div class="stat-icon stat-icon-success me-3">
|
<div class="stat-icon stat-icon-success me-3">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
||||||
@@ -157,7 +157,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card border-0 shadow-sm stat-card h-100">
|
<div class="card border-0 shadow-sm stat-card h-100">
|
||||||
<div class="card-body p-4">
|
<div class="card-body p-3">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<div class="stat-icon stat-icon-warning me-3">
|
<div class="stat-icon stat-icon-warning me-3">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
||||||
@@ -176,7 +176,7 @@
|
|||||||
|
|
||||||
<!-- Checks List -->
|
<!-- Checks List -->
|
||||||
<div class="card border-0 shadow-sm">
|
<div class="card border-0 shadow-sm">
|
||||||
<div class="card-header py-3 border-bottom" style="background-color: var(--realcv-bg-surface);">
|
<div class="card-header py-2 px-3 border-bottom" style="background-color: var(--realcv-bg-surface);">
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<div class="d-flex align-items-center gap-3">
|
<div class="d-flex align-items-center gap-3">
|
||||||
<h5 class="mb-0 fw-bold">Recent CV Checks</h5>
|
<h5 class="mb-0 fw-bold">Recent CV Checks</h5>
|
||||||
@@ -203,17 +203,17 @@
|
|||||||
<table class="table table-hover align-middle mb-0">
|
<table class="table table-hover align-middle mb-0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr style="background-color: var(--realcv-bg-muted);">
|
<tr style="background-color: var(--realcv-bg-muted);">
|
||||||
<th class="border-0 ps-3 py-3" style="width: 40px;">
|
<th class="border-0 ps-3 py-2" style="width: 40px;">
|
||||||
<input type="checkbox" class="form-check-input"
|
<input type="checkbox" class="form-check-input"
|
||||||
checked="@IsAllSelected()"
|
checked="@IsAllSelected()"
|
||||||
@onchange="ToggleSelectAll"
|
@onchange="ToggleSelectAll"
|
||||||
title="Select all" />
|
title="Select all" />
|
||||||
</th>
|
</th>
|
||||||
<th class="border-0 py-3 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Candidate</th>
|
<th class="border-0 py-2 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Candidate</th>
|
||||||
<th class="border-0 py-3 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Uploaded</th>
|
<th class="border-0 py-2 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Uploaded</th>
|
||||||
<th class="border-0 py-3 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Status</th>
|
<th class="border-0 py-2 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Status</th>
|
||||||
<th class="border-0 py-3 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Score</th>
|
<th class="border-0 py-2 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Score</th>
|
||||||
<th class="border-0 py-3 pe-4 text-uppercase small fw-semibold text-muted text-end" style="letter-spacing: 0.05em;">Actions</th>
|
<th class="border-0 py-2 pe-4 text-uppercase small fw-semibold text-muted text-end" style="letter-spacing: 0.05em;">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -221,15 +221,15 @@
|
|||||||
{
|
{
|
||||||
<tr class="@(check.Status == "Completed" ? "cursor-pointer" : "") @(_selectedIds.Contains(check.Id) ? "table-active" : "")"
|
<tr class="@(check.Status == "Completed" ? "cursor-pointer" : "") @(_selectedIds.Contains(check.Id) ? "table-active" : "")"
|
||||||
@onclick="() => ViewReport(check)">
|
@onclick="() => ViewReport(check)">
|
||||||
<td class="ps-3 py-3" @onclick:stopPropagation="true">
|
<td class="ps-3 py-2" @onclick:stopPropagation="true">
|
||||||
<input type="checkbox" class="form-check-input"
|
<input type="checkbox" class="form-check-input"
|
||||||
checked="@_selectedIds.Contains(check.Id)"
|
checked="@_selectedIds.Contains(check.Id)"
|
||||||
@onchange="() => ToggleSelection(check.Id)" />
|
@onchange="() => ToggleSelection(check.Id)" />
|
||||||
</td>
|
</td>
|
||||||
<td class="py-3">
|
<td class="py-2">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<div class="file-icon-wrapper me-3">
|
<div class="file-icon-wrapper me-2">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-file-earmark-person text-primary" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-earmark-person text-primary" viewBox="0 0 16 16">
|
||||||
<path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
<path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
||||||
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2v9.255S12 12 8 12s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h5.5v2z"/>
|
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2v9.255S12 12 8 12s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h5.5v2z"/>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -240,17 +240,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="py-3">
|
<td class="py-2">
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-0 small">@check.CreatedAt.ToString("dd MMM yyyy")</p>
|
<p class="mb-0 small">@check.CreatedAt.ToString("dd MMM yyyy")</p>
|
||||||
<small class="text-muted">@check.CreatedAt.ToString("HH:mm")</small>
|
<small class="text-muted">@check.CreatedAt.ToString("HH:mm")</small>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="py-3 text-center">
|
<td class="py-2 text-center">
|
||||||
@switch (check.Status)
|
@switch (check.Status)
|
||||||
{
|
{
|
||||||
case "Completed":
|
case "Completed":
|
||||||
<span class="badge rounded-pill bg-success-subtle text-success px-3 py-2">
|
<span class="badge rounded-pill bg-success-subtle text-success px-2 py-1">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-check-circle-fill me-1" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-check-circle-fill me-1" viewBox="0 0 16 16">
|
||||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -258,13 +258,13 @@
|
|||||||
</span>
|
</span>
|
||||||
break;
|
break;
|
||||||
case "Processing":
|
case "Processing":
|
||||||
<span class="badge rounded-pill bg-primary-subtle text-primary px-3 py-2">
|
<span class="badge rounded-pill bg-primary-subtle text-primary px-2 py-1">
|
||||||
<span class="spinner-border spinner-border-sm me-1" role="status" style="width: 0.75rem; height: 0.75rem;"></span>
|
<span class="spinner-border spinner-border-sm me-1" role="status" style="width: 0.75rem; height: 0.75rem;"></span>
|
||||||
@(check.ProcessingStage ?? "Processing")
|
@(check.ProcessingStage ?? "Processing")
|
||||||
</span>
|
</span>
|
||||||
break;
|
break;
|
||||||
case "Pending":
|
case "Pending":
|
||||||
<span class="badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2">
|
<span class="badge rounded-pill bg-secondary-subtle text-secondary px-2 py-1">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-clock me-1" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-clock me-1" viewBox="0 0 16 16">
|
||||||
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
|
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
|
||||||
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
|
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
|
||||||
@@ -273,7 +273,7 @@
|
|||||||
</span>
|
</span>
|
||||||
break;
|
break;
|
||||||
case "Failed":
|
case "Failed":
|
||||||
<span class="badge rounded-pill bg-danger-subtle text-danger px-3 py-2">
|
<span class="badge rounded-pill bg-danger-subtle text-danger px-2 py-1">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-x-circle-fill me-1" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-x-circle-fill me-1" viewBox="0 0 16 16">
|
||||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -281,11 +281,11 @@
|
|||||||
</span>
|
</span>
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
<span class="badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2">@check.Status</span>
|
<span class="badge rounded-pill bg-secondary-subtle text-secondary px-2 py-1">@check.Status</span>
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
</td>
|
</td>
|
||||||
<td class="py-3 text-center">
|
<td class="py-2 text-center">
|
||||||
@if (check.VeracityScore.HasValue)
|
@if (check.VeracityScore.HasValue)
|
||||||
{
|
{
|
||||||
<div class="score-ring-container" title="Veracity Score: @check.VeracityScore%">
|
<div class="score-ring-container" title="Veracity Score: @check.VeracityScore%">
|
||||||
@@ -303,7 +303,7 @@
|
|||||||
<span class="text-muted">--</span>
|
<span class="text-muted">--</span>
|
||||||
}
|
}
|
||||||
</td>
|
</td>
|
||||||
<td class="py-3 pe-4 text-end">
|
<td class="py-2 pe-4 text-end">
|
||||||
<div class="d-flex justify-content-end align-items-center gap-2">
|
<div class="d-flex justify-content-end align-items-center gap-2">
|
||||||
@if (check.Status == "Completed")
|
@if (check.Status == "Completed")
|
||||||
{
|
{
|
||||||
@@ -424,10 +424,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.file-icon-wrapper {
|
.file-icon-wrapper {
|
||||||
width: 44px;
|
width: 36px;
|
||||||
height: 44px;
|
height: 36px;
|
||||||
background: linear-gradient(135deg, #e8f1fa 0%, #d4e4f4 100%);
|
background: linear-gradient(135deg, #e8f1fa 0%, #d4e4f4 100%);
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -435,8 +435,8 @@
|
|||||||
|
|
||||||
.score-ring-container {
|
.score-ring-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 52px;
|
width: 44px;
|
||||||
height: 52px;
|
height: 44px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user