fix: Improve UI spacing and remove duplicate logo on auth pages
- 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:
13
src/RealCV.Web/Components/Layout/AuthLayout.razor
Normal file
13
src/RealCV.Web/Components/Layout/AuthLayout.razor
Normal 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>
|
||||
@@ -1,6 +1,6 @@
|
||||
@page "/account/login"
|
||||
@using RealCV.Web.Components.Layout
|
||||
@layout MainLayout
|
||||
@layout AuthLayout
|
||||
|
||||
@using Microsoft.AspNetCore.Identity
|
||||
@using RealCV.Infrastructure.Identity
|
||||
@@ -14,9 +14,9 @@
|
||||
<!-- Left side - Form -->
|
||||
<div class="auth-form-side">
|
||||
<div class="auth-form-wrapper">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-center mb-5">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@page "/account/register"
|
||||
@using RealCV.Web.Components.Layout
|
||||
@layout MainLayout
|
||||
@layout AuthLayout
|
||||
@rendermode InteractiveServer
|
||||
|
||||
@using Microsoft.AspNetCore.Identity
|
||||
@@ -16,9 +16,9 @@
|
||||
<!-- Left side - Form -->
|
||||
<div class="auth-form-side">
|
||||
<div class="auth-form-wrapper">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-center mb-5">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -151,7 +151,7 @@
|
||||
{
|
||||
<div class="file-list-item">
|
||||
<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))
|
||||
{
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
|
||||
@@ -165,9 +165,9 @@
|
||||
</svg>
|
||||
}
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 fw-medium">@file.Name</p>
|
||||
<small class="text-muted">@FormatFileSize(file.Size)</small>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger" @onclick="() => RemoveFile(file)">
|
||||
@@ -272,22 +272,22 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--realcv-gray-200);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.375rem;
|
||||
background: var(--realcv-bg-surface);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.file-list-item:hover {
|
||||
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 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -1051,8 +1051,12 @@ h1:focus {
|
||||
}
|
||||
|
||||
.auth-logo {
|
||||
height: 48px;
|
||||
margin-bottom: 1rem;
|
||||
height: 60px;
|
||||
transition: opacity var(--realcv-transition);
|
||||
}
|
||||
|
||||
.auth-logo:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
|
||||
Reference in New Issue
Block a user