WordPress/wporg-developer

Chapters list: Make sticky, can potentially scroll independently

Closed this issue · 3 comments

Extracting from this comment, the chapters list, just like the Table of Contents, is a useful anchoring point and context for when you are reading a particular document. To that end, it would be useful to have it be sticky and scroll with you down the page, like so:

280230428-fb4a8568-849c-479b-845e-5442a875e16e

The main challenge in making this happen is to handle the case where the viewport is small, and a very long chapter list (perhaps made longer through multiple nodes being expanded) is too long for the viewport.

Instead of using JS to measure the height and then un-sticking the chapters list, another solution is to allow the chapters list to scroll independently. Potentially this could also be simpler from an implementation perspective; have the chapters list always span the full 100% available height of the viewport, and then apply scrollbars as needed. The comment here has a code snippet that could potentially help accomplish this in a light-weight way.

This is not urgent or a blocker for the refresh, but would be nice to have.

Addendum, in an earlier design, we had a bottom border below the search bar, like so:

maybe remove the border

This border, upon reflection, was actually a not needed, sorry about that, so we can go with this:

maybe

This is also relevant to #336 (comment) CC: @adamwoodnz

Coming to reinforce Joen's comment.

Done in #469