Sidepane missing scrollbar

[lenhart]

Hi again,
(I hope I am not becoming unpopular here by opening issues - if you want feedback in any other way or not at all, please just say so :-))

The right scroll pane is not scrollable, resulting in chapters lower down not being selectable on small screens.
https://gnss-sdr.org/docs/sp-blocks/signal-source/#implementation-osmosdr_signal_source

System: Ubuntu 20.04, Firefox 85.0, Monitor Resolution: 1366x768

(also some field names in the side pane are not broken to new lines and stick out..)

Cheers!

[carlesfernandez]

Hi @lenhart

That's a tricky issue. If the Table Of Contents on the right is set to be sticky but it is too long, it gets cut on small screens. You need to scroll down to the bottom of the page for accessing the last sections, which makes little sense. This is the case you are showing in your screenshot.

On the contrary, if the ToC is not sticky but set to scroll along with the text, then you lose it as soon as you start scrolling down and it becomes useless for intra-page navigation. In long pages, I find it useful to know if you need to scroll up or down to reach a given section.

Unfortunately, adding a scrollbar to the ToC without breaking things appears to be challenging. I'm not very skilled in any of the programming languages involved, but it seems that it could be done with some CSS. I need to look more into it.

Maybe the non-sticky ToC would be a better choice, since I guess the usual behavior is to go straight to the documentation of the implementation you are interested in, instead of wandering up and down the page. The ToC is, by large, the "less responsive" feature of the website, and I find it difficult to make it behave well on screens of all sizes.

Any suggestion?

BTW, all your feedback is very welcome!

[lenhart]

Hi @carlesfernandez,
I fully agree, that is usually nothing you want to spend your time on, especially if it is not a trivial fix.
I also agree upon the relative movement. It is nice to have the ToC in view while reading, thinkable mixed-styles are usually annoying too (relative movement until reaching end of ToC, then sticky again, vice versa when scrolling up).

So, no unfortunately no good suggestions and I would say this is a low priority issue. Don't know if it is realistic to wait for it to be solved in upstream mmistakes. I dropped a comment there if the commenter who said it is trivial could share a code snippet.. Maybe something comes out of it :-)
(not too experienced in any of the web languages either)

[iBug]

CC @lenhart

On my website it really is just 5 lines or so of CSS to get a working prototype, but it's not thoroughly tested and from time to time I have added patches to make it look elegant on different devices, screens, browsers etc.

The top few lines in my toc.scss is what you need to get started (and it works per se).

https://github.com/iBug/iBug-source/blob/ca14b16997b9be975dd1719b9871f466421034f2/_sass/toc.scss#L1-L5

You can see a preview of the scrollable sticky ToC on this article (Wayback Machine) of my blog. Zoom in a bit if you're on a larger screen as the scroll effect isn't enabled until the ToC is too long to fit in one screen.

Have my word here. I'd be glad to share the above code* under CC BY 4.0 license (the whole repo is CC BY-SA 4.0 unless otherwise noted) if I get my credit in Git commit message (e.g. Co-authored-by: iBug <git@ibugone.com>, see GitHub Docs) 😃

^{* the whole file toc.scss at the specific revision ca14b16, as linked}

[carlesfernandez]

Dear @iBug

thank you so much for spending time on this, and for your kind contribution. Your solution works well and looks nice in all browsers I've tried (Chrome, Safari, Opera, Firefox). Please let me know if your work is properly credited in commit 91e2cf2

BTW, iBug-source is a very interesting web!

Dear @lenhart
could you please revisit the page and check if this issue is solved for you? Apart from the scrollbar, long implementation names should now break and not overflow.

https://gnss-sdr.org/docs/sp-blocks/signal-source/

Thank you guys for your help!

[iBug]

@carlesfernandez Yes the crediting is OK. Glad to know that you like my code and website 😃

BTW, I only test web stuff in Chrome and Firefox which I suppose cover the majority of (my) target users. Good job for also checking Opera and Safari.

Plus I don't think Firefox supports -webkit- prefix stuff (should be -moz-) so I'm a bit confused with this:

geniuss-place/_sass/minimal-mistakes/_sidebar.scss

Line 374 in 91e2cf2

// WARNING: This is not working in Chrome or Opera, but it does in Firefox and Safari

[carlesfernandez]

Ups! My mistake. Fixed in order to avoid confusion.

[iBug]

I left another comment here. Would you mind taking a look?

[lenhart]

Hey guys!
Looks all good and works! The only thing that I noticed, is that I can only scroll the entire content of the sidepane when it is fully in view (scrolled down enough so that the gnss-sdr header pane is no longer in view). Otherwise it stops like that:

But I think that is completely tolerable! Thank you both of you for the good work :-)

[carlesfernandez]

Hi @iBug,

thanks for your comment, it has been fixed.

I'm closing this issue since it seems fixed. Still with some tolerable annoyance, though.