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

fix: resolve horizontal layout blowout in mobile dashboard list view

Browse Source
This commit is contained in:
Marek Jaisński
2026-06-08 12:55:59 +02:00
parent de6cee06ad
commit d3f5d02a6c
8 changed files with 171 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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 @key='"current-reading-book"' class="card-layout">
<div class="book-cover"> <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>
<div class="book-details"> <div class="book-details">
@@ -42,7 +42,7 @@
<div class="actions"> <div class="actions">
<button class="btn-nexus outline" @onclick="HandleContinueReading"> <button class="btn-nexus outline" @onclick="HandleContinueReading">
Continue Reading Kontynuuj czytanie
<NexusIcon Name="arrow-right" Size="16" /> <NexusIcon Name="arrow-right" Size="16" />
</button> </button>
</div> </div>
src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css
+28 -14
View File
@@ -198,8 +198,8 @@
.current-reading-card { .current-reading-card {
background: #1e1e22; /* Lighter anthracite slate for depth */ background: #1e1e22; /* Lighter anthracite slate for depth */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ambient card shadow */ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ambient card shadow */
padding: 20px; padding: 14px;
border-radius: 20px; border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
} }
@@ -207,12 +207,12 @@
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
text-align: left; text-align: left;
gap: 1.25rem; gap: 0.75rem;
} }
.book-cover { .book-cover {
align-self: center; align-self: center;
width: 120px; width: 90px;
} }
.book-details { .book-details {
@@ -221,13 +221,14 @@
} }
.book-title { .book-title {
font-size: 1.5rem; font-size: 1.25rem;
text-align: left; text-align: left;
white-space: normal; white-space: normal;
} }
.author-name { .author-name {
text-align: left; text-align: left;
font-size: 0.8rem;
} }
.header-info, .chapter-progress { .header-info, .chapter-progress {
@@ -236,10 +237,11 @@
.chapter-name { .chapter-name {
white-space: normal; white-space: normal;
font-size: 0.8rem;
} }
.chapter-progress { .chapter-progress {
margin: 1.25rem 0; /* Margin separator before tracking bar */ margin: 0.5rem 0; /* Margin separator before tracking bar */
width: 100%; width: 100%;
} }
@@ -248,24 +250,36 @@
} }
.book-excerpt { .book-excerpt {
display: block; /* Normal display to wrap synopsis */ display: -webkit-box; /* Normal display to wrap synopsis */
overflow: visible; overflow: hidden;
-webkit-line-clamp: none; -webkit-line-clamp: 2;
text-overflow: clip; -webkit-box-orient: vertical;
margin-bottom: 1.25rem; margin-bottom: 0.75rem;
text-align: left; text-align: left;
font-size: 0.85rem;
} }
.actions { .actions {
width: 100%; width: 100%;
margin-top: 0.5rem; margin-top: 0.25rem;
} }
.actions .btn-nexus { .actions .btn-nexus.outline {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
padding: 0.95rem 1.5rem; /* Larger touch target */ padding: 0.75rem 1.25rem; /* Larger touch target */
box-sizing: border-box; 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 { .theme-light .current-reading-card {
src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
+17 -3
View File
@@ -1,4 +1,5 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
@implements IDisposable
@using NexusReader.UI.Shared.Components.Molecules @using NexusReader.UI.Shared.Components.Molecules
@using NexusReader.UI.Shared.Components.Atoms @using NexusReader.UI.Shared.Components.Atoms
@using NexusReader.Application.Abstractions.Services @using NexusReader.Application.Abstractions.Services
@@ -12,7 +13,7 @@
</div> </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> <AuthorizeView>
<Authorized> <Authorized>
<!-- Mobile Sticky Top-bar --> <!-- Mobile Sticky Top-bar -->
@@ -122,10 +123,10 @@
<span class="dock-text">Katalog</span> <span class="dock-text">Katalog</span>
</NavLink> </NavLink>
<NavLink class="dock-item central-action" href="/intelligence" title="Globalne AI"> <NavLink class="dock-item central-action" href="/intelligence" title="Globalne AI">
<div class="central-action-glow"></div>
<div class="central-action-inner"> <div class="central-action-inner">
<NexusIcon Name="robot" Size="24" /> <NexusIcon Name="robot" Size="20" />
</div> </div>
<span class="dock-text">AI</span>
</NavLink> </NavLink>
<NavLink class="dock-item" href="/my-books" title="Moje"> <NavLink class="dock-item" href="/my-books" title="Moje">
<NexusIcon Name="book-open" Size="20" /> <NexusIcon Name="book-open" Size="20" />
@@ -150,6 +151,7 @@
[Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!; [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
[Inject] private IIdentityService IdentityService { get; set; } = default!; [Inject] private IIdentityService IdentityService { get; set; } = default!;
[Inject] private NavigationManager NavigationManager { get; set; } = default!; [Inject] private NavigationManager NavigationManager { get; set; } = default!;
[Inject] private IThemeService ThemeService { get; set; } = default!;
private bool _isSyncing = false; private bool _isSyncing = false;
private bool _isMobileMenuOpen = false; private bool _isMobileMenuOpen = false;
@@ -157,6 +159,8 @@
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
ThemeService.OnThemeChanged += HandleThemeChanged;
if (_isSyncing) return; if (_isSyncing) return;
var authState = await AuthStateProvider.GetAuthenticationStateAsync(); var authState = await AuthStateProvider.GetAuthenticationStateAsync();
@@ -168,6 +172,11 @@
} }
} }
private void HandleThemeChanged(ThemeMode mode)
{
InvokeAsync(StateHasChanged);
}
protected override void OnAfterRender(bool firstRender) protected override void OnAfterRender(bool firstRender)
{ {
if (firstRender) if (firstRender)
@@ -193,4 +202,9 @@
await IdentityService.LogoutAsync(); await IdentityService.LogoutAsync();
NavigationManager.NavigateTo("/account/logout-form", true); 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 v3 */
.reader-mobile-dock { ::deep .reader-mobile-dock {
display: flex; display: flex;
position: fixed; position: fixed;
bottom: calc(16px + env(safe-area-inset-bottom, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
left: 20px; left: 20px;
right: 20px; right: 20px;
height: 60px; height: 64px;
background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */ background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
@@ -448,8 +448,9 @@
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
} }
.dock-item { ::deep .dock-item {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 1; flex: 1;
@@ -458,84 +459,108 @@
text-decoration: none; text-decoration: none;
transition: color 0.2s ease, filter 0.2s ease; transition: color 0.2s ease, filter 0.2s ease;
position: relative; position: relative;
gap: 2px;
} }
.dock-item:hover, .dock-item.active { ::deep .dock-item:hover, ::deep .dock-item.active {
color: var(--accent); color: var(--accent) !important;
filter: drop-shadow(0 0 4px var(--accent-glow)); /* Clean accent glow drop-shadow */ 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 { ::deep .dock-text {
display: none !important; /* Eliminate visual noise */ display: block !important;
font-size: 10px;
font-weight: 500;
margin-top: 2px;
white-space: nowrap;
color: inherit;
} }
/* Central action button style */ /* Central action button style */
.dock-item.central-action { ::deep .dock-item.central-action {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
flex: 0 0 54px; flex: 1;
width: 54px; height: 100%;
height: 54px; gap: 2px;
margin-top: 0; margin-top: 0;
transform: translateY(-20px); /* Elevate layout */ transform: none !important;
z-index: 160; z-index: 160;
} }
.central-action-inner { ::deep .central-action-inner {
width: 54px; width: 36px;
height: 54px; height: 36px;
border-radius: 50%; border-radius: 50%;
background: var(--bg-surface); /* Pure background instead of green bleed */ background: var(--accent); /* Solid green background */
color: var(--accent); /* brand-green robot icon */ color: #ffffff !important; /* White robot icon */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 2px solid var(--accent); /* Crisp green edge container wrapper */ border: none !important;
box-shadow: 0 8px 24px var(--accent-glow); 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; 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, ::deep .dock-item.central-action:hover .central-action-inner,
.dock-item.central-action.active .central-action-inner { ::deep .dock-item.central-action.active .central-action-inner {
transform: scale(1.08) translateY(-2px); transform: scale(1.05);
box-shadow: 0 12px 28px var(--accent-glow); box-shadow: 0 4px 14px rgba(0, 255, 153, 0.5);
} }
.central-action-glow { ::deep .central-action-glow {
display: none; /* Purged background glow */ display: none; /* Purged background glow */
} }
/* Light Theme Overrides */ /* Light Theme Overrides */
.theme-light .reader-mobile-dock { .theme-light ::deep .reader-mobile-dock {
background: rgba(255, 255, 255, 0.85); /* Translucent light mode */ background: rgba(244, 241, 234, 0.9); /* Translucent light mode warm paper background */
border: 1px solid rgba(45, 42, 38, 0.08); /* Light theme microscopic border */ border: 1px solid rgba(139, 130, 115, 0.18); /* Light theme sepia border */
box-shadow: 0 8px 32px rgba(139, 130, 115, 0.1); box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15);
} }
.theme-light .dock-item { .theme-light ::deep .dock-item {
color: var(--text-muted); color: var(--text-muted);
} }
.theme-light .dock-item:hover, .theme-light .dock-item.active { .theme-light ::deep .dock-item:hover, .theme-light ::deep .dock-item.active {
color: var(--accent); color: var(--accent) !important;
filter: drop-shadow(0 0 3px var(--accent-glow)); filter: drop-shadow(0 0 3px var(--accent-glow));
} }
.theme-light .central-action-inner { .theme-light ::deep .central-action-inner {
background: var(--bg-surface); background: var(--accent) !important;
color: var(--accent); color: #ffffff !important;
border: 2px solid var(--accent); border: none !important;
box-shadow: 0 8px 24px var(--accent-glow); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
} }
.theme-light .dock-item.central-action:hover .central-action-inner, .theme-light ::deep .dock-item.central-action:hover .central-action-inner,
.theme-light .dock-item.central-action.active .central-action-inner { .theme-light ::deep .dock-item.central-action.active .central-action-inner {
box-shadow: 0 12px 28px var(--accent-glow); 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; display: none;
} }
} }
src/NexusReader.UI.Shared/Pages/Catalog.razor.css
+1 -1
View File
@@ -391,7 +391,7 @@
@media (max-width: 767px) { @media (max-width: 767px) {
.catalog-page { .catalog-page {
padding: 1.5rem 1rem; padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important;
} }
.catalog-header { .catalog-header {
src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
+14
View File
@@ -453,3 +453,17 @@
.theme-light .header-actions .btn-action:hover { .theme-light .header-actions .btn-action:hover {
box-shadow: 0 0 12px rgba(16, 185, 129, 0.1); 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
@@ -526,27 +526,27 @@
/* Mobile Dashboard Overrides */ /* Mobile Dashboard Overrides */
@media (max-width: 767px) { @media (max-width: 767px) {
.dashboard-content { .dashboard-content {
padding: 1rem 0.5rem; padding: 0.5rem 0.5rem calc(1.5rem + 64px) !important;
} }
.profile-header { .profile-header {
padding: 16px; padding: 10px 12px;
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 16px; border-radius: 12px;
margin-bottom: 16px; margin-bottom: 10px;
} }
.profile-visual { .profile-visual {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.5rem;
} }
.avatar-wrapper { .avatar-wrapper {
width: 48px; width: 40px;
height: 48px; height: 40px;
margin: 0; margin: 0;
} }
@@ -555,7 +555,7 @@
} }
.username { .username {
font-size: 1.15rem; font-size: 1.05rem;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
margin: 0; margin: 0;
@@ -563,7 +563,7 @@
} }
.user-role { .user-role {
font-size: 0.85rem; font-size: 0.8rem;
} }
.status-pills { .status-pills {
@@ -572,8 +572,8 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
gap: 0.35rem; gap: 0.25rem;
margin-top: 0.25rem; margin-top: 0.15rem;
} }
.status-pill { .status-pill {
@@ -581,44 +581,62 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.35rem 0.5rem; padding: 0.25rem 0.4rem;
font-size: 0.7rem; font-size: 0.65rem;
gap: 0.25rem; gap: 0.2rem;
white-space: nowrap; white-space: nowrap;
border-radius: 6px;
} }
.section-title { .section-title {
font-size: 1.5rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
letter-spacing: -0.5px; letter-spacing: -0.5px;
margin-bottom: 12px; margin-top: 4px;
margin-bottom: 8px;
color: var(--text-main); color: var(--text-main);
} }
.main-grid { .main-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 1rem !important; gap: 0.75rem !important;
} }
.secondary-grid { .secondary-grid {
display: grid !important;
grid-template-columns: 1fr !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 */ /* Force all widgets to take 100% width and fit inside parent container nicely */
.glass-panel { .glass-panel {
width: 100% !important; width: 100% !important;
padding: 1rem !important; padding: 12px !important;
box-sizing: border-box; box-sizing: border-box;
} }
/* Compress Knowledge Graph and Concept stack heights to maximize visible fold space */ /* Compress Knowledge Graph and Concept stack heights to maximize visible fold space */
.graph-placeholder { .graph-placeholder {
height: 140px; height: 120px;
} }
.concepts-linear-stack { .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 */ /* 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) { @media (max-width: 767px) {
.my-books-page { .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 { .my-books-header {
@@ -439,5 +439,9 @@
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.25rem; gap: 1.25rem;
} }
.book-cover-container {
height: 200px !important;
}
} }