Skip to content

Movers: Add bigger mobile touch targets. #23761

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
Merged
youknowriad merged 3 commits into from
Aug 10, 2020
Merged

Movers: Add bigger mobile touch targets. #23761

youknowriad merged 3 commits into from
Aug 10, 2020

Conversation

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Jul 7, 2020

This increases the size of the mover control touch targets to 48x48.

This addresses feedback from #21935 (comment).

Before:

mover-mobile-before

After:

mover-mobile-after

@jasmussen jasmussen added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Mobile Web Viewport sizes for mobile and tablet devices labels Jul 7, 2020
@jasmussen jasmussen self-assigned this Jul 7, 2020
@jasmussen jasmussen mentioned this pull request Jul 7, 2020
Closed
@github-actions
Copy link

github-actions bot commented Jul 7, 2020 •
edited
Loading

Size Change: +60 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-editor/style-rtl.css 10.6 kB +26 B (0%)
build/block-editor/style.css 10.6 kB +30 B (0%)
build/components/style-rtl.css 15.7 kB +2 B (0%)
build/components/style.css 15.7 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.97 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 125 kB 0 B
build/block-library/editor-rtl.css 7.59 kB 0 B
build/block-library/editor.css 7.59 kB 0 B
build/block-library/index.js 132 kB 0 B
build/block-library/style-rtl.css 7.76 kB 0 B
build/block-library/style.css 7.77 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 200 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.62 kB 0 B
build/edit-post/style.css 5.61 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 9.38 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.2 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@ZebulanStanphill
Copy link
Member

ZebulanStanphill commented Jul 7, 2020 •
edited
Loading

I would think the mover buttons should have the same spacing between them as the inline formatting controls (and other controls in the same "toolbar group" as each other).

@jasmussen
Copy link
Contributor Author

jasmussen commented Jul 8, 2020 •
edited
Loading

Good point. Fixed:

Screenshot 2020-07-08 at 11 47 53

Screenshot 2020-07-08 at 11 53 38

@jasmussen jasmussen force-pushed the update/mover-mobile-touch-targets branch from feff323 to 0627e1e Compare July 8, 2020 09:54
@ZebulanStanphill
Copy link
Member

ZebulanStanphill commented Jul 15, 2020

The focus rectangles aren't quite what they should be:
image

Other than that, this looks good.

@ZebulanStanphill ZebulanStanphill mentioned this pull request Jul 15, 2020
Merged
6 tasks
@jasmussen jasmussen force-pushed the update/mover-mobile-touch-targets branch 2 times, most recently from c1421a8 to 45ebe4b Compare August 3, 2020 10:22
@jasmussen
Copy link
Contributor Author

jasmussen commented Aug 3, 2020

Alright, I fixed the focus issue, I believe:

Screenshot 2020-08-03 at 13 41 23

@diegohaz I noticed some importants you added here. I wrapped the code bit in a media query, and things should be fine, but if you could sanity check 10868dc I'd appreciate it.

@jasmussen jasmussen force-pushed the update/mover-mobile-touch-targets branch from 10868dc to 9d22c40 Compare August 7, 2020 14:30
@jasmussen
Copy link
Contributor Author

jasmussen commented Aug 7, 2020

This has been refreshed.

@jasmussen jasmussen force-pushed the update/mover-mobile-touch-targets branch from bfc3d35 to 063e48c Compare August 10, 2020 06:30
@youknowriad
Copy link
Contributor

youknowriad commented Aug 10, 2020

Can we get this rebased?

@jasmussen
Copy link
Contributor Author

jasmussen commented Aug 10, 2020

On it.

Joen A and others added 3 commits August 10, 2020 10:09
@jasmussen
Movers: Add bigger mobile touch targets.
d24892d 
This increases the size of the mover control touch targets to 48x48.
@jasmussen
Address focus size issue.
cd3b47e
@jasmussen
Fix rebase issue.
c5d644d
@jasmussen jasmussen force-pushed the update/mover-mobile-touch-targets branch from 063e48c to c5d644d Compare August 10, 2020 08:11
@jasmussen
Copy link
Contributor Author

jasmussen commented Aug 10, 2020

Should work now 👍

@youknowriad youknowriad merged commit cfc8e2f into master Aug 10, 2020
@youknowriad youknowriad deleted the update/mover-mobile-touch-targets branch August 10, 2020 08:54
@github-actions github-actions bot added this to the Gutenberg 8.8 milestone Aug 10, 2020
@youknowriad youknowriad added the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Aug 10, 2020
youknowriad pushed a commit that referenced this pull request Aug 10, 2020
@jasmussen @youknowriad
Movers: Add bigger mobile touch targets. (#23761)
c4c14f0
@youknowriad youknowriad removed the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Aug 10, 2020
@whyisjake whyisjake mentioned this pull request Aug 10, 2020
Merged
@ItsJonQ ItsJonQ mentioned this pull request Aug 17, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@youknowriad youknowriad youknowriad approved these changes

@ellatrix ellatrix Awaiting requested review from ellatrix

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@chrisvanpatten chrisvanpatten Awaiting requested review from chrisvanpatten

Assignees

@jasmussen jasmussen

Labels

[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Mobile Web Viewport sizes for mobile and tablet devices

Projects

None yet

Milestone

Gutenberg 8.8

Development

Successfully merging this pull request may close these issues.

4 participants

@jasmussen @ZebulanStanphill @youknowriad