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

Mobile: Show mover in block-toolbar on mobile #705

Closed
jasmussen opened this issue May 8, 2017 · 3 comments
Closed

Mobile: Show mover in block-toolbar on mobile #705

jasmussen opened this issue May 8, 2017 · 3 comments
Labels
General Interface Parts of the UI which don't fall neatly under other labels. Mobile Web Viewport sizes for mobile and tablet devices
Milestone

Comments

@jasmussen
Copy link
Contributor

jasmussen commented May 8, 2017

We need to surface the controls for up, down, trash and advanced on mobile. Let's also surface them on wide images.

Here's how it looks on desktop now:

block ui desktop

On "wide" images we move the controls above the image. Let's do the same for the mover:

block ui wide

On mobile, let's try a new interface. Let's have an ellipsis on the right of the selected block:

block ui mobile collapsed

When you click this ellipsis, a new toolbar expands and replaces the old one:

block ui mobile expanded

We can do this with simple responsive CSS. That is, we always have the mover, trash and cog present in the above-the-block toolbar, and simply hide these on desktop breakpoints, show them on mobile. I've checked the accessibility implications with @afercia, and so long as the controls are display: none; when they aren't used, they aren't announced by screenreaders or show up in the tab stack. On mobile, there is no tabbing, so the requirements here are different.

Older mockup can be seen here.

@jasmussen jasmussen added the General Interface Parts of the UI which don't fall neatly under other labels. label May 8, 2017
@jasmussen jasmussen changed the title Show mover in block-toolbar on mobile Mobile: Show mover in block-toolbar on mobile May 22, 2017
@jasmussen jasmussen added the Mobile Web Viewport sizes for mobile and tablet devices label May 22, 2017
@jasmussen jasmussen added this to the Beta milestone Jun 17, 2017
@jasmussen
Copy link
Contributor Author

We should prioritize this one.

In case there isn't room for up/down arrows in the toolbar, we might want to address this one in conjunction with #706.

@jasmussen jasmussen modified the milestones: Beta, Beta 2 Jun 21, 2017
@mtias mtias removed this from the Beta 2 milestone Jun 22, 2017
jasmussen added a commit that referenced this issue Jun 27, 2017
Hide movers and config toolbars on the side.

These will be resurfaced as part of a separate effort in #705.
@jasmussen
Copy link
Contributor Author

I updated the screenshots in this ticket with a new proposal, that should be easier to implement yet accomplish the same.

@afercia
Copy link
Contributor

afercia commented Jul 3, 2017

I'd just recommend a meaningful aria-label for the ellipsis button and an aria-expanded attribute to give users some feedback when they press the ellipsis button.

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. Mobile Web Viewport sizes for mobile and tablet devices
Projects
None yet
Development

No branches or pull requests

3 participants