-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Make the editor responsive #602
Conversation
Full-width image styles from #518 will need to be updated in a rebase, which should go to hint at the agony we'll experience with a mid-range sidebar width. 😬 |
editor/layout/style.scss
Outdated
} | ||
.editor-layout.is-sidebar-opened .editor-sidebar { | ||
/* Sidebar covers screen on mobile */ | ||
width: 100%; |
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.
Should we apply these styles in sidebar/style.scss
as:
.editor-sidebar {
.editor-layout.is-sidebar-opened & {
// ...
}
}
Or if not we should probably update text editor toolbar for consistency:
Seems to be deciding between letting the component be responsible for its own style but make assumptions about existence of ancestor classes, vs. applying them from the ancestor at the cost of losing colocation between the component and all its styles.
This commit shows up/down arrows only on larger breakpoints. The sidebar also becomes smaller at lower breakpoints.
Resize at proper breakpoints. Hide at mobile. More to come. Fix regression in toggled tab buttons.
When on mobile, the sidebar covers the whole screen. You have to toggle it off.
Also move sidebar responsive styles from layout to the component.
Rebased, and did a few changes based on your great feedback:
The fixed header in the text editor mode will need love separately. However I'm going to open a ticket soon about "undocking toolbars" — Calypso style. I'm crossing my fingers we can find a good way to make fixed position toolbars, perhaps we need to use JS for this to avoid the headaches. In other words I'd like for us to tackle improvements to fixed positioning separately. Good for a final review? |
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.
LGTM 👍
background: $dark-gray-500; | ||
color: $white; | ||
} | ||
.editor-tools__tabs & { |
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.
Minor: We already have some button styles in the tools stylesheet. Should we move these styles there to keep the Button component generic?
This PR makes the editor responsive: