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.

Sign up for GitHub

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

Jump to bottom

Use overflow menu for when there isn't space in quick toolbar #2287

Closed
jasmussen opened this issue Aug 8, 2017 · 0 comments · Fixed by #2443
Closed

Use overflow menu for when there isn't space in quick toolbar #2287

jasmussen opened this issue Aug 8, 2017 · 0 comments · Fixed by #2443
Labels
Mobile Web Viewport sizes for mobile and tablet devices

Comments

@jasmussen
Copy link
Contributor

Extracting from #2246 (comment):

We need to a better mobile strategy for the quick toolbar. The quote block already is hard to fit on mobile screens. One idea includes collapsing the alignments into a dropdown. Another is adding an ellipsis at the end of the quick toolbar showing any items that don't fit in the menu altogether.

Here's a mockup, where the buttons "pop off" as the toolbar runs out of space:

29019451-d46ae6f8-7b5e-11e7-962c-800df20697a7

Probably difficult to build this, as it can't rely on breakpoints but has to rely on JS to calculate available space and then move items to the overflow menu.

Addressing this PR would have to rethink slightly how the toolbar already now works on mobile, where an ellipsis menu shows the movers, and the cog/trash buttons. We'd have to unify all of those in the ellipsis menu.
@jasmussen jasmussen added the Mobile Web Viewport sizes for mobile and tablet devices label Aug 8, 2017
jasmussen added a commit that referenced this issue Aug 17, 2017
@jasmussen
Try sliding toolbar for overflow on mobile
1c8d2ec 
This PR may fix #2287, at least partially, or in a transitional way. It's a two-line code change, and all it does is ensure that on mobile, overflow can be scrolled.

This is not a good solution for desktop, of course, where the scrollbar when visible (as it is on nearly all computers) would not only cover content and be ugly, but scrolling horizontally is generally not a good experience. However on mobile, the scrollbar fades in briefly when you load the page, and you can just drag with your finger.

Let's discuss whether this is a good solution.
@jasmussen jasmussen mentioned this issue Aug 17, 2017
Merged
@jasmussen jasmussen mentioned this issue Oct 6, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Mobile Web Viewport sizes for mobile and tablet devices
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Try sliding toolbar for overflow on mobile WordPress/gutenberg
1 participant
@jasmussen