Touch

Many form elements are too small for be usable on touch screens.

Small

Layout of form elements cause problems on small screens.

CommentFileSizeAuthor
#8 forms2.png (522×1113).png124.52 KBmoshe weitzman
#5 1751150_forms-on-touch-screens_5.patch2.23 KBjessebeach
#4 forms.patch1.58 KBmoshe weitzman
#3 forms2.png98.52 KBmoshe weitzman
#1 drupal-small_touch_forms-1751150-1.patch1.66 KBlewisnyman

Comments

lewisnyman’s picture

lewisnyman
he/him
commented
StatusFileSize
new drupal-small_touch_forms-1751150-1.patch1.66 KB

Here's a first go at a patch. I've only added one media query at 600px for now but we can split this up into what makes sense.

lewisnyman’s picture

lewisnyman
he/him
commented
Issue tags: +mobile, +d8mux

Tagging

moshe weitzman’s picture

moshe weitzman commented
Status: Active » Reviewed & tested by the community
StatusFileSize
new forms2.png98.52 KB

Patch needed a reroll. I also attach a screenshot of a narrow view.

Lewis' small patch just adds a media query to show buttons bigger and to expand the textfields to full width when on a narrow viewport. Looks good to me so RTBC.

moshe weitzman’s picture

moshe weitzman commented
StatusFileSize
new forms.patch1.58 KB

Oops - here is the patch

jessebeach’s picture

jessebeach commented
Status: Reviewed & tested by the community » Needs review
StatusFileSize
new 1751150_forms-on-touch-screens_5.patch2.23 KB

I refactored to match coding standards i.e. one selector per line and properties in alphabetical order.

moshe weitzman’s picture

moshe weitzman commented
Status: Needs review » Reviewed & tested by the community

Thanks Jesse.

dries’s picture

dries commented

Can we do before and after screenshots? Would be helpful for reviewers.

moshe weitzman’s picture

moshe weitzman commented
StatusFileSize
new forms2.png (522×1113).png124.52 KB

The after is in #3. here is a before. The main difference is wider buttons and wider form elements on narrow devices.

moshe weitzman’s picture

moshe weitzman commented
Status: Reviewed & tested by the community » Needs work

Er, the screenshots look the same. This is not ready.

Bojhan’s picture

Bojhan commented

I looked at this on my android, and consider it RTBC. I'd love before/after screens too, but applying patches for mobile is an incredible hassle.

Bojhan’s picture

Bojhan commented
Category: task » feature
Priority: Normal » Major
Status: Needs work » Reviewed & tested by the community

This is really a biggy, without it most forms create a bug where it stretches the width of the theme - making it hard to use.

If you use your mobile phone you will quickly find this to be true.

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented
Category: feature » task
Status: Reviewed & tested by the community » Fixed

Tested on http://spark.webchick.net/8.x/, looks good there.

Before:
Screen doesn't quite make it all the way over, fields are way too wide.
Button sizes are tiny, easy to hit Preview instead of Save.

After:
Everything fits nicely without any weird whitespace.
Button sizes take up entire width of screen.

Committed and pushed to 8.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

lewisnyman’s picture

lewisnyman
he/him
commented

Cross posting:
#1751150: Improve usability of forms on touch screen and small screen devices

Maybe worth discussing if we should keep this styling per theme?