feat(ui): implement premium mobile-first reader layout with three-tab bottom navigation and assistant FAB (#57)

This pull request delivers a comprehensive mobile-first user experience overhaul for the NexusReader SaaS platform, specifically optimizing the Reader Canvas, D3.js Knowledge Graph representation, Dashboard card grid layout, and the application-wide navigation shell on mobile viewports (< 768px). ### Key Enhancements: 1. **Interactive Three-Tab Bottom Navigation**: Added premium, frosted glassy bottom-bar for mobile viewports to switch between standard reading, D3.js graph visual workspace, and structural concept reviews/quizzes. 2. **Contextual Floating Action Button (FAB)**: Introduced the AI Assistant FAB on mobile canvas layout with responsive animation, state-synchronization to trigger corresponding quiz views, and pulsing badge notification when new quizzes are dynamically generated. 3. **Adaptive D3.js Simulation & Rendering**: Integrated `setMobileMode(isMobile)` logic inside the D3 simulation engine, optimizing forces, rendering compact glyph pills, and installing auto-resize observers. 4. **Architectural & Native AOT Cleanliness**: Clean separation of layouts, fully scoped CSS configurations, functional-safe event orchestration inside `IReaderInteractionService`, and zero compiler errors. --------- Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Reviewed-on: #57 Co-authored-by: Antigravity <antigravity@google.com> Co-committed-by: Antigravity <antigravity@google.com>
2026-05-27 07:44:44 +00:00
parent a9a670d776
commit 30f445ea89
9 changed files with 947 additions and 111 deletions
@@ -528,3 +528,81 @@
    overflow: hidden;
 }

+/* Mobile Dashboard Overrides */
+@media (max-width: 768px) {
+    .dashboard-content {
+        padding: 1.25rem 0.75rem;
+    }
+
+    .profile-header {
+        padding: 1.5rem 1rem;
+        border-radius: 16px;
+    }
+
+    .profile-visual {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: center;
+        text-align: left;
+        gap: 1.25rem;
+    }
+
+    .avatar-wrapper {
+        width: 70px;
+        height: 70px;
+        margin: 0;
+    }
+
+    .user-info {
+        flex: 1;
+    }
+
+    .user-name {
+        font-size: 1.5rem;
+        margin-bottom: 0.25rem;
+    }
+
+    .user-role {
+        font-size: 0.85rem;
+    }
+
+    .status-pills {
+        width: 100%;
+        margin-top: 0.5rem;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .status-pill {
+        padding: 0.35rem 0.75rem;
+        font-size: 0.75rem;
+    }
+
+    .main-grid {
+        grid-template-columns: 1fr !important;
+        gap: 1.25rem !important;
+    }
+
+    .secondary-grid {
+        grid-template-columns: 1fr !important;
+        gap: 1.25rem !important;
+    }
+
+    /* Force all widgets to take 100% width and fit inside parent container nicely */
+    .glass-panel {
+        width: 100% !important;
+        padding: 1.25rem !important;
+        box-sizing: border-box;
+    }
+
+    /* Expand touch-targets to 48px min height for interactive elements */
+    .btn-nexus, .quiz-option, .satellite, .logout-btn, .nav-item, .quiz-item {
+        min-height: 48px;
+        display: flex;
+        align-items: center;
+        touch-action: manipulation;
+    }
+}
+