diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css index bb2c941..910e14b 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css +++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css @@ -194,23 +194,89 @@ margin: 0; } -@media (max-width: 768px) { +@media (max-width: 767px) { + .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; + border: 1px solid rgba(255, 255, 255, 0.08); + } + .card-layout { flex-direction: column; - align-items: center; - text-align: center; - gap: 1.5rem; + align-items: stretch; + text-align: left; + gap: 1.25rem; } - .book-title, .chapter-name { + .book-cover { + align-self: center; + width: 120px; + } + + .book-details { + width: 100%; + text-align: left; + } + + .book-title { + font-size: 1.5rem; + text-align: left; white-space: normal; } + + .author-name { + text-align: left; + } .header-info, .chapter-progress { - align-items: center; + align-items: stretch; + } + + .chapter-name { + white-space: normal; + } + + .chapter-progress { + margin: 1.25rem 0; /* Margin separator before tracking bar */ + width: 100%; + } + + .progress-bar-container { + width: 100%; + } + + .book-excerpt { + display: block; /* Normal display to wrap synopsis */ + overflow: visible; + -webkit-line-clamp: none; + text-overflow: clip; + margin-bottom: 1.25rem; + text-align: left; + } + + .actions { + width: 100%; + margin-top: 0.5rem; + } + + .actions .btn-nexus { + width: 100%; + justify-content: center; + padding: 0.95rem 1.5rem; /* Larger touch target */ + box-sizing: border-box; + } + + .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); } } + + /* ============================================================ LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia" ============================================================ */ diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor index 62239f2..5b27574 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor @@ -110,6 +110,32 @@ + + + diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css index fb859da..d7cd26a 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css @@ -194,7 +194,11 @@ display: none; } -@media (max-width: 768px) { +.reader-mobile-dock { + display: none; +} + +@media (max-width: 767px) { .nexus-mobile-topbar { display: flex; align-items: center; @@ -418,4 +422,123 @@ .theme-light .nexus-mobile-topbar { border-bottom-color: rgba(0, 0, 0, 0.08); } + + /* Content padding for bottom navigation dock */ + .hub-content { + padding: 1.25rem 1.25rem calc(1.25rem + 72px + env(safe-area-inset-bottom, 0px)) !important; + } + + /* Reader Mobile Dock v3 */ + .reader-mobile-dock { + display: flex; + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: calc(64px + env(safe-area-inset-bottom, 0px)); + background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */ + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-top: 1px solid rgba(255, 255, 255, 0.08); /* Microscopic border */ + z-index: 150; + padding-bottom: env(safe-area-inset-bottom, 0px); + justify-content: space-around; + align-items: center; + box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); + } + + .dock-item { + display: flex; + align-items: center; + justify-content: center; + flex: 1; + height: 100%; + color: var(--text-muted); + text-decoration: none; + transition: color 0.2s ease, transform 0.2s ease; + position: relative; + } + + .dock-item:hover, .dock-item.active { + color: var(--accent); + } + + .dock-text { + display: none !important; /* Eliminate visual noise */ + } + + /* Central action button style */ + .dock-item.central-action { + display: flex; + align-items: center; + justify-content: center; + position: relative; + flex: 0 0 58px; + width: 58px; + height: 58px; + margin-top: 0; + transform: translateY(-20px); /* Elevate layout */ + z-index: 160; + } + + .central-action-inner { + width: 58px; + height: 58px; + border-radius: 50%; + background: var(--accent); /* brand-green */ + color: #0a0a0a; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid var(--accent); /* Crisp green edge */ + box-shadow: 0 8px 24px rgba(0, 255, 153, 0.2); /* Neon drop shadow */ + transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; + } + + .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 rgba(0, 255, 153, 0.4); + } + + .central-action-glow { + position: absolute; + inset: 4px; + border-radius: 50%; + background: var(--accent); + filter: blur(10px); + opacity: 0.3; + z-index: -1; + } + + /* Light Theme Overrides */ + .theme-light .reader-mobile-dock { + background: rgba(255, 255, 255, 0.85); /* Translucent light mode */ + border-top-color: rgba(45, 42, 38, 0.08); /* Light theme microscopic border */ + box-shadow: 0 -10px 30px rgba(139, 130, 115, 0.06); + } + + .theme-light .dock-item { + color: var(--text-muted); + } + + .theme-light .dock-item:hover, .theme-light .dock-item.active { + color: var(--accent); + } + + .theme-light .central-action-inner { + background: var(--accent); + color: #ffffff; + border: 2px solid var(--accent); + box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2); + } + + .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 rgba(16, 185, 129, 0.4); + } + + .theme-light .central-action-glow { + background: var(--accent); + } } diff --git a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css index 1ae0296..eda30ac 100644 --- a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css @@ -388,3 +388,23 @@ color: var(--text-main); text-shadow: none; } + +@media (max-width: 767px) { + .catalog-page { + padding: 1.5rem 1rem; + } + + .catalog-header { + margin-bottom: 1.5rem; + } + + .catalog-header h1 { + font-size: 1.75rem; + } + + .catalog-grid, .loading-grid { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.25rem; + } +} + diff --git a/src/NexusReader.UI.Shared/Pages/Dashboard.razor b/src/NexusReader.UI.Shared/Pages/Dashboard.razor index 76be0eb..a59db56 100644 --- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor +++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor @@ -7,6 +7,8 @@ @inject IIdentityService IdentityService @inject NavigationManager NavigationManager @inject ISyncService SyncService +@inject IJSRuntime JS +@using Microsoft.JSInterop @attribute [Authorize] @implements IDisposable @@ -54,55 +56,86 @@

Integracja Wiedzy

- +
-
-
- - @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any()) - { -
- @for (int i = 0; i < _profile.MappedConcepts.Count; i++) - { - var concept = _profile.MappedConcepts[i]; - var angle = i * (360.0 / _profile.MappedConcepts.Count); - var dist = 65; -
-
- } -
- } - else - { -
-
-
-
-
- } - -
- @(string.IsNullOrEmpty(_hoveredConceptLabel) ? "TU JESTEŚ" : _hoveredConceptLabel) -
-
- - @if (_hoveredConcept != null) + + @if (_showSimplifiedList) { -
- @_hoveredConcept.Type -

@_hoveredConcept.Content

+
+ @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any()) + { +
+ @foreach (var concept in _profile.MappedConcepts) + { +
+ @concept.Type + @concept.Content +
+ } +
+ } + else + { +
+ +

Brak pojęć. Rozpocznij czytanie, aby AI wyodrębniło kluczowe koncepty.

+
+ }
} else { -
- Mapowanie AI -

Najedź na węzeł, aby zbadać pojęcie wydobyte przez Nexus AI.

+
+
+ + @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any()) + { +
+ @for (int i = 0; i < _profile.MappedConcepts.Count; i++) + { + var concept = _profile.MappedConcepts[i]; + var angle = i * (360.0 / _profile.MappedConcepts.Count); + var dist = 65; +
+
+ } +
+ } + else + { +
+
+
+
+
+ } + +
+ @(string.IsNullOrEmpty(_hoveredConceptLabel) ? "TU JESTEŚ" : _hoveredConceptLabel) +
+ + @if (_hoveredConcept != null) + { +
+ @_hoveredConcept.Type +

@_hoveredConcept.Content

+
+ } + else + { +
+ Mapowanie AI +

Najedź na węzeł, aby zbadać pojęcie wydobyte przez Nexus AI.

+
+ } }
@@ -173,6 +206,32 @@ private UserProfileDto? _profile; private MappedConceptDto? _hoveredConcept; private string _hoveredConceptLabel = string.Empty; + private bool _showSimplifiedList = false; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + try + { + var isMobile = await JS.InvokeAsync("eval", "window.innerWidth < 768"); + if (isMobile) + { + _showSimplifiedList = true; + StateHasChanged(); + } + } + catch + { + // Fallback for tests or prerendering + } + } + } + + private void ToggleGraphMode() + { + _showSimplifiedList = !_showSimplifiedList; + } protected override async Task OnInitializedAsync() { diff --git a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css index 29e079a..cc5a907 100644 --- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css @@ -524,14 +524,17 @@ } /* Mobile Dashboard Overrides */ -@media (max-width: 768px) { +@media (max-width: 767px) { .dashboard-content { padding: 1.25rem 0.75rem; } .profile-header { - padding: 1.5rem 1rem; + padding: 24px 16px; + background: var(--bg-surface); + border: 1px solid var(--border); border-radius: 16px; + margin-bottom: 24px; } .profile-visual { @@ -575,6 +578,14 @@ font-size: 0.75rem; } + .section-title { + font-size: 2rem; + font-weight: 700; + letter-spacing: -0.5px; + margin-bottom: 16px; + color: var(--text-main); + } + .main-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; @@ -725,5 +736,190 @@ color: var(--accent); } +/* --- Concepts Linear Stack for Mobile/Utility Switch --- */ +.concepts-linear-stack { + height: 180px; + display: flex; + flex-direction: column; + overflow-y: auto; + gap: 0.5rem; + padding-right: 0.5rem; +} + +.concept-linear-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.concept-linear-item { + display: flex; + align-items: center; + 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-radius: 8px; + font-size: 0.85rem; + color: var(--text-main); + transition: all 0.2s ease; +} + +.concept-linear-item:hover { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(0, 255, 153, 0.2); + transform: translateX(2px); +} + +.concept-badge { + padding: 2px 8px; + border-radius: 4px; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + white-space: nowrap; +} + +.concept-badge.rule { + background: rgba(255, 70, 70, 0.1); + color: #ff8b8b; + border: 1px solid rgba(255, 70, 70, 0.2); +} + +.concept-badge.definition { + background: rgba(255, 176, 58, 0.1); + color: #ffd18c; + border: 1px solid rgba(255, 176, 58, 0.2); +} + +.concept-badge.table { + background: rgba(217, 70, 239, 0.1); + color: #f5d0fe; + border: 1px solid rgba(217, 70, 239, 0.2); +} + +.concept-badge.section { + background: rgba(59, 130, 246, 0.1); + color: #93c5fd; + border: 1px solid rgba(59, 130, 246, 0.2); +} + +.concept-badge.bridge { + background: rgba(6, 182, 212, 0.1); + color: #67e8f9; + border: 1px solid rgba(6, 182, 212, 0.2); +} + +.concept-badge.concept { + background: rgba(0, 210, 196, 0.05); + color: #e0e0e0; + border: 1px solid rgba(0, 210, 196, 0.2); +} + +.concept-text { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 500; +} + +.concepts-empty-list { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + color: var(--text-muted); + font-size: 0.85rem; + text-align: center; + gap: 0.5rem; +} + +.concepts-empty-list p { + margin: 0; +} + +.view-toggle-btn { + display: inline-flex; + align-items: center; + gap: 0.35rem; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + color: var(--text-muted); + padding: 0.35rem 0.75rem; + border-radius: 6px; + font-size: 0.75rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; +} + +.view-toggle-btn:hover { + background: rgba(0, 255, 153, 0.08); + border-color: var(--accent); + color: var(--accent); +} + +/* --- 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); +} + +.theme-light .concept-linear-item:hover { + background: rgba(0, 0, 0, 0.04); + border-color: rgba(16, 185, 129, 0.2); +} + +.theme-light .concept-badge.rule { + background: rgba(220, 38, 38, 0.05); + color: #991b1b; + border-color: rgba(220, 38, 38, 0.15); +} + +.theme-light .concept-badge.definition { + background: rgba(217, 119, 6, 0.05); + color: #92400e; + border-color: rgba(217, 119, 6, 0.15); +} + +.theme-light .concept-badge.table { + background: rgba(192, 132, 252, 0.05); + color: #6b21a8; + border-color: rgba(192, 132, 252, 0.15); +} + +.theme-light .concept-badge.section { + background: rgba(37, 99, 235, 0.05); + color: #1e3a8a; + border-color: rgba(37, 99, 235, 0.15); +} + +.theme-light .concept-badge.bridge { + background: rgba(8, 145, 178, 0.05); + color: #155e75; + border-color: rgba(8, 145, 178, 0.15); +} + +.theme-light .concept-badge.concept { + background: rgba(13, 148, 136, 0.03); + color: #115e59; + border-color: rgba(13, 148, 136, 0.1); +} + +.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 { + background: rgba(16, 185, 129, 0.08); + border-color: var(--accent); + color: var(--accent); +} + diff --git a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css index 4b089b4..84e02d5 100644 --- a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css +++ b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css @@ -407,3 +407,37 @@ .theme-light .progress-bar { background: #e4e1d9; } + +@media (max-width: 767px) { + .my-books-page { + padding: 1.5rem 1rem; + } + + .my-books-header { + margin-bottom: 1.5rem; + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + + .header-title-section h1 { + font-size: 1.75rem; + text-align: center; + } + + .header-title-section .subtitle { + text-align: center; + } + + .add-book-trigger { + width: 100%; + text-align: center; + padding: 0.9rem 1.5rem; + } + + .books-grid, .loading-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 1.25rem; + } +} + diff --git a/src/NexusReader.UI.Shared/wwwroot/app.css b/src/NexusReader.UI.Shared/wwwroot/app.css index 81690bc..a2333a9 100644 --- a/src/NexusReader.UI.Shared/wwwroot/app.css +++ b/src/NexusReader.UI.Shared/wwwroot/app.css @@ -8,6 +8,7 @@ --text-muted: #a1a1aa; --accent: #00ff99; --accent-glow: rgba(0, 255, 153, 0.3); + --border: rgba(255, 255, 255, 0.05); /* Legacy mapping for backwards compatibility */ --nexus-neon: var(--accent); @@ -152,6 +153,7 @@ --text-muted: #a1a1aa; --accent: #00ff99; --accent-glow: rgba(0, 255, 153, 0.3); + --border: rgba(255, 255, 255, 0.05); /* Legacy mapping for backwards compatibility */ --nexus-bg: var(--bg-base); @@ -169,6 +171,7 @@ --text-muted: #78716c; --accent: #10b981; --accent-glow: rgba(16, 185, 129, 0.2); + --border: rgba(0, 0, 0, 0.08); /* Legacy mapping for backwards compatibility */ --nexus-bg: var(--bg-base);