Skip to content
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

Merged
merged 6 commits into from
May 4, 2017
Merged

Make the editor responsive #602

merged 6 commits into from
May 4, 2017

Conversation

jasmussen
Copy link
Contributor

This PR makes the editor responsive:

  • It makes the body responsive
  • It hides the up/down arrows at the smallest mobile breakpoint, according to the mockups we'll want to show these in top toolbars at that breakpoint regardless, which I will ticket separately
  • It makes the sidebar responsive
  • The sidebar, when toggled open, covers the entire viewport at the mobile breakpoint, convenient that you can just toggle it off

@aduth
Copy link
Member

aduth commented May 2, 2017

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.is-sidebar-opened .editor-sidebar {
/* Sidebar covers screen on mobile */
width: 100%;
Copy link
Member

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:

https://github.com/WordPress/gutenberg/blob/44c915b/editor/modes/text-editor/style.scss#L40-L42

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.
@jasmussen
Copy link
Contributor Author

Rebased, and did a few changes based on your great feedback:

  • Reduced to a single sidebar width, 280px, which incidentally is the same size as currently in the editor. Might as well start simple and add complexity later
  • Moved the CSS for responsive sidebar all into the sidebar component, which makes sense to me.
  • Made sure the text editor mode worked well with the sidebar.

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?

@mtias mtias added General Interface Parts of the UI which don't fall neatly under other labels. Design labels May 3, 2017
Copy link
Contributor

@youknowriad youknowriad left a 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 & {
Copy link
Contributor

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?

@jasmussen jasmussen merged commit 7912ff9 into master May 4, 2017
@jasmussen jasmussen deleted the add/responsive branch May 4, 2017 08:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
General Interface Parts of the UI which don't fall neatly under other labels. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants