Query View page design adjustments #4670
Conversation
gabrieldutra
force-pushed
the
query-view-fixes
branch
from
49ddc8a to
f29a55b
Compare
There was a problem hiding this comment.
Comments addressed:
- The Data Source and Refresh Schedule fields are unaligned: 👍
- The execution status is closer to the lower border than the upper one, need to center it: now the ExecutionStatus is relative to the Footer and has a minHeight of its size, this will make it grow above the footer if necessary (error messages for example)
- Mobile header: This one has a lot of changes, I basically rewrote its flexibility (need to clean up outdated markup if we keep in this direction). It won't be 100% as the design, but the behavior now is like in this gif:
(Basically it follows the priority of wrapping elements: Tags > Query Title text > Actions (only wrapped in <515px, but Tags can be inline in here too)
One small con from this change IMO is that it will create a sudden change when you edit the Query title (lmk if you want me to explore alternatives to mitigate this), but I'm glad with the behavior as it makes best use of the page height.
To-do:
- Add margin-top back to the Query Header (noticed in Percy)
- Reduce Padding on Parameters in Query Editor Page
| @@ -244,18 +244,14 @@ text.slicetext { | |||
| display: flex; | |||
| align-items: center; | |||
|
|
|||
| h3 { | |||
| margin-right: 5px !important; | |||
There was a problem hiding this comment.
This was more of a DashboardPage thing, so moved to it.
| .label { | ||
| margin-top: 3px; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .favorites-control { | ||
| font-size: 19px; | ||
| margin-right: 5px; | ||
| margin-right: 10px; |
There was a problem hiding this comment.
This also affects the DashboardPage now, we added those extra 5px on the Query Pages, I thought it should also be in there for consistence, LMK if you think it differently.
|
One issue I noticed on mobile: charts have some min height which is probably too small:
Another example:
Although to be honest, I'm not sure what the right solution here. Can min-height be calculated? |
|
@arikfr I think it can be an unrelated bug with Chart as it seems it happened in Angular too: Perhaps it's calculating its size too early? (notice that slightly changing the width makes it better fit the space) @kravets-levko, do you know ath related? |
|
I didn't see this issue before. Looks like it's calculating it's size too early, but I have no idea why 🤔 |
What type of PR is this? (check all applicable)
Description
Addresses comments from #4663
[Will write a detailed explanation of what I did while netlify runs]
Related Tickets & Documents
#4663
Mobile & Desktop Screenshots/Recordings (if there are UI changes)
Soon