troogs/duempelkas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor account card title and layout styles for improved UI consistency

Browse Source
This commit is contained in:
troogs
2026-03-31 17:38:55 +02:00
parent eb53af2cd9
commit a6d056fe99
4 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Duempelkas.App/Components/Accounts/AccountCard.razor
View File

@@ -2,7 +2,7 @@
<div class="card account-card h-100" @onclick="Navigate"> <div class="card account-card h-100" @onclick="Navigate">
<div class="card-body d-flex flex-column justify-content-between"> <div class="card-body d-flex flex-column justify-content-between">
<h5 class="card-title mb-3">@Account.Name</h5> <h3 class="card-title mb-3 mt-0">@Account.Name</h3>
<div class="@(Account.TotalBalance >= 0 ? "amount-positive" : "amount-negative") fs-4"> <div class="@(Account.TotalBalance >= 0 ? "amount-positive" : "amount-negative") fs-4">
@($"{Account.TotalBalance:N2} €") @($"{Account.TotalBalance:N2} €")
</div> </div>

1
src/Duempelkas.App/Components/Layout/MainLayout.razor
View File

@@ -5,7 +5,6 @@
<a class="navbar-brand" href=""> <a class="navbar-brand" href="">
<strong>Dümpelkas</strong> <small class="text-muted">Kassenbuch</small> <strong>Dümpelkas</strong> <small class="text-muted">Kassenbuch</small>
</a> </a>
<span class="version-label">v@(AppVersion)</span>
</nav> </nav>
<main class="flex-grow-1 overflow-auto p-3"> <main class="flex-grow-1 overflow-auto p-3">

12
src/Duempelkas.App/Pages/Accounts/AccountDetail.razor
View File

@@ -16,11 +16,8 @@
else else
{ {
<div class="d-flex align-items-center gap-2 mb-3"> <div class="d-flex align-items-center gap-2 mb-3">
<button class="btn btn-outline-secondary btn-sm flex-shrink-0" @onclick="NavigateBack">
<i class="bi bi-arrow-left"></i> Zurück
</button>
<div class="d-flex align-items-center flex-grow-1" style="min-width: 0;"> <div class="d-flex align-items-center flex-grow-1" style="min-width: 0;">
<h2 class="mb-0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> <h2 class="mb-0 mt-0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
@account.Name @account.Name
<button class="btn-edit-pen" @onclick="() => showEditName = true" title="Name bearbeiten"><i class="bi bi-pencil"></i></button> <button class="btn-edit-pen" @onclick="() => showEditName = true" title="Name bearbeiten"><i class="bi bi-pencil"></i></button>
</h2> </h2>
@@ -29,7 +26,7 @@
@if (balance != null) @if (balance != null)
{ {
<div class="summary-section mb-3"> <div class="summary-section">
<div class="summary-flex"> <div class="summary-flex">
<div> <div>
<small class="text-muted">Saldo</small> <small class="text-muted">Saldo</small>
@@ -50,7 +47,7 @@
@if (showCurrentYearOnly) @if (showCurrentYearOnly)
{ {
<div class="summary-section mb-3"> <div class="summary-section">
<div class="summary-flex"> <div class="summary-flex">
<div> <div>
<small class="text-muted">Übertrag von @(DateTime.Now.Year - 1)</small> <small class="text-muted">Übertrag von @(DateTime.Now.Year - 1)</small>
@@ -73,6 +70,9 @@
} }
<div class="d-flex align-items-center gap-2 mb-3 py-3 flex-wrap"> <div class="d-flex align-items-center gap-2 mb-3 py-3 flex-wrap">
<button class="btn btn-secondary btn-sm" @onclick="NavigateBack">
<i class="bi bi-arrow-left"></i> Zurück
</button>
<button class="btn btn-success btn-sm" @onclick="() => showAddEntry = true"> <button class="btn btn-success btn-sm" @onclick="() => showAddEntry = true">
<i class="bi bi-plus-lg"></i> Eintrag <i class="bi bi-plus-lg"></i> Eintrag
</button> </button>

14
src/Duempelkas.Desktop/wwwroot/css/app.css
View File

@@ -51,6 +51,13 @@ html, body {
background-color: var(--color-surface); background-color: var(--color-surface);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 0.75rem; border-radius: 0.75rem;
padding: .5rem;
margin-bottom: .5rem;
}
.account-card .card-title {
color: var(--color-text);
font-weight: normal;
} }
.account-card:hover { .account-card:hover {
@@ -93,7 +100,8 @@ html, body {
background-color: var(--color-surface); background-color: var(--color-surface);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 0.75rem; border-radius: 0.75rem;
padding: 1rem 1.25rem; padding: .5rem .75rem;
margin-bottom: .5rem;
} }
.summary-flex { .summary-flex {
@@ -426,9 +434,7 @@ html, body {
/* Container */ /* Container */
.container-fluid { .container-fluid {
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
} }
/* Spinner (Bootstrap component fallback) */ /* Spinner (Bootstrap component fallback) */