Improve touch controls of frontend about nav dropdown

[NateWr]

When on a touch device, a tap on a top-level navigation menu in the default theme will go to that link instead of opening the dropdown menu. Older devices used to automatically detect such taps, but I think they've started removing that support. In any case, on my Android it's not working.

Because the About menu item is repeated in sub-items, we can just remove the URL from the top-level item. But it would be good to solve this problem generically by checking for touch events and handling them differently regardless of the navigation items which happen to be present in a given setup.

[ajnyga]

Hi,

I am not sure if this is connected, but during a OJS3 workshop one of the participants was using an Ipad. It worked well, but the user was not able to log out from the dashboard. For some reason you had to select the user profile page first and only then you could click on "log out" successfully.

[NateWr]

Thanks @ajnyga. Yes, probably the same sort of problem.

[NateWr]

PRs (tests running):
pkp/ojs#1206
pkp/omp#383
(no pkp-lib PR)

[NateWr]

@bozana, mind doing a code review and merging?

Anyone willing to test this out on their mobile phone will be useful too. I imagine we'll find some devices here and there that still have trouble, but this should cover the majority of cases.

[bozana]

@NateWr, this looks good to me. I couldn't test it because I have no server where I could install and then test it, but... I will ask James... Everything merged... THANKS!

[bozana]

@NateWr, thanks to @jmacgreg, I could test it now and it works great :-)))

[NateWr]

Touch controls don't work if the tap lands on the dropdown caret beside the main navigation menu item. It appears that touchstart events on the :after psuedo-element aren't bubbling up to the link.

Reproduced on Android Chrome.

[ajnyga]

Hi @NateWr
I was actually meaning to add here, that loggin out from the dashboard with iPad was problematic. In a OJS3 workshop one iPad user could only log out by first clicking profile link and then log out. Earlier I thought that this was solved already last year, but apparently not. OJS 3.0.2.

[NateWr]

Can you file a separate issue? The JS is a bit different for the frontend and backend nav menus. I'll tick them both off at once but good to have a separate ticket filed.

[ajnyga]

Sure @NateWr , I will just check this firs with my own iPad when I get home

[NateWr]

PRs:
pkp/ojs#1419
pkp/omp#414

@ajnyga would you be able to test these changes on the frontend before they're committed. I believe the issue was related to automated tap target adjustments done by some devices: if a tap is near but not quite on a link, some devices will fire a click event on the link anyway. So to test this on any phone, just try to tap close to but not quite on the About dropdown to see if it picks it up.

[NateWr]

Is anyone set up to do testing in OJS on their phone? Could they test the PRs above (^^) and let me know if you can uncover any tap issues with the dropdown menus in the default theme?

[ajnyga]

Seems that I've been on my way home since April. I added this to my todo list, next week, I promise!

[NateWr]

np! dropped off my radar too. :)

[ajnyga]

and did not keep that promise. I need a test server online to check these with my ipad, but I now have that in the works. soon soon.

[NateWr]

@ajnyga just a reminder, if you get a chance to test this improvement to the frontend nav menus with an iOS device (iPad or iPhone) that'd be great. Thanks!

[ajnyga]

Android 7.0.0 + Chrome 59 = working very well. One tap on the About link or anywhere near it (including the triangle) will open the pull down menu. As second click will open the linked page (about).

I will test this with an iPad later today.

[ajnyga]

iPad Air 2 + Safari = working as expected, almost

However, another issue. After opening the pull down menu, the only way to close it again is to click one of the links. It will not close if I click outside the menu like it does with Android. Also, a second click to the About link does not open the linked page.

Also, if I click open the submenu and right away click one of the links there as well, the selected page will open. However, if I open the submenu and first click on About link again, the pull down menu links do not work anymore, instead clicking those will now close the pull down menu, but the selected page does not open.

Safari is the new IE6 :-D

[NateWr]

😠

Thanks for testing. I wasn't able to reproduce the issue where clicking on the top-level link does nothing. But I can reproduce the issue where clicking outside the dropdown, then clicking one of the dropdown links doesn't do anything.

I've looked for a standalone, bulletproof dropdown lib but haven't found anything that looks like it's been widely tested. I may see if I can extract Bootstrap's dropdown component to see if that fixes the issue.

[NateWr]

@ajnyga Can you test these new PRs for me? They integrate the Bootstrap dropdown component. In my iPad testing, the issue with a pull-down menu staying open on a second click is still there. But otherwise it's working for me with hover and tap on Android/Chrome and iOS/Safari.

If it works, I'll get it going for OMP as well.

PRs:
#2757
pkp/ojs#1515
pkp/omp#436

[ajnyga]

Working well with Android 7 + Chrome 59. One issue: the About link does not open a page, just the pull down menu.

I will test iPad later today.

[ajnyga]

Ipad 2 + Safari: one issue: pull down menu does not close if you tap outside the menu. However, if you open the menu, tap the About link again (nothing happens) and the tap outside the menu, the menu closes.

edit: also, the link in the About item does not work at all, like with Android.

[NateWr]

Android 7 + Chrome 59. One issue: the About link does not open a page, just the pull down menu.

Yeah, this is a pre-requisite to the tap functionality working. I haven't seen any tap-friendly dropdown that doesn't do this.

Ipad 2 + Safari: one issue: pull down menu does not close if you tap outside the menu. However, if you open the menu, tap the About link again (nothing happens) and the tap outside the menu, the menu closes.

As long as it's relatively easy to get to the link you want in Safari, I'm going to call it "good enough". I think I know what's causing that to happen, but the only solutions I can think of would break hover support for non-touch devices, or risk tampering with event handling in a way that would introduce the problems we were having before.

[NateWr]

Great, I've added a PR for OMP now. @bozana would you code review this one as well?

[ajnyga]

There is no point in wasting more time on this, because it might well be that future Safari releases do not have similar problems. Or, they have new problems.

[bozana]

@NateWr -- I am not sure I understood everything... :-\ but I think everything is good and I merged it... :-) Can the issue be closed?

[NateWr]

👍 thanks!