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


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

Admin URL eg:


Proposed resolution

To be determined.

Remaining tasks

To be determined.

#27 Screen Shot 2015-09-25 at 11.24.18.png122.64 KBfrantisekivanko
#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
Members fund testing for the Drupal project. Drupal Association Learn more


LewisNyman’s picture

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

Issue tags: -mobile-novice, -css-novice
4.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

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

second try

hansrossel’s picture

Status: Active » Needs review
17.06 KB
20.39 KB
24.17 KB
20.07 KB

Some screenshots after

Oostie’s picture

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

34.11 KB
297 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
bleen’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:

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
81.85 KB
73.05 KB
2.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.


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

valthebald’s picture

Issue tags: +Barcelona2015

evaluating during Friday sprint

frantisekivanko’s picture

Issue is no more relevant.
See screenshot.

Screenshot drupal beta 15

frantisekivanko’s picture

Status: Needs work » Closed (cannot reproduce)