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>
This commit was merged in pull request #57.
This commit is contained in:
@@ -467,4 +467,286 @@ main {
|
||||
.back-to-graph-btn:hover {
|
||||
color: var(--nexus-neon, #00f0ff);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
/* Mobile-First Platform Customization */
|
||||
.platform-mobile {
|
||||
grid-template-columns: 1fr !important;
|
||||
height: 100vh !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.platform-mobile .reader-pane {
|
||||
width: 100vw !important;
|
||||
height: calc(100vh - 60px) !important; /* reserve bottom nav height */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Three-tab mobile views depending on the active mobile tab class */
|
||||
.app-container.platform-mobile.active-mobile-tab-reader .reader-pane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-container.platform-mobile.active-mobile-tab-graph .nexus-mobile-reader-tabs .graph-tab {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-container.platform-mobile.active-mobile-tab-insight .nexus-mobile-reader-tabs .insight-tab {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Mobile full-bleed tabs container */
|
||||
.nexus-mobile-reader-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.platform-mobile .nexus-mobile-reader-tabs {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 60px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #0d0d0d;
|
||||
overflow: hidden;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.nexus-mobile-tab-content {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Active tab display with smooth slide-up / fade-in transition */
|
||||
.nexus-mobile-tab-content.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: tab-transition 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes tab-transition {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Inside Mobile Graph Tab: full bleed and responsive */
|
||||
.nexus-mobile-tab-content.graph-tab {
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.nexus-mobile-tab-content.graph-tab :deep(svg) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* Mobile Insight container & tabs */
|
||||
.mobile-insight-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobile-insight-header {
|
||||
background: rgba(13, 13, 13, 0.95);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 0.75rem 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-insight-nav {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.mobile-insight-nav-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-family: var(--nexus-font-sans, "Outfit", sans-serif);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.mobile-insight-nav-btn.active {
|
||||
background: rgba(0, 240, 255, 0.1);
|
||||
color: var(--nexus-neon, #00f0ff);
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
|
||||
}
|
||||
|
||||
.mobile-insight-nav-btn.quiz-btn.quiz-pulse {
|
||||
animation: quiz-pulse-btn-anim 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes quiz-pulse-btn-anim {
|
||||
0% { color: rgba(255, 255, 255, 0.5); }
|
||||
50% { color: #f43f5e; text-shadow: 0 0 8px rgba(244, 63, 94, 0.6); }
|
||||
100% { color: rgba(255, 255, 255, 0.5); }
|
||||
}
|
||||
|
||||
.mobile-insight-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.mobile-insight-body .contextual-intelligence-panel {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mobile-insight-body .contextual-intelligence-panel .panel-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.mobile-quiz-wrapper {
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Three-Tab Bottom Navigation Bar styling */
|
||||
.nexus-mobile-bottom-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.platform-mobile .nexus-mobile-bottom-nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 60px;
|
||||
background: rgba(13, 13, 13, 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.bottom-nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
height: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-family: var(--nexus-font-sans, "Outfit", sans-serif);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.bottom-nav-item.active {
|
||||
color: var(--nexus-neon, #00f0ff);
|
||||
text-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
.bottom-nav-item.active :deep(svg) {
|
||||
filter: drop-shadow(0 0 5px var(--nexus-neon, #00f0ff));
|
||||
}
|
||||
|
||||
.insight-icon-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-quiz-indicator {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #f43f5e;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px #f43f5e;
|
||||
animation: indicator-flash 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes indicator-flash {
|
||||
0% { transform: scale(0.8); opacity: 0.6; }
|
||||
50% { transform: scale(1.2); opacity: 1; }
|
||||
100% { transform: scale(0.8); opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* Assistant FAB styling inside ReaderCanvas */
|
||||
:global(.nexus-mobile-assistant-fab) {
|
||||
position: fixed;
|
||||
bottom: 75px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(0, 100, 255, 0.15) 100%);
|
||||
border: 1px solid rgba(0, 240, 255, 0.4);
|
||||
box-shadow: 0 4px 20px rgba(0, 240, 255, 0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
:global(.nexus-mobile-assistant-fab:hover) {
|
||||
transform: scale(1.1) translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4);
|
||||
border-color: var(--nexus-neon, #00f0ff);
|
||||
}
|
||||
|
||||
:global(.nexus-mobile-assistant-fab:active) {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
:global(.nexus-mobile-assistant-fab.has-new-quiz) {
|
||||
border-color: #f43f5e;
|
||||
box-shadow: 0 4px 20px rgba(244, 63, 94, 0.3);
|
||||
}
|
||||
|
||||
:global(.nexus-mobile-assistant-fab .fab-badge) {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #f43f5e;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px #f43f5e;
|
||||
animation: indicator-flash 1.5s infinite ease-in-out;
|
||||
}
|
||||
Reference in New Issue
Block a user