Revise global navigation

[stephaniesimms]

Non-logged-in version: https://wireframe.cc/BatUuz Logged-in version: https://wireframe.cc/FgAwAU

Menu items Google doc: https://docs.google.com/document/d/1iMOP6wU6Qv7RObjM8El9EeZzDyeyke62qewS8qZx4-0/edit

Pivotal ticket: https://www.pivotaltracker.com/story/show/131906263 related ticket https://www.pivotaltracker.com/story/show/120873081

[briri]

implemented changes found in the wireframes and deployed to dev and stage

[stephaniesimms]

@rhu001 per UX call 12 Jul - transferring screenshot and logo variance comments from #424. consensus seems to be that we need a line and/or some other visual element in the header that describes what the tool is for (similar to Portage "Shared stewardship of research data" line beneath logo in upper left corner of last screenshot below)

Brian's comments: We will unfortunately need to re-upload the logos because our upload process resized them to fit in the old location and they are blurry when we increase the size and display them where the roadmap logo is.

Here is what it looks like with the roadmap logo on the home page. I feel like we should have a line or something that runs across the page. The explore dropdown feels like its just floating out there.

And here is what it looks like with an institutional logo. This Univ. of Edinburgh logo has a lot of white space around it, there are likely better options out there for it.

Portage homepage

[vyruss]

It's not clear to me what "Explore" is supposed to do/contain (as a user) - also with the disconnected, two-coloured navbar I don't know how to reinstate current-page highlighting (for DMPonline CSS)

[briri]

@vyruss The views/layouts/_navigation.html.erb still uses the isActivePage() method to determine what page the user is on. This method sets the active class on the menu item.

Right now the CSS does the following:

/* Standard menu item */
color: $header-text-color;
background-color: $primary-color;

/* Active menu item */
color: $primary-color;
background-color: $white;

The two variables, $primary-color, $white and $header-text-color are set in your dmproadmap.scss file.

If you find that you need to be more granular than that feel free to create 2 new variables in dmproadmap.scss and reference them in the dmproadmap/base.scss file.

[sjDCC]

I really like the icons in this wireframe:

If we have space to include those that would be great. It brings it back to one click for actions not two, which is preferable

[stephaniesimms]

we all like the icons @sjDCC . i think the main reason for not using them is real estate - this table is extremely crowded as is and the dropdown Actions menu seemed like the best solution. @JEK-III also provided some rationale for the use of icons - if we introduce them here we should do so throughout the tool for consistency and that would require more time and effort (correct me if i'm wrong here). open for discussion though.

[sjDCC]

Yeah, I figured space may preclude it. Nevermind.

[sjDCC]

Does this ticket have any work left to do in it? Doesn't seem so to me from reading though. Close out?

[stephaniesimms]

this predates Bootstrap work and seems moot now. i'm going to close.