ui: Improve layout of node cards on large and small screens #4761
Conversation
This file contains 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
1. The grid based unhealthy cards are now clamped to only four wide maximum. This means that on larger screen the cards are much wider meaning you can view more information. Grid gutters are also clamped at a certain ideal width screen, remaining responsive for anything below this. 2. The healthy node columns are finally responsive following the same column rules as unhealthy nodes
johncowen
force-pushed
the
feature/ui-improve-node-card-layout
branch
from
7de01c9
to
7b50589
Compare
hannahhearth
reviewed
Oct 5, 2018
| @@ -13,15 +13,27 @@ | |||
| .unhealthy > div { | |||
| margin-bottom: 20px; | |||
| } | |||
| .healthy > div > ul > li { | |||
| padding-right: 23px; | |||
There was a problem hiding this comment.
Not a big deal at all, but for your reference, I've tried making all spacing stick to the 12, 24, 36, 48, etc., as suggested by Structure, so I was surprised to see 23, but again, not a big deal, and we can go back and do a spacing audit another time.
There was a problem hiding this comment.
Hey!
Cool yeah for sure. These are only +s because I moved them from further below, the values haven't been changed since my initial trace of the original layouts back from when we did the initial release, which would have been before Structure.
At some point I'll be able to do a re-trace of everything, hopefully might get a chance in the next couple of weeks.
Ta
John
hannahhearth
approved these changes
Oct 5, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
maximum. This means that on larger screen the cards are much wider
meaning you can view more information. Grid gutters are also clamped at
a certain ideal width screen, remaining responsive for anything below
this.
Before:
After:
column rules as unhealthy nodes.
Before:
After:
These changes along with #4760, drastically reduce the chances of things overflowing, but remaining viewable. (They can still happen, but it's only in certain usecases/setups)
Also addresses #4231 #4395 and #4748