peter/RealCV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Improve file list display with inline size and better separation

Browse Source 
- Move file size inline after filename
- Add container border around entire file list
- Add alternating row backgrounds for better delineation
- Use border-bottom between items instead of margin
- Reduce icon size for tighter layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Peter Foster
2026-01-22 19:37:34 +00:00
parent 4b87af80a8
commit 2a96a4bfaf
1 changed files with 47 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/RealCV.Web/Components/Pages/Check.razor
View File

@@ -154,20 +154,20 @@
<div class="file-type-icon me-2 @(file.Name.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase) ? "pdf" : "docx")">
@if (file.Name.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase))
{
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
<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.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg>
}
else
{
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
<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.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg>
}
</div>
<div class="flex-grow-1 min-width-0">
<p class="mb-0 fw-medium small text-truncate">@file.Name</p>
<small class="text-muted" style="font-size: 0.75rem;">@FormatFileSize(file.Size)</small>
<span class="file-name">@file.Name</span>
<span class="file-size">@FormatFileSize(file.Size)</span>
</div>
</div>
<button class="btn btn-sm btn-outline-danger" @onclick="() => RemoveFile(file)">
@@ -267,39 +267,71 @@
user-select: none;
}
.file-list {
border: 1px solid var(--realcv-gray-200);
border-radius: 8px;
overflow: hidden;
}
.file-list-item {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid var(--realcv-gray-200);
border-radius: 8px;
padding: 0.5rem 0.75rem;
margin-bottom: 0.375rem;
background: var(--realcv-bg-surface);
transition: all 0.2s ease;
border-bottom: 1px solid var(--realcv-gray-200);
transition: background 0.15s ease;
}
.file-list-item:last-child {
border-bottom: none;
}
.file-list-item:hover {
border-color: var(--realcv-primary);
box-shadow: 0 2px 8px rgba(59, 111, 212, 0.08);
background: var(--realcv-bg-muted);
}
.file-list-item:nth-child(even) {
background: rgba(0, 0, 0, 0.015);
}
.file-list-item:nth-child(even):hover {
background: var(--realcv-bg-muted);
}
.file-name {
font-size: 0.875rem;
font-weight: 500;
color: var(--realcv-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size {
font-size: 0.75rem;
color: var(--realcv-gray-500);
margin-left: 0.5rem;
flex-shrink: 0;
}
.file-type-icon {
width: 32px;
height: 32px;
border-radius: 6px;
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.file-type-icon.pdf {
background: linear-gradient(135deg, #fde8e8 0%, #fcd9d9 100%);
background: #fef2f2;
color: #dc2626;
}
.file-type-icon.docx {
background: linear-gradient(135deg, #e3ecf7 0%, #d4e4f4 100%);
background: #eff6ff;
color: var(--realcv-primary);
}