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

fix: Improve UI spacing and remove duplicate logo on auth pages

Browse Source 
- Create dedicated AuthLayout for login/register pages without navbar
- Tighten file list spacing on Check page for better density
- Reduce padding, margins, and icon sizes in file list items
- Make file names smaller and truncate long names

🤖 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:33:42 +00:00
parent 9cb8c35616
commit 4b87af80a8
5 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/RealCV.Web/Components/Layout/AuthLayout.razor Normal file
View File

@@ -0,0 +1,13 @@
@inherits LayoutComponentBase
<div class="d-flex flex-column min-vh-100">
<main class="flex-grow-1">
@Body
</main>
</div>
<div id="blazor-error-ui" class="alert alert-danger fixed-bottom m-3" style="display: none;">
An unhandled error has occurred.
<a href="" class="alert-link reload">Reload</a>
<button type="button" class="btn-close float-end dismiss" aria-label="Close"></button>
</div>

6
src/RealCV.Web/Components/Pages/Account/Login.razor
View File

@@ -1,6 +1,6 @@
@page "/account/login" @page "/account/login"
@using RealCV.Web.Components.Layout @using RealCV.Web.Components.Layout
@layout MainLayout @layout AuthLayout
@using Microsoft.AspNetCore.Identity @using Microsoft.AspNetCore.Identity
@using RealCV.Infrastructure.Identity @using RealCV.Infrastructure.Identity
@@ -14,9 +14,9 @@
<!-- Left side - Form --> <!-- Left side - Form -->
<div class="auth-form-side"> <div class="auth-form-side">
<div class="auth-form-wrapper"> <div class="auth-form-wrapper">
<div class="text-center mb-4"> <div class="text-center mb-5">
<a href="/"> <a href="/">
<img src="images/RealCV_Logo_Transparent.png" alt="RealCV" class="auth-logo" /> <img src="images/RealCV_Logo_Transparent.png" alt="RealCV" class="auth-logo" style="height: 60px;" />
</a> </a>
</div> </div>

6
src/RealCV.Web/Components/Pages/Account/Register.razor
View File

@@ -1,6 +1,6 @@
@page "/account/register" @page "/account/register"
@using RealCV.Web.Components.Layout @using RealCV.Web.Components.Layout
@layout MainLayout @layout AuthLayout
@rendermode InteractiveServer @rendermode InteractiveServer
@using Microsoft.AspNetCore.Identity @using Microsoft.AspNetCore.Identity
@@ -16,9 +16,9 @@
<!-- Left side - Form --> <!-- Left side - Form -->
<div class="auth-form-side"> <div class="auth-form-side">
<div class="auth-form-wrapper"> <div class="auth-form-wrapper">
<div class="text-center mb-4"> <div class="text-center mb-5">
<a href="/"> <a href="/">
<img src="images/RealCV_Logo_Transparent.png" alt="RealCV" class="auth-logo" /> <img src="images/RealCV_Logo_Transparent.png" alt="RealCV" class="auth-logo" style="height: 60px;" />
</a> </a>
</div> </div>

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

@@ -151,7 +151,7 @@
{ {
<div class="file-list-item"> <div class="file-list-item">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="file-type-icon me-3 @(file.Name.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase) ? "pdf" : "docx")"> <div class="file-type-icon me-2 @(file.Name.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase) ? "pdf" : "docx")">
@if (file.Name.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase)) @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="18" height="18" fill="currentColor" viewBox="0 0 16 16">
@@ -165,9 +165,9 @@
</svg> </svg>
} }
</div> </div>
<div class="flex-grow-1"> <div class="flex-grow-1 min-width-0">
<p class="mb-0 fw-medium">@file.Name</p> <p class="mb-0 fw-medium small text-truncate">@file.Name</p>
<small class="text-muted">@FormatFileSize(file.Size)</small> <small class="text-muted" style="font-size: 0.75rem;">@FormatFileSize(file.Size)</small>
</div> </div>
</div> </div>
<button class="btn btn-sm btn-outline-danger" @onclick="() => RemoveFile(file)"> <button class="btn btn-sm btn-outline-danger" @onclick="() => RemoveFile(file)">
@@ -272,22 +272,22 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border: 1px solid var(--realcv-gray-200); border: 1px solid var(--realcv-gray-200);
border-radius: 12px; border-radius: 8px;
padding: 1rem; padding: 0.5rem 0.75rem;
margin-bottom: 0.75rem; margin-bottom: 0.375rem;
background: var(--realcv-bg-surface); background: var(--realcv-bg-surface);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.file-list-item:hover { .file-list-item:hover {
border-color: var(--realcv-primary); border-color: var(--realcv-primary);
box-shadow: 0 4px 12px rgba(59, 111, 212, 0.08); box-shadow: 0 2px 8px rgba(59, 111, 212, 0.08);
} }
.file-type-icon { .file-type-icon {
width: 40px; width: 32px;
height: 40px; height: 32px;
border-radius: 10px; border-radius: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

8
src/RealCV.Web/wwwroot/app.css
View File

@@ -1051,8 +1051,12 @@ h1:focus {
} }
.auth-logo { .auth-logo {
height: 48px; height: 60px;
margin-bottom: 1rem; transition: opacity var(--realcv-transition);
}
.auth-logo:hover {
opacity: 0.85;
} }
.auth-title { .auth-title {