bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-12-15 00:35:47 -07:00
Code Issues Packages Projects Releases Wiki Activity

Updated Device Details Design

Browse Source
This commit is contained in:
Nicole Rappe
2025-11-07 00:06:10 -07:00
parent 8402eb7a21
commit e9c196d4b0
2 changed files with 1074 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1762
Data/Engine/web-interface/src/Devices/Device_Details.jsx
View File

File diff suppressed because it is too large Load Diff

2
Data/Engine/web-interface/src/GUI_SYLING_GUIDE.md
View File

@@ -4,7 +4,9 @@
- **Full-Bleed Canvas**: Let hero shells run edge-to-edge inside the content column (no dark voids); reserve inset padding for interior cards so gradients feel immersive. - **Full-Bleed Canvas**: Let hero shells run edge-to-edge inside the content column (no dark voids); reserve inset padding for interior cards so gradients feel immersive.
- **Glass Panels**: Primary panels/cards use glassmorphic layers (`rgba(15,23,42,0.7)`), rounded 16–24px corners, blurred backdrops, and micro borders; add radial light flares via pseudo-elements for motion while keeping content readable. - **Glass Panels**: Primary panels/cards use glassmorphic layers (`rgba(15,23,42,0.7)`), rounded 16–24px corners, blurred backdrops, and micro borders; add radial light flares via pseudo-elements for motion while keeping content readable.
- **Hero Storytelling**: Each view begins with a stat-forward hero—gradient StatTiles (min 160px) and uppercase pills (HERO_BADGE_SX) summarize live signals, active filters, and selections so telemetry feels alive at a glance. - **Hero Storytelling**: Each view begins with a stat-forward hero—gradient StatTiles (min 160px) and uppercase pills (HERO_BADGE_SX) summarize live signals, active filters, and selections so telemetry feels alive at a glance.
- **Summary Data Grids**: When metadata runs long (device summary, network facts) render it with AG Grid inside a glass wrapper—two columns (Field/Value), matte navy background, and no row striping so it reads like structured cards instead of spreadsheets.
- **Tile Palettes**: Online tiles lean cyan→green, stale tiles go orange→red, “needs update” stays violet→cyan, and secondary metrics fade from cyan into desaturated steel so each KPI has a consistent hue family across pages. - **Tile Palettes**: Online tiles lean cyan→green, stale tiles go orange→red, “needs update” stays violet→cyan, and secondary metrics fade from cyan into desaturated steel so each KPI has a consistent hue family across pages.
- **Hardware Islands**: Storage, memory, and network blocks reuse the Quartz AG Grid theme inside rounded glass shells with flat fills (no gradients); show readable numeric columns (`Capacity`, `Used`, `Free`, `%`) instead of custom bars so panels match the Device Inventory surface.
- **Action Surfaces**: Control bars (view selectors, tool strips) live inside translucent glass bands with generous spacing; selectors get filled dark inputs with cyan hover borders, while primary actions are pill-shaped gradients and secondary controls use soft-outline icon buttons. - **Action Surfaces**: Control bars (view selectors, tool strips) live inside translucent glass bands with generous spacing; selectors get filled dark inputs with cyan hover borders, while primary actions are pill-shaped gradients and secondary controls use soft-outline icon buttons.
- **Anchored Controls**: Align view selectors/utility buttons directly with grid edges, keeping the controls in a single horizontal row that feels docked to the data surface; reserve glass backdrops for hero sections so the content canvas stays flush. - **Anchored Controls**: Align view selectors/utility buttons directly with grid edges, keeping the controls in a single horizontal row that feels docked to the data surface; reserve glass backdrops for hero sections so the content canvas stays flush.
- **Buttons & Chips**: Reserve gradient pills (`linear-gradient(135deg,#34d399,#22d3ee)` for success, `#7dd3fc→#c084fc` for creation) for primary CTAs; neutral actions rely on rounded outlines with `rgba(148,163,184,0.4)` borders and uppercase microcopy for supporting tokens. - **Buttons & Chips**: Reserve gradient pills (`linear-gradient(135deg,#34d399,#22d3ee)` for success, `#7dd3fc→#c084fc` for creation) for primary CTAs; neutral actions rely on rounded outlines with `rgba(148,163,184,0.4)` borders and uppercase microcopy for supporting tokens.