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
6 changed files with 10 additions and 18 deletions
Showing only changes of commit 82fcc9a717 - Show all commits
@@ -7,12 +7,12 @@
{
<div @key='"current-reading-book"' class="card-layout">
<div class="book-cover">
<img src="@(string.IsNullOrEmpty(Book.CoverUrl) ? "https://via.placeholder.com/120x180?text=No+Cover" : Book.CoverUrl)" 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" />
</div>
<div class="book-details">
<div class="header-info">
<h3 class="book-title">@Book.Title</h3>
<h3 id="book-title-@Book.Id" class="book-title">@Book.Title</h3>
<span class="author-name">by @Book.Author.Name</span>
</div>
@@ -41,7 +41,7 @@
}
<div class="actions">
<button class="btn-nexus outline" @onclick="HandleContinueReading">
<button class="btn-nexus outline" @onclick="HandleContinueReading" aria-label="Kontynuuj czytanie">
Kontynuuj czytanie
<NexusIcon Name="arrow-right" Size="16" />
</button>
@@ -200,7 +200,7 @@
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ambient card shadow */
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--border);
}
.card-layout {
@@ -284,7 +284,6 @@
.theme-light .current-reading-card {
background: #ffffff; /* Pure white card surface for light theme */
border-color: rgba(45, 42, 38, 0.08);
box-shadow: 0 12px 24px rgba(139, 130, 115, 0.12);
}
}
3
@@ -206,5 +206,6 @@
public void Dispose()
{
ThemeService.OnThemeChanged -= HandleThemeChanged;
GC.SuppressFinalize(this);
}
}
@@ -266,7 +266,7 @@
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--nexus-neon) 0%, #0099ff 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
@@ -392,7 +392,6 @@
/* User avatar mini: solid accent, white text, no neon glow */
.theme-light .user-avatar-mini {
background: #10b981;
border: 1px solid rgba(0, 0, 0, 0.08);
color: #ffffff;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
@@ -418,10 +417,6 @@
box-shadow: 10px 0 30px rgba(139, 130, 115, 0.2);
}
/* Mobile topbar: warm paper border */
.theme-light .nexus-mobile-topbar {
border-bottom-color: rgba(0, 0, 0, 0.08);
}
/* Content padding for bottom navigation dock */
.hub-content {
@@ -439,7 +434,7 @@
background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08); /* Microscopic perimeter border */
border: 1px solid var(--border); /* Microscopic perimeter border */
border-radius: 30px; /* Floating capsule rounded borders */
z-index: 150;
padding: 0 16px;
@@ -534,7 +529,6 @@
/* Light Theme Overrides */
.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);
}
1
@@ -794,7 +794,7 @@
gap: 0.75rem;
padding: 0.6rem 0.75rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.85rem;
color: var(--text-main);
@@ -882,7 +882,7 @@
align-items: center;
gap: 0.35rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--border);
color: var(--text-muted);
padding: 0.35rem 0.75rem;
border-radius: 6px;
@@ -901,7 +901,6 @@
/* --- Light Theme Overrides for Concepts Stack --- */
.theme-light .concept-linear-item {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.05);
color: var(--text-main);
}
@@ -948,7 +947,6 @@
.theme-light .view-toggle-btn {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
.theme-light .view-toggle-btn:hover {
+1 -1
View File
@@ -92,7 +92,7 @@
.glass-panel {
background: rgba(20, 20, 20, 0.85);
/* Darker fallback for readability */
border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1