add ioos header#333
Conversation
|
@MathewBiddle do you want to test this out? We can merge, publish the site, and remove it if things don't look right. Let me know what you think. |
|
can you deploy the site from your branch and we can review that way? |
|
|
Looks like the jupyterbook accordion menu overlays on top of the new dropdown menu. humm. You should see IOOS Data Catalog as the first option for the dropdown in Data Access. 
|
I never heard the burger button as accordion. I like it much better than burger!
Yeah, there is some interference there. Maybe Andy can help us figure it out? Note that Jupyterbook was not designed for this and there are many open issues/PRs for a proper header override implementation. If we can't figure this out we may need to wait. |
|
BYW, not sure it would help here, but in the demo page I shared with you, there are two versions of the dropdown header @nguyandy created: https://ioos-ui-components.s3.us-east-1.amazonaws.com/compact-header.html I believe we decided to go with the second option, and it looked like you may be using the first here. I'm not sure if the alternate one used here will continue to work or not or if it might be pulled down from the CDN- maybe Andy knows. Also, he submitted this PR recently to update the official documentation: https://github.com/ioos/ioos-us/blob/main/component-library/README.md Also, Andy any ideas about the CSS stacking issue? |
If I got it right the JS is the same, but I need to use PS: I'm getting old and both looked the same to me. I only realized that they were different when I read the HTML code. |
|
Hey @ocefpaf , In https://ioos-ui-components.s3.us-east-1.amazonaws.com/compact-header.html, the first design didn't make the cut. The This is the latest doc. https://dgd6r9iiqa8y9.cloudfront.net/ioos-ui-components.min.js was just updated a few minutes ago to include the new changes from this morning. Let me know if you run into any hiccups or issues. |
|
I updated https://ocefpaf.github.io/ioos_code_lab/content/intro.html with this PR. It uses the latest JS that should be the latest header (unless I made a mistake somewhere). However, this one is not dark-theme friendly. 
I think I can solve the menu overlay issue if I can figure out how to override the z-index of the jupyterbook theme. I "hacked" it in the image above as a proof of concept, but I did not figured out how to do that properly in JB config. |
I can force a high z-index on the expanded+dropdown menu and see if that fixes the issue.
Thanks for flagging this. Do we have an example of dark-themed IOOS pages around that I can steal inspo from? |
@nguyandy does it make sense to increase the z-index in all the elements in the header? |
Oops. Jinx!
Only this onem the ioos code lab, that uses the pydata-sphinx-theme. Note that the test one worked as expected with the dark theme. |
|
@ocefpaf , the CDN/Cloudfront deployment should have the updates with the z-index changes, let me know if that fixes the overlay problems for you. I'll take a stab at dark theme later this week |
|
@ocefpaf awesome stuff here! Should we wait for dark mode or will that be something automatically baked in with this change? |
I would wait b/c, different from the other pages, I need to download the minified JS and put it into the JB configuration. While I could edit the HTML in the same fashion as we are doing for the header, that would add another moving piece and complicate even more the migration to JB >=2. |
|
I like it! Thanks @ocefpaf. The new dropdown header is a great addition for sites like these @nguyandy! I'm not sure I understand about the download/integrate with JB step you mentioned, but as long as it's working for you, that's ok. The only caution I'd add if JB isn't pulling in the CDN header content dynamically is that one of the main reasons we did this was so we could update the header in one location on the CDN and have it propagate across all the sites that implement it (ideally). We knew there would be exceptions to that however, but, hopefully that doesn't need to be the case here. |
Indeed. It won't be any good if we have to re-download it all the time. I'll hardcode it in the HTML the same way we did for the header. Ugly, hack-y, but it works... |
|
Folks, I'm using the cloudfront URL now and we should get updates.\ Please take a look at https://ocefpaf.github.io/ioos_code_lab/content/intro.html# and navigate it a bit to ensure the experience is the same/similar enough to the other sites. JB brings a lot of baggage that can interfere with our menu/header. PS: Dark mode seems to be working now, but the auto-hide is missing. Was that by design? Or is it JB messing with it? |
|
Looks like the z-index may still be off for the shared header versus JB menu, at least on my mobileb device. Screenshot upload isn't working for me for some reason... I guess you'll have to take my word for it 😉 |
I can see it on non-mobile devices too. I swear it was not there a few hours ago :-/ @nguyandy I'm using: Is that the correct one? |
|
Hey @ocefpaf Can you switch over to this version |
|
RE: dark theme @mwengren , thoughts on this as the dark-mode logo variant? |
Done! I was experimenting with the variants and forgot to revert back. Thanks! I update my branch with it so people can see the change. Be sure to refresh your browser and/or clean the cache when inspecting the changes.
Indeed, not all site will use white as a background. I'm not an expert, but there must be some sort of "switch" for the two modes, right? Is that something we can implement? |
@ocefpaf for sure. I'm thinking of adding Though Just curious, is it difficult to update <ioos-header theme={dark/light} with this project? No worries if not! |
I don't think so. There is no proper support for the adding a header, let alone a customized behavior. I'm already hardcoding stuff into the generated HTML b/c of that. Hopefully they'll implement something in the next iteration of Jupyterbook.
IOOS fighting the lack od standards in ocean data and web! That must be a first ;-p |
That looks fine to me. We should let Kate Culpepper confirm this works from her standpoint. I'll try to remember you forward this issue to her, I don't think she's on GitHub. |
|
Hey @ocefpaf , when you get a chance, can you test it out with |
Done. Seems to work perfectly as far as I can tell: https://ocefpaf.github.io/ioos_code_lab/content/intro.html When switching dark/light mode the banner changes as expected and there is no cropping. PS: When testing please remember to F5 a few times to ensure you have the latest page and not a cached one. |
|
Looks great to me! Next up, https://data.ioos.us/. |
|
@nguyandy let me know if you are going to rename that to a stable release name so we can change it here and merge. |
|
Hey @ocefpaf , just merged and deployed. |
|
Folks, this one should be ready to go. Any final thoughts? If you want to see the changes live please check: |
|
Looks good to me. Thanks for helping test out the component library! |
|
Looks good to me as well. Although, what's up with the additional search bar under the IOOS header? Looks like an issue with JB. 
|
It was not there yesterday when I checked, but was probably looking into a cached page. (Chrome browsers have such an aggressive cache, even after reloading a bunch of times and cleaning up all the files, things are still there!) Anyway, I can see it today and I'm looking into it. |
4 participants
Closes #330