Apply flex layout to RSS Rule Manager dialog #2691
Conversation
|
Can we put the "Ok" and "Cancel" buttons beside each other on mobile to save space? |
| @@ -350,11 +350,13 @@ div.space {flex-grow: 1;} | |||
| /* No media query for `xs` since this is the default in Bootstrap */ | |||
| /* Custom rules for medium devices */ | |||
| div#tadd {max-width: 95vw;} | |||
| div#tadd .buttons-list { | |||
| div.dlg-window .buttons-list { | |||
There was a problem hiding this comment.
Using this rule to set the buttons lists in all dialog windows.
| margin: 0.5rem; | ||
| gap: 0.25rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-direction: row; |
There was a problem hiding this comment.
Change buttons direction from column to row on small screens.
|
The global style changes in this pull request break a lot of things on the status bar and in the settings menu. We can't unify these things in |
* Make responsive status bar * Adjust disk usage meter according to refined status bar * Adjust cpu load meter according to refined status bar * Adjust port checker according to refined status bar * Place status cells all in one line for mobile display * Adapt CPU load meter size for different screen sizes * Remove toggle IP display
|
These changes do cause come display issues on the settings dialog window and some other dialog windows, such as footer buttons going out of boundary, and text boxes becoming excessively large. However, the status bar should be fine. I didn't see any mess-ups from my test. This was before the rest of the dialog windows are rewritten for flex layout. They are all going to be rewritten anyway, and eventually, the CSS styles should be simplified and unified, in my opinion. I made this change upfront, and will adapt other components to this change in the next steps. However, the status bar should be fine. I didn't see any mess-ups from my test. |
|
Okay, could you rebase jevenski:rssurlrewrite with Novik:develop ? We need to cleanup these files changed for future reference. |
…into rssurlrewrite
* Make responsive status bar * Adjust disk usage meter according to refined status bar * Adjust cpu load meter according to refined status bar * Adjust port checker according to refined status bar * Place status cells all in one line for mobile display * Adapt CPU load meter size for different screen sizes * Remove toggle IP display
|
The rebase process now seems to be done. 9 files are changed in total. Really had some troubles during the rebase process. I thought I was going to give this pull request up and make a new one. |
|
Okay, looks good thanks. |
* Apply flex layout to RSS Rule Manager dialog * Unify dialog window footer buttons list style * Make responsive status bar (Novik#2690) * Make responsive status bar * Adjust disk usage meter according to refined status bar * Adjust cpu load meter according to refined status bar * Adjust port checker according to refined status bar * Place status cells all in one line for mobile display * Adapt CPU load meter size for different screen sizes * Remove toggle IP display * Apply flex layout to RSS Rule Manager dialog * Unify dialog window footer buttons list style * Apply flex layout to RSS Rule Manager dialog * Unify dialog window footer buttons list style * Make responsive status bar (Novik#2690) * Make responsive status bar * Adjust disk usage meter according to refined status bar * Adjust cpu load meter according to refined status bar * Adjust port checker according to refined status bar * Place status cells all in one line for mobile display * Adapt CPU load meter size for different screen sizes * Remove toggle IP display * Remove unwanted submodule which was added accidentally
This is basically a copy of the previous refined Ratio Rules dialog. Besides, I set some universal rules for general HTML elements like
div,input, andselect, instead of defining the display styles in each and every plugin separately.Desktop screens (equal to or wider than 768px):
Mobile screens (smaller than 768px):
