mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: implement dashboard mobile responsiveness v3 overhaul #80

Merged
mjasin merged 4 commits from feature/dashboard-mobile-v3 into develop 2026-06-08 11:05:58 +00:00
Conversation 3 Commits 4 Files Changed 10
+171 -82
8 changed files with 171 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d3f5d02a6c - Show all commits
src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor
+2 -2
View File
@@ -7,7 +7,7 @@
{
<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" />
</div>
<div class="book-details">
@@ -42,7 +42,7 @@
<div class="actions">
<button class="btn-nexus outline" @onclick="HandleContinueReading">
Continue Reading
Kontynuuj czytanie
<NexusIcon Name="arrow-right" Size="16" />
</button>
</div>
src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css
+28 -14
View File
@@ -198,8 +198,8 @@
.current-reading-card {
background: #1e1e22; /* Lighter anthracite slate for depth */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ambient card shadow */
padding: 20px;
border-radius: 20px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
@@ -207,12 +207,12 @@
flex-direction: column;
align-items: stretch;
text-align: left;
gap: 1.25rem;
gap: 0.75rem;
}
.book-cover {
align-self: center;
width: 120px;
width: 90px;
}
.book-details {
@@ -221,13 +221,14 @@
}
.book-title {
font-size: 1.5rem;
font-size: 1.25rem;
text-align: left;
white-space: normal;
}
.author-name {
text-align: left;
font-size: 0.8rem;
}
.header-info, .chapter-progress {
@@ -236,10 +237,11 @@
.chapter-name {
white-space: normal;
font-size: 0.8rem;
}
.chapter-progress {
margin: 1.25rem 0; /* Margin separator before tracking bar */
margin: 0.5rem 0; /* Margin separator before tracking bar */
width: 100%;
}
@@ -248,24 +250,36 @@
}
.book-excerpt {
display: block; /* Normal display to wrap synopsis */
overflow: visible;
-webkit-line-clamp: none;
text-overflow: clip;
margin-bottom: 1.25rem;
display: -webkit-box; /* Normal display to wrap synopsis */
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 0.75rem;
text-align: left;
font-size: 0.85rem;
}
.actions {
width: 100%;
margin-top: 0.5rem;
margin-top: 0.25rem;
}
.actions .btn-nexus {
.actions .btn-nexus.outline {
width: 100%;
justify-content: center;
padding: 0.95rem 1.5rem; /* Larger touch target */
padding: 0.75rem 1.25rem; /* Larger touch target */
box-sizing: border-box;
background: transparent !important;
color: var(--accent) !important;
border: 1px solid var(--accent) !important;
display: inline-flex !important;
align-items: center !important;
font-weight: 600 !important;
}
.actions .btn-nexus.outline:hover {
background: var(--accent-glow) !important;
color: var(--accent) !important;
}
.theme-light .current-reading-card {
src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
+17 -3
View File
@@ -1,4 +1,5 @@
@inherits LayoutComponentBase
@implements IDisposable
@using NexusReader.UI.Shared.Components.Molecules
@using NexusReader.UI.Shared.Components.Atoms
@using NexusReader.Application.Abstractions.Services
@@ -12,7 +13,7 @@
</div>
}
<div @key='"hub-container"' class="hub-container @(_isMobileMenuOpen ? "mobile-menu-open" : "")">
<div @key='"hub-container"' class="hub-container @(_isMobileMenuOpen ? "mobile-menu-open" : "") @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
<AuthorizeView>
<Authorized>
<!-- Mobile Sticky Top-bar -->
@@ -122,10 +123,10 @@
<span class="dock-text">Katalog</span>
</NavLink>
<NavLink class="dock-item central-action" href="/intelligence" title="Globalne AI">
<div class="central-action-glow"></div>
<div class="central-action-inner">
<NexusIcon Name="robot" Size="24" />
<NexusIcon Name="robot" Size="20" />
</div>
<span class="dock-text">AI</span>
</NavLink>
<NavLink class="dock-item" href="/my-books" title="Moje">
<NexusIcon Name="book-open" Size="20" />
@@ -150,6 +151,7 @@
[Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
[Inject] private IIdentityService IdentityService { get; set; } = default!;
Antigravity commented 2026-06-08 11:00:49 +00:00
Review
Copy Link
Copy Source

Ensure IThemeService is registered in DI (e.g., services.AddScoped<IThemeService, ThemeService>();).

Ensure `IThemeService` is registered in DI (e.g., `services.AddScoped<IThemeService, ThemeService>();`).
[Inject] private NavigationManager NavigationManager { get; set; } = default!;
[Inject] private IThemeService ThemeService { get; set; } = default!;
private bool _isSyncing = false;
private bool _isMobileMenuOpen = false;
@@ -157,6 +159,8 @@
protected override async Task OnInitializedAsync()
{
ThemeService.OnThemeChanged += HandleThemeChanged;
Antigravity commented 2026-06-08 11:00:49 +00:00
Review
Copy Link
Copy Source

Dispose should also call GC.SuppressFinalize(this); for completeness.

Dispose should also call `GC.SuppressFinalize(this);` for completeness.
if (_isSyncing) return;
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
@@ -168,6 +172,11 @@
}
}
private void HandleThemeChanged(ThemeMode mode)
{
InvokeAsync(StateHasChanged);
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
1
 @@ -193,4 +202,9 @@
await IdentityService.LogoutAsync();
NavigationManager.NavigateTo("/account/logout-form", true);
}
public void Dispose()
{
ThemeService.OnThemeChanged -= HandleThemeChanged;
}
}
src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
+65 -40
View File
@@ -429,13 +429,13 @@
}
/* Reader Mobile Dock v3 */
.reader-mobile-dock {
::deep .reader-mobile-dock {
display: flex;
position: fixed;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
left: 20px;
right: 20px;
height: 60px;
height: 64px;
background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
@@ -448,8 +448,9 @@
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.dock-item {
::deep .dock-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
@@ -458,84 +459,108 @@
text-decoration: none;
transition: color 0.2s ease, filter 0.2s ease;
position: relative;
gap: 2px;
}
.dock-item:hover, .dock-item.active {
color: var(--accent);
::deep .dock-item:hover, ::deep .dock-item.active {
color: var(--accent) !important;
filter: drop-shadow(0 0 4px var(--accent-glow)); /* Clean accent glow drop-shadow */
}
::deep .dock-item ::deep svg,
::deep .dock-item ::deep .nexus-icon,
::deep .dock-item svg,
::deep .dock-item .nexus-icon {
color: inherit !important;
fill: currentColor !important;
}
.dock-text {
display: none !important; /* Eliminate visual noise */
::deep .dock-text {
display: block !important;
font-size: 10px;
font-weight: 500;
margin-top: 2px;
white-space: nowrap;
color: inherit;
}
/* Central action button style */
.dock-item.central-action {
::deep .dock-item.central-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 54px;
width: 54px;
height: 54px;
flex: 1;
height: 100%;
gap: 2px;
margin-top: 0;
transform: translateY(-20px); /* Elevate layout */
transform: none !important;
z-index: 160;
}
.central-action-inner {
width: 54px;
height: 54px;
::deep .central-action-inner {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-surface); /* Pure background instead of green bleed */
color: var(--accent); /* brand-green robot icon */
background: var(--accent); /* Solid green background */
color: #ffffff !important; /* White robot icon */
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--accent); /* Crisp green edge container wrapper */
box-shadow: 0 8px 24px var(--accent-glow);
border: none !important;
box-shadow: 0 4px 10px rgba(0, 255, 153, 0.3);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}
::deep .central-action-inner ::deep svg,
::deep .central-action-inner ::deep .nexus-icon,
::deep .central-action-inner svg,
::deep .central-action-inner .nexus-icon {
color: #ffffff !important;
fill: currentColor !important;
}
.dock-item.central-action:hover .central-action-inner,
.dock-item.central-action.active .central-action-inner {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 12px 28px var(--accent-glow);
::deep .dock-item.central-action:hover .central-action-inner,
::deep .dock-item.central-action.active .central-action-inner {
transform: scale(1.05);
box-shadow: 0 4px 14px rgba(0, 255, 153, 0.5);
}
.central-action-glow {
::deep .central-action-glow {
display: none; /* Purged background glow */
}
/* Light Theme Overrides */
.theme-light .reader-mobile-dock {
background: rgba(255, 255, 255, 0.85); /* Translucent light mode */
border: 1px solid rgba(45, 42, 38, 0.08); /* Light theme microscopic border */
box-shadow: 0 8px 32px rgba(139, 130, 115, 0.1);
.theme-light ::deep .reader-mobile-dock {
background: rgba(244, 241, 234, 0.9); /* Translucent light mode warm paper background */
border: 1px solid rgba(139, 130, 115, 0.18); /* Light theme sepia border */
box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15);
}
.theme-light .dock-item {
.theme-light ::deep .dock-item {
color: var(--text-muted);
}
.theme-light .dock-item:hover, .theme-light .dock-item.active {
color: var(--accent);
.theme-light ::deep .dock-item:hover, .theme-light ::deep .dock-item.active {
color: var(--accent) !important;
filter: drop-shadow(0 0 3px var(--accent-glow));
}
.theme-light .central-action-inner {
background: var(--bg-surface);
color: var(--accent);
border: 2px solid var(--accent);
box-shadow: 0 8px 24px var(--accent-glow);
.theme-light ::deep .central-action-inner {
background: var(--accent) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
}
.theme-light .dock-item.central-action:hover .central-action-inner,
.theme-light .dock-item.central-action.active .central-action-inner {
box-shadow: 0 12px 28px var(--accent-glow);
.theme-light ::deep .dock-item.central-action:hover .central-action-inner,
.theme-light ::deep .dock-item.central-action.active .central-action-inner {
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
transform: scale(1.05);
}
.theme-light .central-action-glow {
.theme-light ::deep .central-action-glow {
display: none;
}
}
src/NexusReader.UI.Shared/Pages/Catalog.razor.css
+1 -1
View File
@@ -391,7 +391,7 @@
@media (max-width: 767px) {
.catalog-page {
padding: 1.5rem 1rem;
padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important;
}
.catalog-header {
src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
+14
View File
@@ -453,3 +453,17 @@
.theme-light .header-actions .btn-action:hover {
box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
}
@media (max-width: 767px) {
.concepts-dashboard-container {
padding: 1rem 0.75rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important;
gap: 1rem;
}
.dashboard-header {
padding: 1rem;
gap: 0.75rem;
}
.header-title h1 {
font-size: 1.25rem;
}
}
src/NexusReader.UI.Shared/Pages/Dashboard.razor.css
+39 -21
View File
1
 @@ -526,27 +526,27 @@
/* Mobile Dashboard Overrides */
@media (max-width: 767px) {
.dashboard-content {
padding: 1rem 0.5rem;
padding: 0.5rem 0.5rem calc(1.5rem + 64px) !important;
}
.profile-header {
padding: 16px;
padding: 10px 12px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 16px;
margin-bottom: 16px;
border-radius: 12px;
margin-bottom: 10px;
}
.profile-visual {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.75rem;
gap: 0.5rem;
}
.avatar-wrapper {
width: 48px;
height: 48px;
width: 40px;
height: 40px;
margin: 0;
}
@@ -555,7 +555,7 @@
}
.username {
font-size: 1.15rem;
font-size: 1.05rem;
font-weight: 600;
text-align: left;
margin: 0;
@@ -563,7 +563,7 @@
}
.user-role {
font-size: 0.85rem;
font-size: 0.8rem;
}
.status-pills {
@@ -572,8 +572,8 @@
flex-direction: row;
justify-content: space-between;
width: 100%;
gap: 0.35rem;
margin-top: 0.25rem;
gap: 0.25rem;
margin-top: 0.15rem;
}
.status-pill {
@@ -581,44 +581,62 @@
display: flex;
justify-content: center;
align-items: center;
padding: 0.35rem 0.5rem;
font-size: 0.7rem;
gap: 0.25rem;
padding: 0.25rem 0.4rem;
font-size: 0.65rem;
gap: 0.2rem;
white-space: nowrap;
border-radius: 6px;
}
.section-title {
font-size: 1.5rem;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 12px;
margin-top: 4px;
margin-bottom: 8px;
color: var(--text-main);
}
.main-grid {
grid-template-columns: 1fr !important;
gap: 1rem !important;
gap: 0.75rem !important;
}
.secondary-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
gap: 0.75rem !important;
}
/* Force all widgets to take 100% width and fit inside parent container nicely */
.glass-panel {
width: 100% !important;
padding: 1rem !important;
padding: 12px !important;
box-sizing: border-box;
}
/* Compress Knowledge Graph and Concept stack heights to maximize visible fold space */
.graph-placeholder {
height: 140px;
height: 120px;
}
.concepts-linear-stack {
height: 150px;
height: 120px !important;
max-height: 120px !important;
overflow-y: auto !important;
padding-right: 4px;
}
.concept-linear-item {
padding: 6px 8px !important;
font-size: 0.75rem !important;
gap: 0.5rem !important;
min-height: auto !important; /* Prevent touch target min-height expansion */
}
.concept-badge {
padding: 2px 6px !important;
font-size: 0.65rem !important;
}
/* Expand touch-targets to 48px min height for interactive elements */
src/NexusReader.UI.Shared/Pages/MyBooks.razor.css
+5 -1
View File
@@ -410,7 +410,7 @@
@media (max-width: 767px) {
.my-books-page {
padding: 1.5rem 1rem;
padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important;
}
.my-books-header {
@@ -439,5 +439,9 @@
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.25rem;
}
.book-cover-container {
height: 200px !important;
}
}