Polish up astropy top menubar styling #9
Conversation
| @@ -317,7 +317,7 @@ div.dropdown-content { | |||
| background-color: DimGray; | |||
| color: White; | |||
| width: 235px; | |||
| height: 155px; | |||
| height: 125px; | |||
There was a problem hiding this comment.
what about using the same numbers as in the main webpage?
I believe these are the relevant ones (but please double check whether it's indeed the css that's being used on astropy.org: https://github.com/astropy/astropy.github.com/blob/master/css/style.css#L651)
There was a problem hiding this comment.
Yeah, that's what I did originally. But for some reasons things didn't work out then if I use their settings as follows:
.dropdown-content {
...
min-width: 160px;
width: 100%;
height: 100%
...
}
I cannot recall why their code did not work for this case though. But if I use 100% width, I remember getting the full length of the screen instead of that of the individual menu item. (Similarly, if I use 100% for the height, it got rendered to the full height of the screen when I was testing the code, which is not really desirable.)Further, I do know that I have to add in css styling for a new division (.div) called topbar for things to work in my case, which does not exist in their code. I basically reworked everything to get the top menubar working for the docs.
There was a problem hiding this comment.
ok, never mind it then (I didn't follow everything in this and prior PRs).
There was a problem hiding this comment.
No worries. I had to resort to using .div to make the menubar work, maybe that's why their code doesn't work on this case.
|
@kakirastern - two quick requests:
|
|
Sure, give me a day or two and I will get back to you with some more commits as per your requests... |
|
Hi @astrofrog Please check and let me know if further tweaking is required... I have increased the font size from |
|
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? |
|
Sorry, I probably should use |
|
So this is what I got locally after tweaking:
|
|
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! |
|
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. |
|
It was from a local build |
|
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... |
|
In the RTD rendering the spacing between items in the dropdown menu would be smaller... |
|
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... |
|
Hi @astrofrog... I trust your computer more than mine, so I just changed the dropdown box height from |
|
Added a new commit as per user suggestion, as made in #12. |
|
@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:
|
|
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. |
|
Yeah, I think too many buttons got crammed into the So in summary, I am thinking I will approach the problem via:
Or, do you have any other suggestions? |
|
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. |
|
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... |
|
@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/) |
|
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. |
|
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. |
|
Will open a separate PR regarding a new-bootstrap-based sphinx theme soon. |
|
closed at request of author - last SHA was ee41893 |
Based on observations of top menubar rendering generated on RTD.
Fixes #12.