feat: responsive dashboard tiles#2258
Conversation
…d structure - Reorganized HTML structure within DashStats.page to enhance layout consistency and readability. - Adjusted indentation and spacing for better code clarity. This update aims to improve the maintainability of the code and enhance the user interface experience.
- Refactored HTML structure in DashStats.page to implement a new tile-header layout for improved organization and visual clarity. - Adjusted CSS styles in DashStats.css and default-base.css to support the new layout, including flexbox adjustments for better alignment and spacing. This update aims to enhance the user interface experience and maintainability of the code.
WalkthroughThis update refactors the dashboard's HTML and CSS for improved semantic structure and responsive design. The HTML layout uses modern, nested elements and descriptive classes, while the CSS introduces flexible grid and flexbox layouts, responsive breakpoints, and utility gap classes. No changes to event logic or exported entities were made. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant DashboardPage (HTML/CSS/JS)
User->>Browser: Loads Dashboard Page
Browser->>DashboardPage: Parses new semantic HTML structure
DashboardPage->>Browser: Applies responsive CSS and layout
User->>DashboardPage: Interacts with dashboard controls
DashboardPage->>Browser: Handles events using updated DOM selectors
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
- Updated HTML structure in DashStats.page to incorporate a new tile-header format for better organization and visual clarity. - Adjusted CSS in DashStats.css to introduce new styles for tile headers and improve layout responsiveness. - Made minor adjustments in default-base.css for padding consistency. This update aims to enhance the user interface experience and maintainability of the code.
- Changed grid-template-columns in DashStats.css to use repeat(2, 1fr) for better responsiveness. - Commented out text-transform in default-base.css to allow for more flexible text styling.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (13)
emhttp/plugins/dynamix/styles/default-base.css (1)
1076-1084: Remove unused styling remnants
Commented-outmargin-leftandtext-transformrules suggest leftover cruft. Consider deleting these lines to keep the codebase clean now that the new flex layout handles spacing and casing.emhttp/plugins/dynamix/sheets/DashStats.css (8)
44-48: Clean up commented width on.head_info
The commentedwidth: 250px;is dead code. Remove it to reduce clutter now that layouts are fluid.
55-57: Remove legacy padding rule on.head_gap
Commentedpadding-left: 14px;can be deleted—flexbox and grid now manage spacing.
76-80: Eliminate outdated float/margin on.ctrl
The commented float and margin hints at a previous layout hack. Prune these lines to keep the stylesheet lean.
105-107: Drop commentedspan#chart-toggleblock
Since the element is no longer present in the HTML, the commented selector can be safely removed.
125-128: Remove deprecated margin on icon font spans
Commentedmargin-right: 18px;is no longer needed thanks to.tile-header-leftgap utilities.
231-234: Prune redundant icon margin comment
The commentedmargin-right: 8px;underi[class^="icon-"]can be removed. Spacing is now handled by the tile header grid/gap.
249-256: Strip out old.infolink overrides
The commented block fora.infois obsolete—remove entirely to avoid confusion.
446-449: Avoid!importanton tile controls
Thefont-size: 2rem !importanthack forces sizing. Consider refactoring specificity or design tokens to remove!important.emhttp/plugins/dynamix/DashStats.page (4)
205-207: Add ARIA roles/labels to the grid and tile containers
With the introduction of the.gridand.tilewrappers for responsiveness, consider annotating these containers with ARIA roles (e.g.role="region"orrole="group") and descriptivearia-labelattributes to improve screen-reader navigation.
1902-1902: Remove commented-out dead code
The line// $('table.dashboard tbody').before(stopgap);is stale and should be deleted to avoid confusion.
1906-1906: Simplify static sort key generation
Using'_system_information_'.md5()for a constant identifier always yields the same hash. You could replace this with a fixed, human-readablesort="system_information"attribute unless you need cryptographic uniqueness.
1907-1907: Use a more intuitive icon and add accessibility
Thefa-ejecticon may not clearly indicate “toggle all content”. Consider swapping tofa-expand-alt/fa-compress-alt(or another more explicit glyph) and wrapping it in a<button>witharia-controlsandaria-pressed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
emhttp/plugins/dynamix/DashStats.page(5 hunks)emhttp/plugins/dynamix/sheets/DashStats.css(11 hunks)emhttp/plugins/dynamix/styles/default-base.css(5 hunks)
🔇 Additional comments (15)
emhttp/plugins/dynamix/styles/default-base.css (5)
1026-1032: Separate table and tbody background layers
Settingbackground-color: transparenton the<table>and moving the mild background to<tbody>improves layering for mixed row styles. This change aligns with the HTML restructure.
1039-1042: Symmetrical padding on first-row cells
Adjusting both top and bottom padding to1remensures consistent vertical spacing for the header row.
1070-1075: Normalize letter-spacing in VPN cells
Switching from a fixed pixel value tonormalletter-spacing improves text readability and adapts better across fonts.
1909-1923: Add new utility gap classes
.gap-5through.gap-8extend spacing scale for responsive layouts. These Tailwind-inspired utilities nicely fill spacing gaps.
2547-2554: Verify theme-specific dashboard variables
This override uses--dashboard-background-colorand--dashboard-border-colorwithin.Theme--sidebar. Please confirm these CSS variables are defined and reflect the intended design palette.Run this to verify definitions:
#!/bin/bash rg "dashboard-background-color" -n . rg "dashboard-border-color" -n .emhttp/plugins/dynamix/sheets/DashStats.css (9)
3-6: Introduce responsive breakpoint variables
Adding--dashstats-medium-breakpointand--dashstats-large-breakpointcentralizes media-query breakpoints and promotes consistency.
238-240: Responsive icon sizing withclamp()
Usingfont-size: clamp(80px, 5vw, 128px)for#mycaseensures the icon scales fluidly between breakpoints.
363-368: Enable flexible grid container
Addinggap: 2remandbox-sizing: border-boxtodiv.gridimproves consistency and responsiveness across breakpoints.
379-387: Center pie charts with margin
Applyingmargin: 1rem autotodiv.pieguarantees proper centering on small viewports.
413-419: Introduce semantic tile header container
.tile-headerflex layout organizes header components into left/right groups, enhancing readability and maintainability.
421-426: Define main header typography
.tile-header-mainsets clear font sizing and spacing for tile titles—great for consistent header styling.
428-435: Group header controls on the left
.tile-header-leftflex-wrap and gap utilities handle multi-line control clusters, improving responsiveness.
436-444: Align and wrap right-side controls
.tile-header-rightwithflex-wrap: wrap-reverseprevents overflow and keeps control icons accessible.
450-455: Responsive memory section grid
Converting.tile-system-memory-bodyto a grid with breakpoint-based column counts enhances layout flexibility for varied screen widths.Also applies to: 457-461
emhttp/plugins/dynamix/DashStats.page (1)
198-198: Ensure new CSS include is correct and versioned
The addedjquery.switchbutton.cssimport looks necessary for the switch buttons, but please verify that this file is checked into the repo under/webGui/styles/and thatautov()resolves to the expected, cache-busted URL.
- Adjusted gap values in DashStats.page for improved alignment and spacing. - Updated CSS in DashStats.css to enhance layout controls and added new styles for tile-header-right-controls. - Commented out letter-spacing in default-base.css for better text presentation and adjusted control styles for consistency. This update aims to enhance the visual clarity and responsiveness of the dashboard layout.
3 participants
Summary by CodeRabbit