closed livingstoneonline/livingstoneonline#107

Drupal tooltips: Mobile

awisnicki

This page (and others like it) have tooltips that Kathy created:

http://livingstoneonline.org/spectral-imaging/project-history

They work fine on desktop, but on mobile often popup partly off the screen with no way to move them into the screen.

nigelgbanks

Looks to be using the QTip jQuery library, http://qtip2.com/ might be able to sort this with some overrides.

awisnicki

Sounds good. Let me know if there's anything I can do to help. Also, I thought I noted this in another ticket, but now don't see it, but we did email about it. There are also tooltips in the XSLT display and these work fine on desktop but also don't work on mobile. Example page:

http://livingstoneonline.org/islandora/search/%221870%20Field%20Diary%22?f%5B%5D=genre_ms%3A%22spectral+color%22&view_pid=liv%3A000202&view_page=0

So the issue is slightly different, but still related to tooltips.

nigelgbanks

Hmm the tooltips aren't coming up for me on the page, should it be coming up for every bit of underlined text or just specific words?

awisnicki

Only the words with dotted colored underline. See screen shot. They definitely come up for me in Firefox. screen shot 2016-12-09 at 9 24 54

nigelgbanks

There coming up now for me (user error on my part), these are a bit different as they are using the title attribute of the elements so the display is not under our control. We'd have to add the QTip Library above to get more control about how we render these as well.

awisnicki

OK, then let's add these to the list. These would also be high-priority.

nigelgbanks

They should be working in both locations now.

awisnicki

The tooltips on pages created by Kathy work fine on mobile now: http://livingstoneonline.org/about-site/leap-2013-2017-project-history-part-i

However, could you put a touch or left/right padding on these so when they show up they're not completely against the edge of the screen?

The tooltips on the pages rendered by XSLT (multi-viewer and manuscript viewer) are kind of wonky. They don't seem to be working in the multiviewer in my iPhone, while the ones on the manuscript viewer appear but are jamming the page from working, as once one appears I can no longer scroll up and down in the transcription.

nigelgbanks

However, could you put a touch or left/right padding on these so when they show up they're not completely against the edge of the screen?

Unfortunately I can't the library we're using qtip doesn't provide a way to do this consistently as it computes and positions the element, any overrides via CSS just lead to wonky behavior and it's not exposed through the javascript so that we can make modifications to the algorithm easily.

The tooltips on the pages rendered by XSLT (multi-viewer and manuscript viewer) are kind of wonky. They don't seem to be working in the multiviewer in my iPhone, while the ones on the manuscript viewer appear but are jamming the page from working, as once one appears I can no longer scroll up and down in the transcription.

Seems they were appearing but just unbelievably slowly. They also locked the ability to scroll until they displayed. Fixing this took the better part of day. It should now work just as fast on mobile as it does on desktop.

This is now deployed to production.

awisnicki

Tooltips on the multiviewer now work great. However, I also discovered that the date selection dropdown does not work. If you select a date and click on it, nothing happens on the page.

Tooltips on the manuscript viewer also appear to work well. However, when I open a spectral image, selection a transcription, and then try to view it, I'm not able to move in the transcription either up or down, or right to left. See attached screen shot. It's stuck like this. More oddly, when I try to scroll up and down, a small scrollbar appears at right, but it seems to be moving the catalogue page behind the transcription. img_4835

awisnicki

Additional text from #119:

I've run into issue with the image viewer when looking at it on my iPhone. As I explained, sometimes when I open an image and try to move it around it "skips" i.e., kind of disappears off the screen and I return momentarily to the catalogue. Also, when I last use the view to look at images, select both a second page of an item or a transcription, returned an unfunctioning black screen.

Since this seems to be related to the issue I cited above, I'm putting the text here and closing #119.

nigelgbanks

Most of the issues have been fixed and pushed up, one thing remains the iphone tends to zoom after using any of the form elements (such as selecting a page) which makes the experience less enjoyable, but at least everything is functioning.

awisnicki

I reviewed the outstanding problems on this, and it looks like you fixed everything. So thank you very much for that. In terms of the zooming issue you cite, I'm not seeing it, but I also am not sure I know what you're referring to. Can you explain a bit more?

nigelgbanks

When clicking on the search input or any of the other elements the page zooms in a bit and messes with the layout.

nigelgbanks

From my research it seems I can't disable this behaviour on the iphone, but if the font size on these items is 16px it won't zoom in (the feature exists to see small text, and apple prevents disabling it to prevent accessibility issues). This is what it looks like with 16px font:

16px

nigelgbanks

Search the entire site no longer fits in the search bar, but otherwise it looks like safe change.

awisnicki

Yes, looks good to me. Please go ahead and make it. One thing you could do is, at this size make the search bar simply say "Search site" and then it should fit.

nigelgbanks

Ready for review.

awisnicki

It appears that the work here was to put "Search the entire site" in the search bar on mobile when looking at the viewer/spectral viewer. That looks OK.

However, in looking at the spectral viewer now, I see that in transcriptions words that should be underlined and have tooltips are just being rendered plain. Also, there seem to be issues with how the transcription text is displaying as a whole, as chunks of it are actually missing and most of the formatting is missing.

Additionally, on pages like the LEAP history (http://livingstonestage.lib.umd.edu/about-this-site/leap-2013-2017-project-history-part-i), where we have the tooltips that Kathy added, when such pages are viewed on mobile, if one clicks on the tootip then scrolls down past where the tooltips should appear, it persists on the screen.

nigelgbanks

It appears that the work here was to put "Search the entire site" in the search bar on mobile when looking at the viewer/spectral viewer. That looks OK.

Well it was all the changes to support viewing in the iPhone correctly. Note that the text here has changed according to ticket: https://github.com/livingstoneonline/livingstoneonline/issues/102

However, in looking at the spectral viewer now, I see that in transcriptions words that should be underlined and have tooltips are just being rendered plain. Also, there seem to be issues with how the transcription text is displaying as a whole, as chunks of it are actually missing and most of the formatting is missing.

This should be sorted now, looks like I had a single typo in LEAP-XSLT that only affected this particular stylesheet.

https://github.com/livingstoneonline/LEAP-XSLT/commit/d9c4c33dc1bfd21202b7e16127bf6e8c6c4ff10f

Additionally, on pages like the LEAP history (http://livingstonestage.lib.umd.edu/about-this-site/leap-2013-2017-project-history-part-i), where we have the tooltips that Kathy added, when such pages are viewed on mobile, if one clicks on the tootip then scrolls down past where the tooltips should appear, it persists on the screen.

This appears to be the same behaviour as on the production site? Should I assume that you want tooltips to disappear if the user continues to scroll?

awisnicki

OK, so the search text is sorted, so thank you for that.

Spectral transcriptions are also sorted, so thank you x 2.

For tooltips, let's indeed have it that they disappear when the user starts to scroll again. Can we have it work like this on both regular pages and in the manuscript/spectral image viewer.

Finally, in going back above, I see the reason why you increased the Browse and Search text to 16pt font for mobile. However, I'd only like it that size for mobile. On all big sizes, please take it back to what it is on production. 16pt for iPad and Desktop is too big.

nigelgbanks

Ready for review, tooltips should now disappear when the user scrolls. I've changed the font back to 14px for all platforms, and have gotten around the zoom issue on iPhone by disabling the ability to zoom completely.

awisnicki

Tooltips work great both on regular pages and on the viewer. Re: 14px font, excellent, but please note that the search and browse dropdowns are still showing in a larger font, so these need also be changed back.

nigelgbanks

Tooltips work great both on regular pages and on the viewer. Re: 14px font, excellent, but please note that the search and browse dropdowns are still showing in a larger font, so these need also be changed back.

They seem to be 14px which is the same on production?

awisnicki

Sorry, I meant something else. See attached screen shots. screen shot 2017-06-22 at 5 19 15 screen shot 2017-06-22 at 5 19 51

nigelgbanks

Oh ok, it should be sorted now.

awisnicki

Yes, looks good, but also looks like the modal function (same as the critical ed) is set up for these. That function is only needed for the TOC, not for these.

nigelgbanks

I'm not sure I understand, can you please elaborate?

On Thursday, June 22, 2017, awisnicki notifications@github.com wrote:

Yes, looks good, but also looks like the modal function (same as the critical ed) is set up for these. That function is only needed for the TOC, not for these.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/livingstoneonline/livingstoneonline/issues/107#issuecomment-310399676, or mute the thread https://github.com/notifications/unsubscribe-auth/AAdvzdAlH6EmJW1UHmvUP7qZX_DxtPtrks5sGnwTgaJpZM4K1zEf .

-- Nigel Banks nigel.g.banks@gmail.com

awisnicki

Sure. These are both dropdowns. When I open either one, the whole screen goes gray behind them. That's not necessary for these. We only need that function for the critical edition table of contents, not for these minor dropdowns.

nigelgbanks

ah whoops, should be sorted now.