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
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
FileSize
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
CreditAttribution: LewisNyman commented
Issue tags: +mobile, +d8mux

Tagging

moshe weitzman’s picture

moshe weitzman CreditAttribution: moshe weitzman commented
Status: Active » Reviewed & tested by the community
FileSize
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 CreditAttribution: moshe weitzman commented
FileSize
forms.patch1.58 KB

Oops - here is the patch

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented
Status: Reviewed & tested by the community » Needs review
FileSize
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 CreditAttribution: moshe weitzman commented
Status: Needs review » Reviewed & tested by the community

Thanks Jesse.

Dries’s picture

Dries CreditAttribution: Dries commented

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

moshe weitzman’s picture

moshe weitzman CreditAttribution: moshe weitzman commented
FileSize
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 CreditAttribution: 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 CreditAttribution: 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 CreditAttribution: 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 🇨🇦
CreditAttribution: webchick 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
CreditAttribution: LewisNyman 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?