feat: implement dashboard mobile responsiveness v3 overhaul #80
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: mjasin/Nexus.Reader#80
Reference in New Issue
Block a user
Delete Branch "feature/dashboard-mobile-v3"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
This pull request implements Mobile Responsiveness (v3) and a High-Fidelity Overhaul for the dashboard view layer (
/dashboard,/catalog,/my-books,/profile), matching the design aesthetics of the production mobile e-reader layout.Key Changes
30pxborders.rgba(26, 26, 30, 0.75)) and sepia theme in light mode (rgba(244, 241, 234, 0.9)).translateYoffset on the central "AI" action button (robot icon inside a solid green circle).::deepoverrides to clean up text colors and icons, preventing browser visited link purple color defaults onNavLinkitems.40px), welcome title font size, and status pill spacing.concepts-linear-stackheight to120pxwith scrolling.MyBooksto200pxon mobile viewports."Kontynuuj czytanie".calc(1.5rem + 72px + env(safe-area-inset-bottom))) at the bottom of pages to prevent content from being covered by the capsule..secondary-gridwas using flex layout inherited from desktop rather than grid layout on mobile..secondary-gridtodisplay: grid !importanton mobile, properly constraining layout width and allowing nowrap concept text truncation.Verification
dotnet build NexusReader.slnx --no-restore(0 errors).Automated review from Antigravity – see inline comments for details.
@@ -8,3 +8,3 @@<div @key='"current-reading-book"' class="card-layout"><div class="book-cover"><img src="@(Book.CoverUrl ?? "https://via.placeholder.com/120x180?text=No+Cover")" alt="@Book.Title" /><img src="@(string.IsNullOrEmpty(Book.CoverUrl) ? "https://via.placeholder.com/120x180?text=No+Cover" : Book.CoverUrl)" alt="@Book.Title" />Consider adding
aria-describedby="book-title-{Book.Id}"to improve screen‑reader context for placeholder images.@@ -42,7 +42,7 @@<div class="actions"><button class="btn-nexus outline" @onclick="HandleContinueReading">Add
aria-label="Kontynuuj czytanie"to the button for clearer accessibility.@@ -124,6 +151,7 @@[Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;[Inject] private IIdentityService IdentityService { get; set; } = default!;Ensure
IThemeServiceis registered in DI (e.g.,services.AddScoped<IThemeService, ThemeService>();).@@ -131,6 +159,8 @@protected override async Task OnInitializedAsync(){ThemeService.OnThemeChanged += HandleThemeChanged;Dispose should also call
GC.SuppressFinalize(this);for completeness.HandleLogoutcorrectly returnsTask; noasync voiddetected.@@ -1,1 +1,1 @@.dashboard-container {Consolidate breakpoints to a single variable (
--mobile-breakpoint: 767px) and reference it in media queries.@@ -148,5 +148,5 @@/* Semantic design tokens - Modern Deep Dark */--bg-base: #121214;--bg-surface: #1a1a1e;--text-main: #ffffff;--text-muted: #a1a1aa;Use the new
--bordertoken consistently for borders instead of hard‑coded rgba values.All issues addressed: accessibility (aria-describedby and aria-label) improvements applied, GC.SuppressFinalize lifecycle addition added, and standardized --border CSS variables applied to all layout/component border styles. Note that CSS media query limits cannot utilize CSS custom properties, so literals remain for the 767px mobile breakpoint. IThemeService is verified as correctly registered in all application projects.
@@ -8,3 +8,3 @@<div @key='"current-reading-book"' class="card-layout"><div class="book-cover"><img src="@(Book.CoverUrl ?? "https://via.placeholder.com/120x180?text=No+Cover")" alt="@Book.Title" /><img src="@(string.IsNullOrEmpty(Book.CoverUrl) ? "https://via.placeholder.com/120x180?text=No+Cover" : Book.CoverUrl)" alt="@Book.Title" />Consider adding
aria-describedby="book-title-{Book.Id}"to improve screen‑reader context for placeholder images.@@ -42,7 +42,7 @@<div class="actions"><button class="btn-nexus outline" @onclick="HandleContinueReading">Add
aria-label="Kontynuuj czytanie"to the button for clearer accessibility.@@ -124,6 +151,7 @@[Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;[Inject] private IIdentityService IdentityService { get; set; } = default!;Ensure
IThemeServiceis registered in DI (e.g.,services.AddScoped<IThemeService, ThemeService>();).@@ -131,6 +159,8 @@protected override async Task OnInitializedAsync(){ThemeService.OnThemeChanged += HandleThemeChanged;Dispose should also call
GC.SuppressFinalize(this);for completeness.HandleLogoutcorrectly returnsTask; noasync voiddetected.@@ -1,1 +1,1 @@.dashboard-container {Consolidate breakpoints to a single variable (
--mobile-breakpoint: 767px) and reference it in media queries.@@ -148,5 +148,5 @@/* Semantic design tokens - Modern Deep Dark */--bg-base: #121214;--bg-surface: #1a1a1e;--text-main: #ffffff;--text-muted: #a1a1aa;Use the new
--bordertoken consistently for borders instead of hard‑coded rgba values.Automated review from Antigravity – see inline comments for detailed suggestions.
@@ -8,3 +8,3 @@<div @key='"current-reading-book"' class="card-layout"><div class="book-cover"><img src="@(Book.CoverUrl ?? "https://via.placeholder.com/120x180?text=No+Cover")" alt="@Book.Title" /><img src="@(string.IsNullOrEmpty(Book.CoverUrl) ? "https://via.placeholder.com/120x180?text=No+Cover" : Book.CoverUrl)" alt="@Book.Title" aria-describedby="book-title-@Book.Id" />The
imgelement already includes a descriptivealtattribute, but addingaria-describedby="book-title-{Book.Id}"would improve screen‑reader context for placeholder images.@@ -43,3 +43,2 @@<div class="actions"><button class="btn-nexus outline" @onclick="HandleContinueReading">Continue Reading<button class="btn-nexus outline" @onclick="HandleContinueReading" aria-label="Kontynuuj czytanie">The “Kontynuuj czytanie” button should have an explicit
aria-label="Continue reading"(or localized) to make its purpose clear when the button text is hidden by CSS.@@ -66,5 +66,5 @@}</section>@code {[Parameter] public LastReadBookDto? Book { get; set; }Consider adding the
[EditorRequired]attribute to theBookparameter to surface a compile‑time warning if the component is used without a value.@@ -124,6 +151,7 @@[Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;[Inject] private IIdentityService IdentityService { get; set; } = default!;Ensure
IThemeServiceis registered in the DI container (e.g.,services.AddScoped<IThemeService, ThemeService>();).@@ -131,6 +159,8 @@protected override async Task OnInitializedAsync(){ThemeService.OnThemeChanged += HandleThemeChanged;The theme‑change subscription is correctly disposed, but the
Disposeimplementation should also callGC.SuppressFinalize(this)for completeness.HandleLogoutcorrectly returnsTask; noasync voidusage detected.@@ -148,5 +148,5 @@/* Semantic design tokens - Modern Deep Dark */--bg-base: #121214;--bg-surface: #1a1a1e;--text-main: #ffffff;--text-muted: #a1a1aa;Breakpoints are inconsistently defined as
max-width: 768pxandmax-width: 767px. Consolidate to a single CSS variable, e.g.,--mobile-breakpoint: 767px;and reference it via@media (max-width: var(--mobile-breakpoint)).@@ -165,5 +165,5 @@/* Semantic design tokens - Warm Paper / Soft Sepia */--bg-base: #f4f1ea;--bg-surface: #ffffff;--text-main: #2d2a26;--text-muted: #78716c;Added
--bordertoken; ensure the token is used consistently across components for border styling instead of hard‑coded rgba values.