feat: Mobile-First Layout Redesign & D3.js Graph Stabilization (#58)
This PR implements a comprehensive mobile-first design overhaul for the Reader, Dashboard, and Navigation layouts. ### Key Accomplishments 1. **Dynamic Viewport Synchronization**: Installed robust `ResizeObserver` listener on the client side with automatic reactive toggling of `platform-mobile`/`platform-desktop` CSS classes. 2. **Tab Controller & Visibility Fixes**: Refactored visibility constraints in `ReaderLayout.razor.css` to prevent layout clipping and DOM bloat. Standardized the mobile tab content selectors to ensure active views display perfectly. 3. **D3.js Graph Stabilization**: * Added checks to bypass resize callbacks when the graph container is hidden (`clientWidth <= 0` or `clientHeight <= 0`). * Guarded coordination ticks, node focus transformations, and zoom transitions against `NaN` parameters. 4. **Interactive Mobile UX Enhancements**: Optimized touch target sizing (44px target bounds) and interactive transitions for a state-of-the-art visual presentation. This has been successfully compiled and verified against the standard .NET 10 compilation gates. --------- Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Reviewed-on: #58 Co-authored-by: Antigravity <antigravity@google.com> Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #58.
This commit is contained in:
@@ -506,7 +506,7 @@ main {
|
||||
}
|
||||
|
||||
.platform-mobile .nexus-mobile-reader-tabs {
|
||||
display: block;
|
||||
display: none; /* Keep hidden by default */
|
||||
width: 100vw;
|
||||
height: calc(100vh - 60px);
|
||||
position: absolute;
|
||||
@@ -517,6 +517,11 @@ main {
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.app-container.platform-mobile.active-mobile-tab-graph .nexus-mobile-reader-tabs,
|
||||
.app-container.platform-mobile.active-mobile-tab-insight .nexus-mobile-reader-tabs {
|
||||
display: block; /* Show only when graph or insight tabs are active */
|
||||
}
|
||||
|
||||
.nexus-mobile-tab-content {
|
||||
display: none;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user