[FOLIO-714] Utilise the FOLIO Common Top Navigation Bar for dev.f.o Created: 12/Jul/17 Updated: 12/Nov/18 Resolved: 02/May/18 |
|
| Status: | Closed |
| Project: | FOLIO |
| Components: | None |
| Affects versions: | None |
| Fix versions: | None |
| Type: | Task | Priority: | P3 |
| Reporter: | Patricia DeStefano | Assignee: | Unassigned |
| Resolution: | Done | Votes: | 0 |
| Labels: | devweb | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | 3 days, 7 hours | ||
| Original estimate: | Not Specified | ||
| Attachments: |
|
||||||||||||||||
| Issue links: |
|
||||||||||||||||
| Sprint: | |||||||||||||||||
| Description |
|
FOLIO partners agreed on a top navigation bar for the site. The partners would like dev.folio.org to use the common top navigation bar so that dev.folio.org aligns with the rest of the FOLIO site. |
| Comments |
| Comment by Patricia DeStefano [ 12/Jul/17 ] |
|
Investigating how to implement the common navigation bar using Jekyll. |
| Comment by Patricia DeStefano [ 13/Sep/17 ] |
|
The EBSCO marketing web team and other partners had further recommendations for the top common navigation bar. I have attached the latest v1 design. I am changing the POC that I am working on to accommodate the changes. |
| Comment by David Crossley [ 16/Nov/17 ] |
|
Copied and attached the new topnav-20171116.png from
|
| Comment by David Crossley [ 04/Apr/18 ] |
|
(Connecting comments.) There is a revised top navigation bar shown today in
|
| Comment by David Crossley [ 06/Apr/18 ] |
|
There is a great suggestion from Peter Murray in
There is also a branch FOLIO-714-standalone-navbar (see demo which is based on the current master of the site. It uses a semi-standalone navbar, to ensure that this theme's structure can accommodate it. (Of course this demo still uses the CSS-only mechanisms of this site's theme, so it is not really stand-alone, and it is still connected to the rest of the menu structure.) So when a truly stand-alone common FOLIO navbar is developed for the other sites and wiki, then we can slot that in. |
| Comment by Patricia DeStefano [ 10/Apr/18 ] |
|
I think that anything that changes the look and feel of the latest top nav described in
|
| Comment by David Crossley [ 11/Apr/18 ] |
|
As said in my previous comment, that demo was just to ensure that a truly standalone navbar could potentially be added. Yes it would need to handle its own responsiveness, and that could be difficult. I have removed that demo branch, as it is not integrated with the rest, so is just misleading. |
| Comment by Peter Murray [ 11/Apr/18 ] |
|
I have a to-do to take what Patti has on her branch and turn it into a stand-alone fragment of HTML/CSS that can be inserted into any of our web sites. |
| Comment by David Crossley [ 12/Apr/18 ] |
|
See FOLIO-1162 comment which prepares the current site's top banner area for the new branding. It is fully integrated with the current theme, so we do not require any workarounds. |
| Comment by Patricia DeStefano [ 13/Apr/18 ] |
|
I had already started a standalone version of the POC branch top navigation when Peter Murray suggested it. So, in case it would help Peter Murray, wanted to get everything that I have done up to github. I pulled all the javascript out, isolated the nav bar in a jekyll project and re-created the style and responsive behavior. Most of the css is still external, but all local within the jekyll project. I thought it was a start and wanted to push it up there in case it could help Peter Murray. I put it into a separate repo to isolate the nav bar. Assuming that you have jekyll installed, you can clone my fork and check it out: clone the project - git clone https://github.com/pdestefano/FOLIO-714-standalone-nav.git |
| Comment by Peter Murray [ 24/Apr/18 ] |
|
Unfortunately, that still has the primary and secondary navbar bundled up in one <div>, which makes it impossible to lift the code out and put it on another site. But it was certainly a helpful place to start. I've pulled out the relevant HTML and CSS to create a pair of stand-alone files: https://dev.folio.org/assets/projectwide-navbar/v0.0.1/projectwide-navbar.html The only thing that this version doesn't do that Patti's does it use an on-click handler for the drop-down menus. That got coded using JQuery, which is something that I don't want to assume is on any of the project's websites. What is there now is done with CSS, but some bespoke JavaScript could be whipped up that does the same thing as the JQuery code. For a brief period of time, I loaded the project-wide navbar onto wiki.folio.org and took a snapshot: I think we'll want to collapse the space between the two navbars, but for now this is a work-in-progress. The code lives at https://github.com/folio-org/folio-org.github.io/tree/master/assets/projectwide-navbar/v0.0.1 ... I figure we'll use semantic versioning in the directory name so we can gracefully rollout new versions. |
| Comment by Peter Murray [ 24/Apr/18 ] |
|
Okay – the lack of that JavaScript capability was really bugging me. I've updated the navbar source with that capability and cleaned up the code some. You can see what it looks like on this branch of the dev website: http://folio-714-standalone-topnav.dev.folio.org.s3-website-us-east-1.amazonaws.com I think this is ready to go. Thoughts? |
| Comment by David Crossley [ 25/Apr/18 ] |
|
It is great that you have a stand-alone navbar working in
However, i do not think that it should be a blocker for this issue
We have options, as shown in
The branch demonstration "folio-714-standalone-topnav" has a problem. At narrow browser width the top navbar mangles the rest of the dev.f.o navigation. I would like time to explore the alternatives: A) Continue
B) Improve your "folio-714-standalone-topnav" (or a new branch) to better apply the full
|
| Comment by Peter Murray [ 25/Apr/18 ] |
|
The point of
Thanks for pointing out the issues at narrower widths; I'll work on that in
Please don't push updates to master that affect the branding (
|
| Comment by David Crossley [ 25/Apr/18 ] |
|
Yes i understand about not pushing to master yet. I have a branch to address option A above. It still needs some work, but would be possible if we cannot do option B. I will work on a new branch for option B. I reckon that the way you have inserted it is not correct. |
| Comment by David Crossley [ 26/Apr/18 ] |
|
Peter Murray I have found joy using a different way to add the projectwide-navbar, using a banner overlay. Will tidy up and push the branch soon. This plays well with the dev navbar. (Of course this does not address the issue of the projectwide-navbar handling its menu items in the narrow width.) |
| Comment by David Crossley [ 26/Apr/18 ] |
|
The branch FOLIO-714-standalone-navbar-2 (see build) uses a banner overlay which keeps the projectwide-navbar separate. The prior work had used a second "menubar" to piggyback on the theme's facilities. This worked well when we had that integrated with the rest of the theme, but to be truly standalone this seems to be better. |
| Comment by Peter Murray [ 27/Apr/18 ] |
|
Hmmm – yes, that makes sense to me. Let me see if I can build on that while doing the mobile-friendly version of the project-wide navbar. |
| Comment by Peter Murray [ 27/Apr/18 ] |
|
I have a new version build on this branch, but it is getting tripped up by the styling on the container you put it in. Why did you set display of the navbar to `flex`? If I disable this in the browser inspector, the projectwide navbar works fine. In retrospect, I'm not sure what you are aiming to accomplish. Unless I'm missing something, this should be as easy as sticking a chunk of HTML just after the <body> tag plus including the chunk-of-HTML-specific CSS file. I've added the project navbar to the FOLIO wiki and will leave it there for the weekend. Confluence inserts a few containing tags, but they have very little styling – none of which gets in the way of the project navbar. |
| Comment by David Crossley [ 29/Apr/18 ] |
|
Regarding the "flex". Ah that is just because i copied an overlay from the theme. It uses various overlays in the banner area (not the dev navbar, but the banner/title/menu-disclosure part) and the theme uses "flex" throughout. I did your suggestion locally, to remove that from the commit that you linked. On quick inspection i only see one difference. The projectwide-navbar hits hard up on the right hand edge. But your new version would have improved handling of various stuff, so perhaps that is fixed. Please commit any changes that you need to make to this branch. I will follow up to test them. |
| Comment by David Crossley [ 29/Apr/18 ] |
|
I am trying to accomplish adding the projectwide-navbar without affecting the rest of the theme. It also needs to interact well when the browser switches to narrow width. Remember that we are trying to insert something that the theme is not expecting, and it has its own way to handle this top-of-page area. I will look again for other ways to insert this. |
| Comment by David Crossley [ 30/Apr/18 ] |
|
As expected, inserting the projectwide-navbar before (and so outside) the banner area causes a new set of difficulties. The extra unexpected height throws off the layout's placement of its items. However, i have been able to achieve a suitable solution. See the branch FOLIO-714-standalone-navbar-3 (and its build). |
| Comment by Peter Murray [ 30/Apr/18 ] |
|
Oh! I see what you are trying to do – pin the navbar(s) to the top of the page. Hmm. If we can find a way to mimic what Confluence is doing on wiki.folio.org (where the projectwide navbar scrolls out of the way and the site-specific navbar gets pinned to the top) that would be best. I'm not liking the effect where the menus of the project navbar scroll out of view as one goes down the page. |
| Comment by Peter Murray [ 30/Apr/18 ] |
|
Oh, and thanks for pointing out that I was missing some styling of the standalone code: +#projectwide-navbar {
+ width: 100%;
+ z-index: 10;
+}
+.projectwide-navbar-themenu {
+ padding-right: 8px;
+}
I'll add that and commit a change. |
| Comment by David Crossley [ 01/May/18 ] |
|
I do not like that "scroll out of view" behaviour either (i.e. the FOLIO-714-standalone-navbar-3 build). That is the best that can be done with that way of inserting the projectwide-navbar. It also contravenes the mechanisms of the theme. |
| Comment by David Crossley [ 01/May/18 ] |
|
Anyway i am celebrating. It is now all working properly on branch FOLIO-714-standalone-navbar-2 (and its build). It is an integrated part of the fixed-top banner of the dev site. It will be easy to keep up-to-date when the theme upgrades to newer versions, and easy to accommodate new versions of the projectwide-navbar. I reckon that this is ideal, providing the context with the rest of FOLIO. |
| Comment by Peter Murray [ 01/May/18 ] |
|
Congratulations! That looks great. I think that is ready to commit to master, yes? |
| Comment by David Crossley [ 02/May/18 ] |
|
I agree. Then we can follow later to add the further updates for the
|
| Comment by David Crossley [ 02/May/18 ] |
|
Done. Merged in pull/190. Thanks Peter. Very nice. |
| Comment by David Crossley [ 19/Jun/18 ] |
|
Peter solved the remaining issues with applying this to dev.f.o site, especially in narrow width. See yesterday's notes at
I followed on in that branch to show the site title. It is shown for all browser widths. Also made it appear to be integrated with the projectwide-navbar, rather than a separate background colour. I like it the way that it is now. However if you feel that the second banner row should be orange, or that it should be removed in widest and medium widths, then please do so. |
| Comment by Peter Murray [ 19/Jun/18 ] |
|
Ah, perfect! Nicely done – thanks for those additions. I feel pretty good about calling this done. I'll make a pull request to put it on the production site, then update the other sites that are using it now. |