Bring clarity to campaign and opportunity page navigation

[alanmoo]

In order to make it clearer where a user is on the site, we want to do two things:

1.) On opportunity and campaign pages (if a page level is > 2) the parent's title should be visible at the top of the main content (as a heading). Below it, the page heading should appear (larger). 1b.) On mobile, the page heading is hidden because the navigation has it. 2.) In the side navigation menu, we should remove parent pages, so that only siblings of the current page show up. (This is accomplished by changing some logic in lines 4-6 of side-menu-items.html)

With this change, we are going to need to copy the content of existing top-level opportunity and campaign pages into their own mini-site:

• for each top-level campaign/opportunity page without children, we do nothing.
• for each top-level campaign/opportunity main page with child pages, create a new page called "overview" as child page, and copy the content from the main page over into the overview page,
• set the Meta Data "URL" field for overview pages to opportunity/{main-page-url}, so they will act as mini-site entry point
• set the Meta Data "URL" field for the parent to blank, but leave them published,
• change the Meta Data "URL" field of the rest of the sub-pages to opportunity/{parent-page}/{sub-page-name}

[kristinashu]

Here's some background, based on design in https://github.com/mozilla/foundation.mozilla.org/issues/1029

Navigation problems on Productions right now:

1) When I user lands on a subpage they have no way to orientate themselves (i.e. on a site about Aadhaar, Global Sprint, or Web Lit), particularly on mobile. 2) On mobile, the subpage title is doubled up.

Solution:

1) Add a persistent "mini-site" title to every page. 2) On mobile, hide subpage title.

Redpen comps

[kristinashu]

@gvn let me know if you have any questions!

[kristinashu]

So nice to see this! https://foundation.mofostaging.net/opportunity/web-literacy/

We will have to updated all the CMS pages on Production when this gets pushed. @alanmoo @gvn can you teach the designers what we will need to do?

Steps for staff and designers:

For top-level pages without children

• For example MoFo Design
• Do nothing

For top-level campaign/opportunity main page with child pages:

• For example Aadhaar and Global Sprint
• Create a new child page called "Overview" or "About"
  • Copy the content from the current main page over into this new Overview page
  • Set the Meta Data "URL" field for Overview page to opportunity/{main-page-url}, so they will act as mini-site entry point
• Updates to Parent page
  • Set the Meta Data "URL" field for the parent to blank
  • Leave it as Published
• Updates to the rest of the sub-pages (i.e. Core Curriculum, Take Action, Register)
  • Change the Meta Data "URL" field to opportunity/{parent-page}/{sub-page-name}
  • Make sure the Title and Header on a sub-page are have the same name (the name of the mini-site that will appear at the top of every page)

[alanmoo]

This has been promoted to production and the database updated appropriately.

[xmatthewx]

There are a couple differences between the design and the build that hamper usability.

Should we open a new ticket @kristinashu with a checklist to update? Related to this, we should look at how we are using this subnav on the fellowship pages, and decide on how it is similar / different. Is it above or below the header?

[gvn]

This is getting a little long, so if you want to open a QA ticket that'd be rad!

[kristinashu]

I have opened a new ticket https://github.com/mozilla/foundation.mozilla.org/issues/1090. I will add comps and context to that ticket then assign to engineering.