toc: rework UX

[McShelby]

The current TOC implementation isn't usable on touch devices as it's only working on MouseOver.

Reference: matcornic/hugo-theme-learn#67

The new TOC implementation should:

• be usable on touch as on pointer devices
• be accessible even if the page is scrolled down
• take the least space possible
• may have configurable behaviour (to resemble the old UX)

This was discussion started in #151 and is now keept track in its own issue.

Consider PR in matcornic/hugo-theme-learn#101.

[Nuc1eoN]

Continuing from #151

(like: what happens if the TOC is longer than screen height)

Check out the test page https://process-sdk-draft.doc.moovapps.com/rest/. It is not a problem when the toc exceeds screen height. Make the browser window smaller until it covers the toc. Now the toc is scrollable.

[McShelby]

Neither FF nor Chrome shows any scrollbar for the TOC - or do I miss a thing here?

[Nuc1eoN]

Weird.. for me it shows up when I start to scroll the TOC with my mouse wheel!

Both Chrome and Firefox

[McShelby]

That's maybe the point here: I don't use a mouse but a trackpad. Therefore: no wheels attached ;-)
Scrolling should definetly work on any device.

[Nuc1eoN]

I just tried on my laptop which has a trackpad and I have no problems scrolling the TOC frankly. It behaves just the same as when using the mouse wheel.

EDIT: Does your trackpad not have a scroll functionality??

[McShelby]

You forced me to RTFM ;-) So at least, I learned how to scroll with my touchpad, today.

Yes, it scrolls but while scrolling there doesn't appear a small scroll bar as in your image.

Really wild issue

[Nuc1eoN]

You forced me to RTFM ;-) So at least, I learned how to scroll with my touchpad, today.

Hah! You have utterly amazed me by that comment! :D

Yes, it scrolls but while scrolling there doesn't appear a small scroll bar as in your image.

Huh?! Weird. I actually noticed that it even appears on hover, so even if for some reason a user would not have scroll, he could still drag it. EDIT: Not quite true, it needs an "initial" scroll event for some reason... after that it can be hovered.
But that it doesn't show on your side!? I don't know what's happening there :)

UPDATE:
I think I got it! You need to be at the very top of the page for this to happen. If the main page is scrolled down even a little bit, then it doesn't work. Don't askl me why! But maybe there's some potential here.

[McShelby]

I've borrowed my wife's mouse. A bit better but still no good after scrolling.

[Nuc1eoN]

Somehow your page looks a lot worse than mine... Compare the breadcrumbs.

This is because on your side, the top-bar gets squeezed. On my side the top-bar has still the full width.

Not sure whats going on 👀

UPDATE: Ok I could mimic your behavior of the tob-bar. If you resize the window back and forth you will get different results.

HOWEVER my scroll bar was still appearing....!!

UDPATE2: I got it! Yes I can mimic your behaviour. That happens because the scroll bar goes out of view.
You can try dragging the scrollbar instead, then you will see what I mean.

UPDATE3: Yeah resizing is buggy in browsers apparently... The way to "resolve" this is to refresh the page (F5). Then we are getting vanilla results.

[McShelby]

The main usability concerns were addressed in #268.

This is not the big rework of this issue but at the moment I have no plans for more drastic changes.