Add Sidebar Navigation

[VillageHubertChen]

User Stories

As a new visitor to V² Home Page I use the Navigation Side Bar for two Purposes: 1) Remind myself of all Sections that put together make up V² 2) quickly jump to the section of Interest 3) I noticed that progress of scrolling down means the tangerine blob moves forward too. This teaches me to read the progress bars under the Folio Images.

As a returning visitor I only use the functionality to navigate to the part of the page I am interested in. However, this function is still important to me.

Hero Pages of Page Navigation

• http://www.avira.com/en/avira-free-antivirus
• http://getbootstrap.com/getting-started/

  Features

• Same layout / colors as progress bar (inspired by Avira Hero Page)
• Scrolling down page updates position in Navigation Bar
• It only shows up when beginning of Portfolios reaches top of page
  • This can not be changed unless we spend a lot of time on it (Avira Hero has same behavior)
  • It can be considered a good thing. That at the moment Portfolio takes the page, its table of contents pops into view, as such it catches the viewers attention
• For small screen: We switch to Accordion Navigation & Display → #18
• For middle screen: Sticky top navigation bar, as in Avira, but can be two rows
• Scrolling Animation: When jumping to a section of a page, the page does not jump but has a scrolling animation, so the viewer understands 1) he is staying on the same page 2) to go back where he was he needs to scroll up or down.

  Working Example on CodePen

• CodePen►scrollNav.js

  Tasks

• [x] LC: Find Hero Pages. Demo to HC.
• [x] LC + HC: List Features, write User Stories
• [x] @LukasChen Implement the Side Navigation Bar our page, then trigger HC for review
• [x] @bcaswelch Please test the new side navigation of V² Home Page. Test the following functions:
  • [x] When using a big screen > 1540 px and scrolling down you get a side navigation bar
  • [x] When using middle size screen and scrolling down you get a sticky top navigation bar
  • [x] Scrolling position is shown in highlight color
  • [x] All design of site navigation, progress bar and folio images have V² Case shape
  • [x] List all devices you can test it on: Mobile, Chrome Book, Desktop.
  • [x] How do you like the look and feel?

[VillageHubertChen]

Proposal to solve half-cut titles

Problem:

At small screen with the line break of the top navigation bar covers half of the head lines.

Proposed solution:

Height of top navigation bar and height of fonts are chosen to support two rows. Once screen width gets so small to require 3 rows it is turned off. The Accordion Navigation → #18 will continue to serve this navigation function. Now that there is a fixed height of the top navigation bar you can accommodate for it in the css and avoid covering half of the heading.

[bcaswelch]

Not sure the top navigation is working, only sits on the side.

Really like the icons that stay when on a very small window.

I can test on chrome, (1920*1080 screen), mobile phone, I guess microsofts new internet explorer

Love the color scheme! Might explore having the highlited page be a bit more apparent; the bold white blends in a bit too much (edit: Ah! so theres a nice blue highlight on the mobile version of the nav bar. Doing something like this for the desktop version would work nice)

[VillageHubertChen]

I do not get your feedback. Maybe this is a case where a Skype call with a shared screen and you showing with your cursor situations that you like / dislike will be faster. I then will transcribe it into feedback that Lukas know what to do with it.

[VillageHubertChen]

Redo Testing

• [x] @bcaswelch Redo testing, this time with correct web site: http://v-squared.github.io/ Report test results in description of issue above.

[VillageHubertChen]

Add short-names to Side Navigation

• [x] @LukasChen Add a "shortName" property to JSON for the 9 Sections. Use the following:
  1. Standard
  2. Products
  3. Makers
  4. DIY
  5. Retail
  6. Spreading
  7. Apps
  8. Plan
  9. Organization

[VillageHubertChen]

Change the Top Navigation Bar

• [x] @LukasChen Change the top navigation bar accordingly!

[bcaswelch]

-In fullscreen mode (chrome desktop, 1080 width) The sidenav doesn't highlight "Organization" even if you scroll it. Shows "Plan" as being hilighted.

-On mobile, "Organization" and "Plan" are highlited if you click on "Organization". "Plan" highlights itself and "Apps". I'll send you an image of what the error looks like (happens to other pages as well).

-Might make each section on the mobile layout more apparent (easier to know when on a new section) while scrolling. Can get lost with the amount of content.

-Make new name for organization? Either on top nav or side nav so people don't get confused which is which.

-Rest is really great! love the simplicity and color scheme of the page.

[VillageHubertChen]

Reply to above Feedback & Bug Report

1. Organization can not be selected: Known Issue → #26
2. Double Highlight in Navbar: Fixed in → #27
3. Agree. We need to work on that → #28
4. I do not understand. I created new Issue. Please explain there → #29
5. Thank you! Still lots to do, but we like where it is going. Special thanks for all your feedback and bug reports.

Please close your open tasks, then close this issue

Hi Bobby, thanks again for all your diligent work. If you complete a tasks assigned to you, it will help to track progress if you tick the corresponding check box. You completed all your tasks for this issues, but the check boxes are still open. Please tick them. Then you can close this issue as all is done :tada: