-
Notifications
You must be signed in to change notification settings - Fork 416
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[dashpages] Dashpage layout improvements #5784
[dashpages] Dashpage layout improvements #5784
Conversation
`FluentGrid` uses `@media` queries for breakpoints, which work on the window size (viewport area). However we have a splitter in this UI, and dragging it should cause the dashpage area to relayout as the container size changes. This change removes `FluentGrid` and instead uses flexbox layout directly.
} | ||
|
||
.dashpage-chart-grid .dashpage-chart-tile { | ||
flex: 1 1 25%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you add a small comment here that says what this does
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain what's unclear? Do you want me to explain how flex
works?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't know what 1 1 25%
means. I'm more experienced with css grid than flex box and I'm guessing most people who see this won't know what it does.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok I see. This doc summarizes it pretty well: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
I'm not sure what comment we'd add, beyond linking to docs. There'll always be someone who isn't familiar with a language/platform/framework feature we're using, and we can't explain all of them.
Make dashpage responsive to container, not viewport
FluentGrid
uses@media
queries for breakpoints, which work on the window size (viewport area). However we have a splitter in this UI, and dragging it should cause the dashpage area to relayout as the container size changes.This change removes
FluentGrid
and instead uses flexbox layout directly.Note
This PR is to the
feature/dashpages
branch, notmain
.Before
After
Microsoft Reviewers: Open in CodeFlow