Fix #208, Fix #106: Overhaul UI, layout adjustments, icon fixes#209
Fix #208, Fix #106: Overhaul UI, layout adjustments, icon fixes#209alexcottner merged 7 commits intomasterfrom
Conversation
…s-devtools into layout-adjustments
leplatrem
left a comment
There was a problem hiding this comment.
This full-width table is waay better than what we had 💯 !
I hope my questions and comments in CSS stuff won't discourage you 😅 😅
We could now save some vertical space in the Status section. I was thinking moving parts like this for example, and only showing the server URL in the link (we can keep the current href)
One detail which isn't one... I have some doubts about the collections icons you picked.
One could think that the red one means "delete collection", and refresh is not exactly "sync" (could mean "reload the information into the UI")
We could look for drawings that have semantics closer to what the buttons do.
Not that we should use exactly these examples, but as an idea:
- "sweep" or "broom" for clear: https://www.svgrepo.com/vectors/broom/
- And "cloud sync" or "download" for sync: https://www.svgrepo.com/vectors/cloud-sync/
👏
| "empty status status"; | ||
| grid-template-columns: 1fr 2fr max-content; | ||
| grid-gap: 10px; | ||
|
|
There was a problem hiding this comment.
I'm curious to know why you ditched the grid. This is super handy to do exactly what this PR is doing: reorganize panels
There was a problem hiding this comment.
The grid was causing issues for me when I reduced the window size. This is now responsive down to 860px. Should I try to work it back in?
There was a problem hiding this comment.
Ok, no... Leave it. I'm not expert enough to defend responsiveness with grids, but in theory they are made exactly for this (ie. rearrange panels based on media queries)
The only down part of the changes you made (not crucial, just discussing here for the love of the art), is that you embedded the panels into a #header section that has no other role than grouping its children together visually, whereas this would theorically have to be achieved in CSS
Anyway, we have higher priorities on other things, and this is just fine to ship like this
Selecting icons is the most difficult thing about software dev. I will always take icon suggestions. |
leplatrem
left a comment
There was a problem hiding this comment.
approved with comments 😉
| "empty status status"; | ||
| grid-template-columns: 1fr 2fr max-content; | ||
| grid-gap: 10px; | ||
|
|
There was a problem hiding this comment.
Ok, no... Leave it. I'm not expert enough to defend responsiveness with grids, but in theory they are made exactly for this (ie. rearrange panels based on media queries)
The only down part of the changes you made (not crucial, just discussing here for the love of the art), is that you embedded the panels into a #header section that has no other role than grouping its children together visually, whereas this would theorically have to be achieved in CSS
Anyway, we have higher priorities on other things, and this is just fine to ship like this
* Remove unused rules * Group sync history rules * Center environment select box * Reorder rules to keep generic on top and specific below * Fill width and height of sections in header bar * Fix consistency of select and button in env actions * Do not grow header when history grows * Fix history height on small windows
Fix #208, Fix #106
Goal of this PR is to resolve:
ICON_SIZE_INVALIDwarning from Addons linter #106 - Using svg icon instead of png so we no longer worry about icon sizesPossible changes:
pxtoptoremvalues everywhereUpdated Screenshots:
Dark mode
Light mode table
Small window
