Make the sidebar stay on the page during scroll

[ReventonC]

closes #24

[choldgraf]

Really nice start! I agree it's much nicer to have it stay in-place.

I gave it a shot, and there seemed to be a few screen sizes where the sidebar would overlap with the text. We need to make sure that things look nice on both narrow (e.g. phones) and wide (e.g. widescreen monitors).

I made an edit that I think resolves this issue. It does so by setting the fixed position from the left, not the right. That way we can set the x-position depending on the width of the content.

Take a look and let me know what you think! Does that work for you?

[choldgraf]

This means that the sidebar will always be just to the right of the content, provided the screen is wide enough. (as opposed to your original PR, which would put this at the right of the screen regardless of the size). Is that OK?

[ReventonC]

Yeah, it looks good for now! However, this is definitely not the best way to solve it. Javascript should also be able to make it float on the page without using position: fixed (maybe using window scroll).
One thing I noticed when we're deploying the jupyter book to our class website is that it doesn't really have a good responsive design. As you said,

there seemed to be a few screen sizes where the sidebar would overlap with the text

We probably should change all the styles in the layout and make it responsive, so that we can solve this problem fundamentally.

[choldgraf]

Yeah, totally agree. @ReventonC do you have thoughts on whether "make it responsive" should block on this PR getting in for the sake of "good enough right now"? Maybe @SamLau95 has thoughts too

[SamLau95]

I pushed some changes to this branch that should make the sidebar responsive. Basically, I use flexbox to position the sidebar above the page content. When there's enough horizontal space, I position the sidebar to the right of the page content by switching flex-direction: column to flex-direction: row.

Here's how it looks for me:

[choldgraf]

It looks great for horizontal movement! though demoing it locally I notice two issues:

1. the sidebar now does not stay in a fixed vertical position when scrolling vertically (that was the original goal of this PR)
2. the sidebar changes its vertical position depending on whether there is an interact link there. I think we should aim for the sidebar to be in the same vertical location regardless of the content.

[SamLau95]

You're totally right @choldgraf , I forgot about the fixed part. It took an alarmingly long time to figure out how to make the right sidebar fixed and responsive. This is what I've got now:

[choldgraf]

looks great to me! there's something weird with the scrollbar being just to the right of the sidebar, rather than locked to the right side of the page.

However, I think this may be platform-dependent, and shouldn't be a blocker on this PR. Better to open another issue about IMO. So unless the fix for the above question is simple, if @SamLau95 and @ReventonC are +1 on this PR, I'm +1 on merge!

[SamLau95]

I'm +1 for merging this now and fixing the scrollbar in a future PR.

[choldgraf]

@ReventonC what do you think? It's your PR after all :-)

[ReventonC]

Sorry for the late response! And yeah, I think this works!

[ReventonC]

I think I will also take a look at the styling over the winter, and see if I can figure some more general solution for the responsive design of jupyter book!

[choldgraf]

sounds good @ReventonC then we shall 🚢 it!!

Thanks to both of you for the help, this is great improvement :-)