[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: PNG File navbaro.png     PNG File navbarwebv.png     PNG File topnav-20171116.png     JPEG File topnavcv1.jpg     JPEG File topnavov1.jpg     PNG File wiki-folio-org-screenshot-1.png    
Issue links:
Blocks
is blocked by FOLIO-1224 Create standalone HTML/CSS for FOLIO-... Closed
Relates
relates to FOLIO-643 Improve navigation and layout dev.f.o... Closed
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 FOLIO-817 Closed

Comment by David Crossley [ 04/Apr/18 ]

(Connecting comments.) There is a revised top navigation bar shown today in FOLIO-817 Closed .

Comment by David Crossley [ 06/Apr/18 ]

There is a great suggestion from Peter Murray in FOLIO-817 Closed to provide a completely stand-alone common FOLIO navbar to address this need.

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 FOLIO-817 Closed would have to be run by Peter Murray, Rachel Fadlon and Rachel's team to verify alignment with the general FOLIO group. The one thing that worries me about a new standalone nav bar is the responsive behavior. Guessing the demo above is not finished yet, but the responsive behavior does not work yet. You could probably get the styling to align with a standalone bar, but the responsive behavior would also need to be considered. Also, giving up reliable, responsive behavior from a known bar for a newly developed bar should be considered. Just a thought, but if you are looking for a deliverable in between, you could style the issues, discuss and wiki site purple, add the bee & match fonts to make the transition similar and use the bootstrap bar on the dev site. I can check with Harry as well. He is traveling, but I will run it by him.

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
build it - bundle exec jekyll serve
try it - browse to http://localhost:4000

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 FOLIO-1224 Closed .

However, i do not think that it should be a blocker for this issue FOLIO-714 Closed , i.e. to apply a common navbar to dev.folio.org site.

We have options, as shown in FOLIO-1162 Open . There we are just waiting for the colours and logos (which i can probably now get from your branches). In that way the capability is completely integrated.

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 FOLIO-1162 Open to apply a common top navbar in an integrated way. I have been working on the assumption that we need both the dev.f.o menubar, and a project-wide common top one, able to be used for navigation at both wide and narrow widths.

B) Improve your "folio-714-standalone-topnav" (or a new branch) to better apply the full FOLIO-1224 Closed standalone one. This would assume that it is okay to not have its top navigation menus available at narrow width. Also, there must be a way to add it so that it behaves well with the main dev.f.o navigation. There are also other issues to address, e.g. the rest of the site needs configuration tweaks to accommodate the different height of this top navbar with the fixed top banner (try selecting one of the in-page section links – the section heading is now partially hidden).

Comment by Peter Murray [ 25/Apr/18 ]

The point of FOLIO-1224 Closed is to come up with a standalone navbar that would be applied to all FOLIO websites (dev.folio.org, wiki.folio.org, issues.folio.org, ux.folio.org, etc.). (I created the other issues blocked by FOLIO-1224 Closed to list those cases. Feel free to add other blockers for other websites that I forgot about.) So I'm not sure how you see that FOLIO-1224 Closed isn't a blocker for this.

Thanks for pointing out the issues at narrower widths; I'll work on that in FOLIO-1224 Closed today.

Please don't push updates to master that affect the branding ( FOLIO-714 Closed and FOLIO-1162 Open ) until we get this sorted out.

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 FOLIO-1162 Open branding.

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 FOLIO-1224 Closed . I had tried something similar before, but could not achieve it. Probably removing the fixed-top banner was a part of the solution.

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.

Generated at Thu Feb 08 23:07:48 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.