Polish up astropy top menubar styling

[kakirastern]

Based on observations of top menubar rendering generated on RTD.

Fixes #12.

[astrofrog]

@kakirastern - two quick requests:

• Could you make the font size in the dropdown menu match the font size in the top bar itself? At the moment, the dropdown font is a little too large in comparison.

• Can you increase the spacing between the top bar items slightly and move the dropdown arrow a little closer to 'About' to make it clear it's associated with that item, and not 'Get Help'?

[kakirastern]

Sure, give me a day or two and I will get back to you with some more commits as per your requests...

[kakirastern]

Hi @astrofrog Please check and let me know if further tweaking is required... I have increased the font size from 110% to 120%, and the spacing between items from 10px to 15px.

[astrofrog]

It looks like the submenu font is still larger than the main menu font:

And it would be nice if the drop-down arrow was closer to the 'About' word that to the 'Get Help' one. Is that easy to do?

[kakirastern]

Sorry, I probably should use px in indicate font size instead... And wait, the part about the drop-down arrow should be easy to fix. Give me a couple of hours. Will be more careful this time.

[kakirastern]

So this is what I got locally after tweaking:

[astrofrog]

Unfortunately it looks truncated to me now:

This is with Safari and Firefox. Also, the top bar items seem a bit low in terms of vertical alignment - is there any way to center them vertically?

I like the horizontal spacing and the position of the arrow now though!

[kakirastern]

Hey @astrofrog, just would like to check with you: Is the image you got from a local build or giles or RTD? If it is a local build then it would look "more normal" after rendering. If it's a giles or RTD rendering it means I will need to do some massaging.

But yes, I can align the top bar items so that they are centered in the topbar. Will work on it now.

[astrofrog]

It was from a local build

[kakirastern]

So this is what I got on a local build to an approximate likeness of the RTD rendering (the items are now more vertically-centered):

But we should be careful and check with either giles or RTD for the actual topbar...

[kakirastern]

In the RTD rendering the spacing between items in the dropdown menu would be smaller...

[kakirastern]

Is there any way we can get a giles version of the top bar with the configurations in this branch to check the rendering? Or if your machine produces reliable spacing between dropdown menu items (unlike mine), I can simply go ahead to fix the height of the dropdown menu to accommodate the changes effected in this PR...

[kakirastern]

Hi @astrofrog... I trust your computer more than mine, so I just changed the dropdown box height from 125px to 155px. Try it on your machine and see if the dropdown menu still looks "truncated".

[kakirastern]

Added a new commit as per user suggestion, as made in #12.

[astrofrog]

@kakirastern - I now no longer see any buttons when the project toolbar is enabled (I think they are pushed below the top bar).

The vertical alignment is also incorrect when the toolbar is not enabled:

[astrofrog]

Ah the lack of buttons happens disappears if I make the window larger, but they are not visible with the default Chrome window size on my computer.

[kakirastern]

Yeah, I think too many buttons got crammed into the topbar... Maybe I could tweak the font size/spacings a bit and see if I can get a better fit. But it will take a few days.

So in summary, I am thinking I will approach the problem via:

1. Fixing the font size to a smaller one
2. Changing (reducing) the topbar element size
3. Tweaking the topbar element spacing

Or, do you have any other suggestions?

[astrofrog]

I think we might want to consider ways of making the interface responsive, that is on smaller screens, we could switch to a drop-down menu for all those menu buttons? I've been playing around with libraries like Material UI and Vuetify to see what those could offer.

[kakirastern]

Yeah, that's a great idea. Right now the sphinx theme has been set up in a way that is hard to change details in an easily and readily deployable manner. Looks like we might run into some issues such as the ones we are encountering or break something like we (or I) did last time sooner or later. I am checking out both Material UI and Vuetify now. I particularly like what Vuetify can do for Astropy...

[astrofrog]

@kakirastern - since you mentioned it on Slack, I'll also mention it here for the record - Bootstrap 4 is also an option and might be easier to use with the kind of templating we need for Sphinx (https://getbootstrap.com/docs/4.3/getting-started/introduction/)

[astrofrog]

It might be worth investigating whether this bootstrap theme would be a good starting point, with a little tweaking of colors/logo/etc. This is used by the seaborn package for example.

[kakirastern]

Sure, I will work on it a bit more. Might take a bit longer than a few days though since I might need to make a lot of changes. Looks like the theme has been modified this year in March 2019 so it is a good sign.

[kakirastern]

Will open a separate PR regarding a new-bootstrap-based sphinx theme soon.

[eteq]

closed at request of author - last SHA was ee4189313ea85b3288887a248b88b16e8f37ba42