feat(readability): add scalable text and responsive high-contrast layouts (U13)

This commit is contained in:
2026-11-02 19:33:50 +01:00
parent 45fe327840
commit 9f8c4b7af1
8 changed files with 80 additions and 4 deletions
@@ -1,5 +1,5 @@
@inject ToastService Toasts
<ModalDialog @ref="modal" Title="Bestandskorrektur" OnCancel="OnCancel" Dirty="@(amount != CurrentAmount)" Busy="saving">
<ModalDialog @ref="modal" Title="Bestandskorrektur" OnCancel="OnCancel" Dirty="@(amountText != CurrentAmount.ToString("0.00", System.Globalization.CultureInfo.GetCultureInfo("de-DE")))" Busy="saving">
<h5>Bestandskorrektur – @AccountName</h5>
<p>@(Year.HasValue ? $"Übertrag zum 01.01.{Year}" : "Gemeinsamer Anfangsbestand – alle Jahre")</p>
<p>Anfangsbestand + Einnahmen − Ausgaben = Kontostand</p>
@@ -1,12 +1,20 @@
@inherits LayoutComponentBase
@inject IJSRuntime JS
<ToastHost />
<div class="d-flex flex-column vh-100">
<div class="app-shell">
<nav class="app-navbar d-flex justify-content-between align-items-center">
<a class="navbar-brand" href="">
<strong>Dümpelkas</strong> <small class="text-muted">Kassenbuch</small>
</a>
<div class="reading-controls">
<label for="text-scale">Textgröße</label>
<select id="text-scale" @bind="fontScale" @bind:after="ApplyTextScale">
<option value="100">Normal</option><option value="125">Groß (125 %)</option>
<option value="150">Sehr groß (150 %)</option><option value="200">200 %</option>
</select>
</div>
</nav>
<main class="flex-grow-1 overflow-auto p-3">
@@ -1,9 +1,21 @@
using Microsoft.JSInterop;
using System.Reflection;
namespace Duempelkas.App.Components.Layout;
public partial class MainLayout
{
private int fontScale = 100;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var value = await JS.InvokeAsync<int>("duempelkasReading.get");
fontScale = value is 125 or 150 or 200 ? value : 100;
StateHasChanged();
}
}
private async Task ApplyTextScale() => await JS.InvokeVoidAsync("duempelkasReading.set", fontScale);
#region Fields
private bool showAboutDialog;