search

McShelby / hugo-theme-relearn

A theme for Hugo designed for documentation
https://mcshelby.github.io/hugo-theme-relearn/
MIT License
385 stars 179 forks source link

toc: rework UX #167

Closed McShelby closed 2 years ago

McShelby commented 2 years ago

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:

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

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

Nuc1eoN commented 2 years ago

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 commented 2 years ago

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

grafik

Nuc1eoN commented 2 years ago

Weird.. for me it shows up when I start to scroll the TOC with my mouse wheel! image Both Chrome and Firefox

McShelby commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

firefox_YckMvhVn6n

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

Nuc1eoN commented 2 years ago

image 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 :eyes:

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 commented 2 years ago

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.