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

LewisNyman’s picture

Issue tags:+mobile-novice, +css-novice
hansrossel’s picture

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

hansrossel’s picture

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

second try

hansrossel’s picture

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

Some screenshots after

Oostie’s picture

StatusFileSize
new27.43 KB

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

Oostie’s picture

Status:Needs review» Needs work
Shyamala’s picture

Issue tags:+Novice, +css-novice

adding back novice tags

LewisNyman’s picture

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

LewisNyman’s picture

Status:Needs work» Needs review
bleen18’s picture

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

LewisNyman’s picture

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...

LewisNyman’s picture

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.

rteijeiro’s picture

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.

saki007ster’s picture

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

saki007ster’s picture

Issue summary:View changes

Added admin/config/regional

Manjit.Singh’s picture

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

Manjit.Singh’s picture

Status:Needs review» Reviewed & tested by the community

Changed to RTBC

Xano’s picture

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

webchick’s picture

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.

LewisNyman’s picture

Assigned:LewisNyman» Unassigned
Status:Needs review» Postponed

Yes that's a good idea.

mgifford’s picture

So that leads to #1953374: Implement Seven style guide for core overlay which is won't fix... Should this be marked as Won't fix then or is there another way around this?

LewisNyman’s picture

Status:Postponed» Active
Issue tags:-Novice, -css-novice+frontend, +CSS

I think this is still a problem

Manjit.Singh’s picture

Status:Active» Needs work
LewisNyman’s picture

Component:CSS» Seven theme

This problem is Seven theme specific

yoroy’s picture

Not sure what needs to be done here. Asking because it's the last open issue in the major issue #1870944: [Meta] Mobile friendly admin pages