feat: responsive improvements#2203
Merged
Merged
Conversation
- Wrapped password input fields in a flex container for better alignment. - Added a new utility class .font-mono in default-base.css for consistent font styling in text areas. - This change continues the effort to enhance visual consistency across the plugin.
- Refactored the showStatus function for better readability and structure. - Changed the way parameters are passed to the jQuery post method. - This change continues the effort to enhance code clarity and maintainability across the plugin.
….page - Added spacing between hidden input fields and submit buttons for improved layout consistency. - This change continues the effort to enhance visual consistency across the plugin.
- Added overflow-x: auto to dd elements for improved handling of overflow content. - This change continues the effort to enhance visual consistency across the plugin.
- Removed unnecessary margin and transform properties from buttons for improved layout consistency. - This change continues the effort to enhance visual consistency across the plugin.
- Added width: 100% and box-sizing: border-box to pre elements for improved layout handling. - Updated box-sizing for dd elements to ensure consistent sizing across different contexts. - This change continues the effort to enhance visual consistency across the plugin.
Contributor
## Walkthrough
The changes focus on HTML and CSS refactoring across several plugin pages to improve layout, styling, and code clarity. Adjustments include inserting blank lines for readability, reorganizing password input sections for better structure, updating CSS for layout consistency, restructuring Docker network UI with flexbox, refining parity check scheduling selects, and modifying JavaScript to change where status updates are appended in the DOM.
## Changes
| File(s) | Change Summary |
|-----------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| emhttp/plugins/dynamix.docker.manager/DockerSettings.page | Refactored Docker network configuration UI with flexbox containers, multiline checkbox labels, grouped selects, and spans for subnet/gateway/DHCP pool; replaced inline markup with semantic containers; no logic changes. |
| emhttp/plugins/dynamix.vm.manager/VMSettings.page | Added blank lines after hidden inputs in btrfs scrub command forms for readability; no logic changes. |
| emhttp/plugins/dynamix/DeviceInfo.page | Inserted blank line after a hidden input in SMART Settings form; no logic changes. |
| emhttp/plugins/dynamix/DiskSettings.page | Added blank lines and wrapped encryption key inputs and checkboxes in flex containers with labels for improved layout; no logic changes. |
| emhttp/plugins/dynamix/UserAdd.page<br>emhttp/plugins/dynamix/UserEdit.page | Refactored password input sections to wrap inputs and icons in flex containers, separated password strength indicators; in UserEdit, replaced inline styles on SSH authorized keys textarea with `.font-mono` class; no logic changes. |
| emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php | Updated `showStatus` function to use shorthand property names in POST data and changed DOM target for appending status from `.tabs` to `.title .right`; reformatted callback for clarity. |
| emhttp/plugins/dynamix/styles/default-base.css | Removed commented fixed width from textarea/input, enhanced `pre` and `dd` elements with `box-sizing: border-box` and width styles, introduced `.font-mono` monospace utility class, refined flexbox/grid layouts and utility classes for flexible styling. |
| emhttp/plugins/dynamix.apcupsd/UPSdetails.page | Wrapped UPS status table in a new `TableContainer` div and reformatted table markup for readability without content changes. |
| emhttp/plugins/dynamix/CPUisol.page<br>emhttp/plugins/dynamix/CPUpin.page<br>emhttp/plugins/dynamix/CPUvms.page | Replaced `TableContainer` divs with `TableContainer--no-min-width`, indented hidden inputs, grouped action buttons and spinner inside flex container divs for consistent horizontal layout; no logic changes. |
| emhttp/plugins/dynamix/Syslog.page<br>emhttp/plugins/dynamix/sheets/Syslog.css | Replaced compact inline HTML for log controls with expanded semantic flexbox markup and grouped controls; added `.syslog-controls` CSS class for layout; simplified input styling; no logic changes. |
| emhttp/plugins/dynamix/styles/default-dynamix.css | Changed input `.t1.search` text color from `--gray-100` to `--text-color`; background color unchanged. |
| emhttp/plugins/dynamix/ParityCheck.page | Consolidated parity check scheduling select options into PHP arrays and attributes, simplifying HTML rendering while preserving mode-dependent UI behavior; no logic or exported entity changes. |
| emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings.css | Commented out CSS rules for network-related selectors (`select.net`, `span.net`, `span.ip4`, `span.gw6`), disabling these styles without removing them. |
| emhttp/plugins/dynamix.vm.manager/sheets/VMSettings.css | Removed `-webkit-overflow-scrolling: touch` from `body`, eliminated margin and transform styles from `#download_button` and `#remove_button`, deleted commented `.fileTree` block. |
| emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php | Wrapped checkbox inputs in flex container spans, removed inline width style on textarea, restructured config display template with flexbox spans, and modified JavaScript button HTML strings to use flex containers for better layout; no logic changes. |
| emhttp/plugins/dynamix.docker.manager/sheets/AddContainer.css | Removed fixed line-height, white-space, and width from `span.boxed`, replaced with `max-width: 100ch`; commented out multiple CSS rules for inputs, selects, and configLocation div; no other style changes. |
| emhttp/plugins/dynamix/Eth0.page | Removed standalone non-breaking space and colon before inline-block span wrapping description info button, consolidating markup for interface description input section. |
| emhttp/plugins/dynamix/EthX.page | Removed "shift" class from title div; wrapped interface description input and info button in inline-block spans; grouped port toggle and Add VLAN buttons in flex container; separated conditional display of Add VLAN button and service stop message; no logic changes. |
| emhttp/plugins/dynamix/NetworkExtra.page | Removed horizontal rule `<hr>` element between listening interfaces display and textarea input; no other changes. |
| emhttp/plugins/dynamix/NetworkRules.page | Removed "shift" class from a title div; no other changes. |
| emhttp/plugins/dynamix/RoutingTable.page | Restructured add route form inputs into nested flexbox spans for improved layout; grouped metric input with icon and label; moved hidden task input inside flex container; no logic changes. |
| emhttp/plugins/dynamix/Wireless.page | Removed "shift" and "wifi" classes; restructured Wi-Fi and Regulatory region sections with markdown div wrappers; generated Regulatory region options via PHP foreach; moved manual region input to separate div; wrapped buttons in flex container; wrapped spinner icons in inline-block spans; no logic changes. |
| emhttp/plugins/dynamix/include/Wireless.php | Replaced `<span class="wifi">` wrappers around WiFi network names and icons with `<span>` using flexbox classes `inline-flex flex-row items-center gap-2` and nested spans for names; no logic changes. |
| emhttp/plugins/dynamix/sheets/Eth0.css | Removed entire CSS block defining custom properties and styles for narrow text inputs on eth0 interface, including theme-specific overrides. |
| emhttp/plugins/dynamix/sheets/NetworkExtra.css | Deleted file containing margin-left style for spans with ids starting with "info-". |
| emhttp/plugins/dynamix/sheets/NetworkRules.css | Deleted file containing margin and theme-specific styles for elements with ids starting with "info-" and nested spans with status and vhshift classes. |
| emhttp/plugins/dynamix/sheets/Wireless.css | Removed styles for `.wifi` class and related input and select elements, deleting display, width, font, margin, and text-transform rules; no other CSS changes. |
| emhttp/plugins/dynamix/UserEdit.page | See UserAdd.page changes plus replaced inline styles on SSH authorized keys textarea with `.font-mono` class; no logic changes. |
| emhttp/plugins/dynamix/Syslinux.page | Improved `prepareMenu` JS function to extract label text by cloning and cleaning label elements instead of spans; added blank line after hidden input for formatting; no logic changes. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant Browser
participant Server
User->>Browser: Interacts with password input or btrfs scrub controls
Browser->>Server: Submits form (no logic change, only layout updated)
Server-->>Browser: Processes request as before
User->>Browser: Triggers showStatus (JS)
Browser->>Server: POST {name, plugin, job}
Server-->>Browser: Returns status
Browser->>Browser: Append status to .title .rightSuggested reviewers
Poem
|
- Wrapped the UPS details table in a div container for improved layout structure. - This change continues the effort to enhance visual consistency across the plugin.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
emhttp/plugins/dynamix.docker.manager/DockerSettings.page(2 hunks)emhttp/plugins/dynamix.vm.manager/VMSettings.page(2 hunks)emhttp/plugins/dynamix.vm.manager/sheets/VMSettings.css(0 hunks)emhttp/plugins/dynamix/UserAdd.page(1 hunks)emhttp/plugins/dynamix/UserEdit.page(2 hunks)emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php(1 hunks)emhttp/plugins/dynamix/styles/default-base.css(3 hunks)
💤 Files with no reviewable changes (1)
- emhttp/plugins/dynamix.vm.manager/sheets/VMSettings.css
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (10)
emhttp/plugins/dynamix/styles/default-base.css (3)
1479-1480: Ensure<pre>blocks span full width and use border-box sizing
Addingwidth: 100%andbox-sizing: border-boxmakes<pre>elements fully responsive within their containers and prevents overflow issues by including padding/border in the element’s width calculation.
1518-1518: Apply consistent box model to<dd>elements
Introducingbox-sizing: border-boxon<dd>ensures definition list items align correctly with other elements by including padding/border in the width/height.
1735-1739: Introduce.font-monoutility class
Adding the.font-monoTailwind-inspired utility centralizes monospace font styling (bitstream, monospace), replacing inline styles and promoting reuse across the UI.emhttp/plugins/dynamix.docker.manager/DockerSettings.page (2)
670-670: Improve readability with spacing after scrub start inputs
A blank line was inserted after the last hidden input for the btrfs scrub start command to visually separate hidden form data from the scrub action controls.
683-683: Improve readability with spacing after scrub cancel inputs
A blank line was inserted after the last hidden input for the btrfs scrub cancel command to maintain consistent form markup separation.emhttp/plugins/dynamix.vm.manager/VMSettings.page (2)
318-318: Improve readability by adding blank line after scrub start inputs
Inserted a blank line following the hidden inputs for the VM btrfs scrub start command to clearly delineate hidden data from visible buttons.
331-331: Improve readability by adding blank line after scrub cancel inputs
Inserted a blank line following the hidden inputs for the VM btrfs scrub cancel command to match the formatting of related forms.emhttp/plugins/dynamix/UserAdd.page (1)
168-179: Refactor password input markup for responsive layout
Wrapped the password input and show/hide icon in a flex container and moved the strength meter into its own span to improve styling control and responsiveness without altering existing validation logic.emhttp/plugins/dynamix/UserEdit.page (2)
210-221: Refactor password section to separate input and strength meter
Password fields and the toggle icon are now grouped in a flex container, with the strength indicator moved below, enhancing layout clarity while preserving existing behavior.
242-242: Use.font-monoutility for SSH authorized keys textarea
Replaced inline styling with the new.font-monoclass, improving maintainability and consistency with the updated CSS utility conventions.
- Updated form structures in CPUisol.page, CPUpin.page, and CPUvms.page to use flex containers for button alignment. - Removed unnecessary div wrappers to streamline layout. - This change continues the effort to enhance visual consistency across the plugin.
- Added spacing between hidden input fields and surrounding elements for improved layout consistency. - This change continues the effort to enhance visual consistency across the plugin.
- Wrapped tables in CPUisol.page, CPUpin.page, and CPUvms.page with a new div class for improved layout structure. - Added a new CSS class .TableContainer--no-min-width to handle overflow and ensure consistent table presentation. - This change continues the effort to enhance visual consistency across the plugin.
- Updated password input fields to use flex containers for improved alignment with the show passphrase checkbox. - This change continues the effort to enhance visual consistency across the plugin.
- Added new flex utility classes (.flex-wrap, .flex-wrap-reverse, .flex-nowrap, .flex-shrink-0) for improved layout flexibility. - Removed unnecessary margin-top from pre.up for better spacing consistency. - This change continues the effort to enhance visual consistency across the plugin.
- Refactored Syslog.page to use flexbox for improved layout of log controls and buttons. - Updated Syslog.css to include new styles for .syslog-controls and .label for better alignment and spacing. - This change continues the effort to enhance visual consistency across the plugin.
- Updated CSS selectors from :first-child to :first-of-type for better specificity in title margin handling. - This change continues the effort to enhance visual consistency across the plugin.
- Changed the layout of .Panels from flexbox to grid for improved responsiveness and spacing. - Updated gap properties for better alignment and consistency in panel presentation. - This change continues the effort to enhance visual consistency across the plugin.
- Increased the minimum width of .Panels and max-width for child elements from 100px to 120px for improved layout consistency. - This change continues the effort to enhance visual consistency across the plugin.
- Changed the color of the search input from var(--gray-100) to var(--text-color) for better contrast and visibility. - This change continues the effort to enhance visual consistency across the plugin.
- Reduced the gap property in .Panels from '2rem 3rem' to '2rem' for better alignment and spacing. - This change continues the effort to enhance visual consistency across the plugin.
- Refactored the ParityCheck.page to dynamically build day, dotm, month, and hour options based on the selected mode. - Updated the select attributes and options to improve usability and clarity for users configuring scheduled parity checks. - This change continues the effort to enhance user experience and consistency across the plugin.
…ings.css - Refactored DockerSettings.page to improve the structure and readability of checkbox and input elements using flexbox for better alignment. - Updated DockerSettings.css to comment out unused styles for select and span elements, streamlining the CSS for improved maintainability. - This change continues the effort to enhance visual consistency across the plugin.
- Introduced a new flex utility class `.buttons-no-margin` in default-base.css to manage button spacing effectively. - Updated CreateDocker.php to wrap checkbox inputs in flex containers for improved alignment and spacing. - Adjusted AddContainer.css to refine the max-width of span elements and commented out unused styles for better maintainability. - This change continues the effort to enhance visual consistency across the plugin.
…bility - Commented out the form styles within .tab-content in default-base.css to streamline the CSS and enhance maintainability. - This change continues the effort to enhance visual consistency across the plugin.
- Introduced padding-top styles for the first form and shade forms within .tab-content in default-base.css to enhance layout consistency. - This change continues the effort to improve visual consistency across the plugin.
- Removed empty `<div class="title nocontrol"> </div>` elements from EthX.page, NetworkRules.page, and Wireless.page to streamline the HTML structure. - This change continues the effort to enhance visual consistency across the plugin.
- Adjusted the structure of password input sections in UserAdd.page and UserEdit.page to ensure consistent layout and styling. - This change continues the effort to enhance visual consistency across the plugin.
- Decreased the gap property in .Panels from '2rem' to '1rem' to enhance alignment and spacing. - This change continues the effort to improve visual consistency across the plugin.
…tency - Updated the label selection in the prepareMenu function to clone labels and remove input elements, ensuring cleaner text extraction. - This change enhances the layout consistency across the Syslinux configuration interface.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Style
Refactor
Bug Fixes
Other Improvements