Fixing the sidebar footer for different browser sizes

[varadgunjal]

When the browser is resized, I noticed that the footer interferes with the main menu as observed below -

This can be attributed to the bottom margin set in hyde.css -

.sidebar-footer { position: absolute; bottom: 5px; padding: 1rem; }

and is fixed on removal without causing issues to other views.

[peterjc]

I can see how this happens because the logo and main links are anchored to the top of the sidebar, while the version and copyright are anchored to the bottom.

What do you think @MarkusPiotrowski? I have the impression you know much more about CSS than I do.

[MarkusPiotrowski]

I have found a better another solution, which keeps the version and copyright anchored to the bottom (what I like), but prevents it from overlapping the menu. You can test this temporarily here: http://markuspiotrowski.github.io/

However, whatever we do, this is still a "sticky" sidebar, which means if you reduce the height even more, you will not be able to access the lower parts of the menu.

[varadgunjal]

To access the lower parts of the menu, you can simply add the following edit in hyde.css -

.sidebar { ...; overflow-y : auto; }

That will automatically add a scrollbar when the window becomes smaller. I was going to edit my PR to add this, but it's probably not that big a change.

[MarkusPiotrowski]

Unfortunately, it seems that we cannot combine my solution with the automatic scrollbar; it somehow works, but the scrollbar doesn't go away when resizing the window (only after reloading the page).

Given the possibility that the menu may become larger in the future, a scrollbar on the menu may become very usefull, I would agree to 'sacrifize' the "menu footer design" for functionality (no problems with overlapping and possibility to have a scrollable menu).

@varadgunjal: can you add the overflow-y: auto; to the .sidebar class? You can also remove the position: absolute; line in the .sidebar-footer class.

[varadgunjal]

@MarkusPiotrowski made the edits. Please check them out.

On another note, given the possibility that the menu may become larger in the future, may I suggest making the sidebar collapsible on smaller window sizes / smaller devices as below (Sorry for the bad quality of the gif, GitHub size limits are to blame) -

This is a persistent collapsible header which will make the large menu manageable and will be handy in navigation as well. As of now, if I want to go to another page, I need to scroll back up and then navigate. What do you think?

[peterjc]

The current style template does something a bit like that already when I view it on my mobile phone...

[varadgunjal]

The current version kinda transposes the menu to a horizontal layout on my phone - which I guess is also what you see, I just found it a little confusing to navigate when there are so many links side-by-side.
Although the header still isn't persistent, so I keep scrolling back to the top to navigate to another page.

[MarkusPiotrowski]

@peterjc: I think the current PR (preventing overlapp, adding scrollbar when necessary) is fine.

@varadgunjal : Regarding a persistant collapsible menu bar: It would be nice to test how this would look for the Biopython page. This view is mostly relevant for mobiles and thus the collapsed menu bar, when it should stay persistent, must be quite thin. E.g. just "Biopython" with the +/- icon next to it. In your example on https://varadgunjal.github.io I find the collapsed menu to thick (on my Galaxy S4 mini) and taking away too much space. At the same time, when expanded, the menu entries are still quite close together and harder to select than in the current view.

[varadgunjal]

The version I have on that website is very nascent - a quick hack to make that gif and show you what I meant. I'll polish it up and post updates. If you like it, we can take it up from there.

[varadgunjal]

Shall we close this PR?

[peterjc]

Based on @MarkusPiotrowski's review I'm happy to apply this as it:

I think the current PR (preventing overlapp, adding scrollbar when necessary) is fine.

However, if you (@varadgunjal) would like to close this PR, and work on something nicer, that'd be fine too.

[varadgunjal]

I think I'll open another PR with the other edits later. I thought I'd have it ready in a jiffy, but CSS is not exactly the best designed language. Wrangling it out is taking some time. So, you can go ahead and merge this for now. 👍

[peterjc]

Sorry, this feel out of my inbox to do list. Merged now, thanks!