MAINT: Website issues

[larsoner]

• A dedicated sponsors page would be nice (see how pandas does it) - we could include a link to it in the left sidebar, and then we can discuss what to do with the right sidebar (remove, keep but link the title to the sponsors page, show the link in the left sidebar only when the right sidebar disappears).
• Some numbers/characters in the sponsors sidebar are still different from the main text (e.g. P41, MIND, IDEX).
• There are still duplicate links in the left sidebar and the top nav (Docs, Get help); I'd only keep them in the top navbar.
• My preference was having all sidebars on the right; people didn't like this, and now we have two sidebars, which I think looks OK, but the problem is that the right sidebar disappears below a certain width with no replacement. This is not ideal. If we remove two links from the Version box (see previous bullet point), the sponsors sidebar could go below the version sidebar on the left.
• Often, searching for a particular answer on Google takes me to the dev version of our website. If I switch to the stable version, it always takes me to the homepage instead of the corresponding page in stable. Is this something that could be solved? fixed by Update versionwarning.js mne-tools.github.io#23 and wait for ajax result before writing to document mne-tools.github.io#24

Originally posted by @cbrnr in #8757 (comment)

[larsoner]

For searching, we should be able to check if the name exists in the stable location and use it if it does:

https://stackoverflow.com/questions/3922989/how-to-check-if-page-exists-using-javascript

@cbrnr do you want to try implementing this in https://github.com/mne-tools/mne-tools.github.io/blob/main/versionwarning.js ? It's what's used in every page of our docs

[cbrnr]

Hm, I can give it a try, but are you sure this is the current script we're using? It doesn't contain the message that's actually shown:

[drammock]

The message on the dev site is not written by version warning.js it's part of the doc/_templates/layout.html

[cbrnr]

Thanks @drammock, but then the proposed changes need to be implemented in that file, correct?

[drammock]

For the link to be different on every page it will need to be JavaScript probably, so for this to work it would make sense to move the dev warning bar from the template into versionwarning.js. AFAIK they're only separate for historical reasons.

[cbrnr]

Related PR (in progress) which fixes switching to the corresponding stable page: mne-tools/mne-tools.github.io#23

[drammock]

Some numbers/characters in the sponsors sidebar are still different from the main text (e.g. P41, MIND, IDEX).

This is intentional and is meant to distinguish granting instrument from specific grant number. without it, each of the numbers listed beween R01- and P41- would need the R01- prefix added, and each number after P41- would need a P41- prefix added. Similarly for the others. Still want it changed @cbrnr ?

[drammock]

There are still duplicate links in the left sidebar and the top nav (Docs, Get help); I'd only keep them in the top navbar.

Agree this is a little redundant. Personally I'd like it if "docs" sidebar link were changed to "tutorials" since the tutorials page is no longer directly accessible from the top navbar. The redundancy of 2 "get help" links doesn't bother me that much, since I think it's good for folks to find help easily when they're looking for it. But I don't mind removing "get help" from the sidebar if others agree with you.

My preference was having all sidebars on the right; people didn't like this, and now we have two sidebars, which I think looks OK, but the problem is that the right sidebar disappears below a certain width with no replacement. This is not ideal. If we remove two links from the Version box (see previous bullet point), the sponsors sidebar could go below the version sidebar on the left

There are a few considerations here:

1. Even on the pandas doc site, which you seem to like a lot, the right sidebar also disappears below a certain width. Try going to this page and gradually narrowing your browser window, and notice how at some point the right margin suddenly shrinks dramatically (that is the right sidebar --- which is empty on that page --- getting removed). Can you clarify what about this is "not ideal" @cbrnr? Is it just that on our site the funders are not visible on mobile devices / narrow browser windows?

2. currently, on the homepage only, the left sidebar also disappears below a certain width (or rather, it gets put inline vertically above the main content). I've set it up to make the Version box disappear when that happens, so that the homepage experience on mobile is a bit nicer. The logic is that there's nothing in that sidebar that you can't get to some other way via the main navigation, so hiding it removes some convenience but does not make the site unusable. Anyway, that approach means that (if given the same treatment, which it probably should be) the funders box would still disappear if put in the left column (just at a narrower width cutoff than it does now).

3. in this theme the left sidebar is logically before the center column and right sidebar, so screen readers have to go through it before reaching the main content in the center column. To me this means that the funders box does not belong on the left, whereas having some "quick links" at the beginning does make sense.

These considerations push me toward the following proposal: remove the "direct financial support" box on the homepage, add a new "funding" quick link in the version box that goes to a new dedicated funders page. We keep the (now empty) right sidebar to preserve page balance (like pandas does) and keep the behavior where the right column disappears below certain widths (like pandas does).

[cbrnr]

This is intentional and is meant to distinguish granting instrument from specific grant number. without it, each of the numbers listed beween R01- and P41- would need the R01- prefix added, and each number after P41- would need a P41- prefix added. Similarly for the others. Still want it changed @cbrnr ?

Yes, I'd change it because although you give a good reason for the different fonts, this is probably hard to figure out for people.

[cbrnr]

Can you clarify what about this is "not ideal" @cbrnr? Is it just that on our site the funders are not visible on mobile devices / narrow browser windows?

Yes, that's exactly the reason.

These considerations push me toward the following proposal: remove the "direct financial support" box on the homepage, add a new "funding" quick link in the version box that goes to a new dedicated funders page. We keep the (now empty) right sidebar to preserve page balance (like pandas does) and keep the behavior where the right column disappears below certain widths (like pandas does).

Perfect! I like it!

[marsipu]

Hello,
the new design looks really nice and fresh. I have some comments/suggestions (only my personal opinion):

• the search bar in the left dock disappears when scrolling down (tutorials, api). I use it often to quickly navigate through the documentation. In the old version, where it was in the top bar, it was easier/quicker to access than now when you always have to scroll back to the top of the page. Maybe one could make the left dock stay in place or move the searchbar back to the top?
• on my 16:9 screen, there is more than half of the space at the sides unused. I understand, this is partly caused by the new sidebars which you already discussed above. Maybe if they followed the scrolling, the site would seem less empty?
• Would it be also possible to make the empty space outside of the sidebars even smaller to make the text a bit wider as in the previous version (depending of the screen size)
• Is a dark-mode also possible? (would make looking something up late more comfortable)

[marsipu]

I don't have much experience with html, but if it was not too complicated and you maybe could turn me into the right direction, I could try to implement some of the suggestions myself if they're approved.

[larsoner]

@marsipu we are using this theme:

https://github.com/pydata/pydata-sphinx-theme

I think some or all of those can/should be implemented there, perhaps as options. @drammock probably has a better sense of this as well

[drammock]

@marsipu making the left sidebar sticky (so that the search box doesn't scroll offscreen) is something that has been requested before (maybe by @hoechenberger?) and I agree it would be better that way. It might already be possible, check the theme docs. If not, adding that as an option to the theme would be excellent.

Dark mode is on the wish list for that theme as well. Shrinking the margins is not likely to happen I don't think... I agree it looks strange but that seems to be the way web design is going nowadays (GitHub is also like this)... I would also argue that if you make the content too wide then it becomes harder to read, and things like that blue sidebar in your screenshot become harder to make them look good on both a super-wide monitor and a cellphone. Constraining the center content column at some maximum width makes that challenge somewhat more tractable.