Meta Issue:#1870944: [Meta] Mobile friendly admin pages

Problem/Motivation

Alignment of Add to shortcuts image for pages with long title in NARROW Screens

Admin URL eg:

admin/config/content/formats/filtered_html/disable
admin/config/regional

Proposed resolution

To be determined.

Remaining tasks

To be determined.

Files: 
CommentFileSizeAuthor
#16 after-applying-patch-short-title.png16.1 KBManjit.Singh
#16 after-applying-patch-long-title.png13.52 KBManjit.Singh
#16 before-applying-patch-short-title.png16.41 KBManjit.Singh
#16 before-applying-patch-long-title.png13.99 KBManjit.Singh
#15 Screen Shot 2013-09-11 at 01.06.21.png34.42 KBsaki007ster
#15 Screen Shot 2013-09-11 at 00.54.08.png54.88 KBsaki007ster
#15 Screen Shot 2013-09-11 at 00.53.37.png54.77 KBsaki007ster
#15 Screen Shot 2013-09-11 at 00.52.37.png29.82 KBsaki007ster
#15 Screen Shot 2013-09-11 at 00.52.18.png34.5 KBsaki007ster
#15 Screen Shot 2013-09-11 at 01.06.05.png29.05 KBsaki007ster
#14 1876208-14.patch3.06 KBrteijeiro
PASSED: [[SimpleTest]]: [MySQL] 60,328 pass(es).
[ View ]
#12 1876208-shortcut-mobile-12.patch2.01 KBLewisNyman
FAILED: [[SimpleTest]]: [MySQL] 53,495 pass(es), 7 fail(s), and 3 exception(s).
[ View ]
#12 Screen Shot 2013-03-27 at 19.03.17.png73.05 KBLewisNyman
#12 Screen Shot 2013-03-27 at 19.03.23.png81.85 KBLewisNyman
#8 1876208-shortcut-mobile-8.patch297 bytesLewisNyman
PASSED: [[SimpleTest]]: [MySQL] 53,239 pass(es).
[ View ]
#8 Screen Shot 2013-03-21 at 19.07.53.png34.11 KBLewisNyman
#5 Schermafbeelding 2013-03-09 om 13.53.39.png27.43 KBOostie
#4 no-overlay-desktop.png20.07 KBhansrossel
#4 no-overlay-mobile.png24.17 KBhansrossel
#4 overlay-desktop.png20.39 KBhansrossel
#4 overlay-mobile.png17.06 KBhansrossel
#3 1876208-shortcut-mobile2.patch4.14 KBhansrossel
PASSED: [[SimpleTest]]: [MySQL] 49,861 pass(es).
[ View ]
#2 1876208-shortcut-mobile.patch4.14 KBhansrossel
PASSED: [[SimpleTest]]: [MySQL] 49,908 pass(es).
[ View ]
Confirmation message pages.png439.23 KBShyamala

Comments

Issue tags:+mobile-novice, +css-novice

Issue tags:-mobile-novice, -css-novice
StatusFileSize
new4.14 KB
PASSED: [[SimpleTest]]: [MySQL] 49,908 pass(es).
[ View ]

Fixed the non overlay and overlay version of the shortcuts and some general padding for the header title and cleanup.

Links to test
with overlay: #overlay=admin/config/content/formats/full_html/disable
without overlay: /admin/config/content/formats/full_html/disable

StatusFileSize
new4.14 KB
PASSED: [[SimpleTest]]: [MySQL] 49,861 pass(es).
[ View ]

second try

Status:Active» Needs review
StatusFileSize
new17.06 KB
new20.39 KB
new24.17 KB
new20.07 KB

Some screenshots after

StatusFileSize
new27.43 KB

Works great when you want to add a shortcut but not when you want to delete one (with overlay).

Status:Needs review» Needs work

Issue tags:+Novice, +css-novice

adding back novice tags

StatusFileSize
new34.11 KB
new297 bytes
PASSED: [[SimpleTest]]: [MySQL] 53,239 pass(es).
[ View ]

Hey guys, I was just playing around in Firebug and I found what I hope is a simpler solution to the issue:

Screen Shot 2013-03-21 at 19.07.53.png

Status:Needs work» Needs review

Status:Needs review» Needs work

When I looked at this in chrome on OSX the shortcut link was jumpin all over the place:

http://screencast.com/t/k2jftPI3QU

Ah, it appears I complete forgot about the hover effect.... we should be removing this effect on touch devices for a start, maybe we can combine two solutions to cover touch and non-touch.

I am concerned about the amount of 'mobile' testing going on without actually looking at any mobile devices... we do have a 10 user subscription to Browser Stack somewhere...

Status:Needs work» Needs review
StatusFileSize
new81.85 KB
new73.05 KB
new2.01 KB
FAILED: [[SimpleTest]]: [MySQL] 53,495 pass(es), 7 fail(s), and 3 exception(s).
[ View ]

Ok, so what I've done here is kept the behaviour of the patch in #8 for touch devices but removed the hover effect.

For non-touch devices on a narrow viewport I've taken the approach of #3.

This is my justification:

  • For touch devices, moving the link to the left hand side is a significant decrease in usability, it is far out of the reach of the thumb.
  • The hover effect slows down user interactions on a touch device and so it should be removed. We do not have a decent replacement for hover actions in core and I doubt this will happen in D8
  • For non touch users, the left hand placement of the link does not decrease usability in the slightest, however we do want the benefit of the hover effect

I've attached screenshots of narrow viewports on touch and non-touch devices.

touch.pngScreen Shot 2013-03-27 at 19.03.23.png

Status:Needs review» Needs work

The last submitted patch, 1876208-shortcut-mobile-12.patch, failed testing.

Status:Needs work» Needs review
StatusFileSize
new3.06 KB
PASSED: [[SimpleTest]]: [MySQL] 60,328 pass(es).
[ View ]

Tried to re-roll the patch but not sure if everything is there.

I reviewed this patch , it seems to be working fine. I am attaching screenshots for the reference.

Issue summary:View changes

Added admin/config/regional

I have used the tool Ripple (Chrome extension). Please find the attached screenshots which are showing before and after applying the patch.

Status:Needs review» Reviewed & tested by the community

Changed to RTBC

14: 1876208-14.patch queued for re-testing.

Assigned:Unassigned» LewisNyman
Status:Reviewed & tested by the community» Needs review

Hm. I guess I'm having a hard time figuring out why this is preferable.
Without the patch, on a touch device (iOS simulator), when I click on the + sign I get an expanded "Add to default shortcuts" so I can tell what that button does.
With the patch, this doesn't happen.
The OP as well as the issue title seems to imply this is just an alignment fix, which makes sense to me. I'm not sure why we are also including a behaviour change.

I'm wondering though if we want to postpone this on #2022695: Content header style update? That seems like it would render this CSS moot.

Assigned:LewisNyman» Unassigned
Status:Needs review» Postponed

Yes that's a good idea.