Epic►001►Navigation Bar System v3

[VillageHubertChen]

• [x] HC, LC: Brainstorm on v3 features and implementation
• [x] HC: Document this project in description below
• [x] LC: Hack a design that comes close to the below ideas, but is a quick implementation based on what we have
• [x] Implement Milestone 1: Essential Features
  • [x] HC: Create YAML file for Board-Bar
  • [x] Create YAML file for Book-Bar
  • [x] Add styling to Article-Bar
  • [x] Add a Book-Bar Jumbotron in top of Article Bar
  • [x] Add Title "Articles" in Article Bar under the Book Bar Jumbotron
  • Read subtitle from Book-Bar.yaml file
  • [x] Board Jumbotron Content as per v3 design
  • [x] Move Bread Crumbs into Article Body
  • [x] Make Book-Bar sticky
  • [x] Make Article-Bar sticky
  • [x] Test on Lukas Machine
  • [x] Push to GitHub. Trigger HC for Testing. HC adds more pages, experience navigation
  • [x] delete folder: /roadMap/
• [x] Implement Milestone 2: Nice Features
  • [x] Do → Tweak Layout of Article-Bar
  • [x] Add Contents-Bar
  • [x] Implement: Article Front Matter and its Styling → #50
  • [x] Update all Front Matter in all Plan Articles to the new Syntax as per → #50
  • [x] Do → Layout Tweak Article-Bar
  • [x] Layout indicates relationship of menu items
  • [x] Style the Article as card
  • [x] Make → Nav Bar System Responsive to work on mobile
  • [x] Implement → Edit & GitHub FAB

    v3 Nav Bar System

    Features, Placement and Order

    1. Jumbotron of V²Site shows:
    2. Board-Title
    3. Board-Sub-Title (from Tooltip)
    4. Board-Visual (50% darkened and colored in Board Color. In Background, Line Art)
    5. Choosing the Board automatically loads the Intro Page (already done)
    6. Each Article has an Article Head
    7. Bread Crumbs
    8. Article-Title
    9. Article-Visual
    10. Article-Sub-Title

        v3 vs. v2 Features

• Sits on top of v2
• Cleans up inconsistencies of v2
  • Navigation feels better by following rule: Choice effects below only
  • Bread Crumbs are placed with Article. It is the path to the Article.
  • Colors in Navigation bar group the content correctly
  • Layout clearly indicates which menu item will modify what other menu items
  • upstream / downstream relationship of menu items are visually indicated
• Adds feature of Navigation Preview for Level 1
• Level 1 navigation gains a Jumbotron
• Implements ToC Bar (specified in v2 but not yet implemented)
• Adds One Jumbotron each for Level 1 and 2
• Article takes center stage
  • centered horizontally
  • Why background marks Article
  • Article Title is very easy and fast to find
  • Article gains Article Head: Title, Bread-Crumbs, Title-Image and Sub-Title
• Article width is not too wide
• Modern design as we use full width of big display: Article Navigation + Article Body + Content Navigation

  Hero Pages

  Links and Names to Hero Pages

• Manek
• Google►Dev

  Mix and Match

  From Manek

• Layout / borders of fill colors indicate relationships of menu items
• Put the article in center stage, make the navigation the frame

  From Google►Dev

• Responsive design: How Nav Bars flow, collapse and move
• Level 1 Jumbotron aligned to left side

  Colors

Item	Color Weight
Board-Bar	700
Selected Board-Bar Item Board Jumbotron Book-Bar	500
Article-Bar	300

Navigation Preview

• when hovering over Board-Bar Menu Item the Board Jumbotron is updated with the corresponding content
• Functionality is made by JavaScript that is in board-bar.html file
• Data is contained in board-bar.json file

  Definition of Jumbotron

• A jumbotron indicates a big box for calling extra attention to some special content or information.
• http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp

  Changes vs v2

  Changes effect only Below

  Keep Together what Belongs Together

  Big Visual Bread Crumbs for Level 1 and 2

  Reference

• → #42 Navigation Bar System v2
• → #44 Library Metaphor for V² Navigation

[VillageHubertChen]

YAML file for Board-Bar

File Name and Location

• Name: "board-bar.yml"
• Location: "_data"

Content of board-bar.yml

- menu: Standards
  url: /standards/
  title: The Missing Standard
  subtitle: All missing standards to find parts, build, upgrade, maintain and repair a modular Mini / All-In-One PC.
- menu: Products
  url: /products/
  title: Trailblazer Products
  subtitle: Real products available early on, showing what you can build with V² Standards. Buy today what is to become mainstream tomorrow.
- menu: Makers
  url: /makers/
  title: For Makers
  subtitle: Everything you need to develop your new products faster at lower cost.
- menu: DIY
  url: /diy/
  title: For DIY
  subtitle: PC Know How & Tools.
- menu: Retail
  url: /reatil/
  title: For Retail
  subtitle: Lower your cost and increase computer sales.
- menu: Apps
  url: /apps/
  title: Apps
  subtitle: V² Open Source Web Apps simplify experiencing or building V² PCs.
- menu: Spreading
  url: /spreading/
  title: Spreading the Word of V²
  subtitle: How to tell the story of a smaller, quieter, more modular and upgradable PC and how to get it into the hands of the user.
- menu: Plan
  url: /plan/
  title: Plan
  subtitle: How V² will improve your life, how we make it happen and how you can help.
- menu: Organization
  url: /organization/
  title: Organization
  subtitle: How you can benefit from or contribute to V² and who are the people making it happen, why and how.

[VillageHubertChen]

YAML file for Book-Bar

File Name and Location

• Name: "book-bar.yml"
• Location:
  1. go to <> Code directory of the repository hosting your Jekyll Site
  2. enter folder: "_data"
  3. This contains one folder for each Book of your Site. Pick the Book you want to edit
  4. Each of above folders contains the "book-bar.yml" file with content corresponding to its folder

Example Content of book-bar.yml of V² > Plan

- menu: True North
  url: /true-north/
- menu: Road Map
  url: /road-map/
  desc: >
    How to reach True North via consecutive Campaigns.
  subitems:
    - menu: Strategy
      url: /road-map/strategy/
    - menu: Campaign 1
      url: /road-map/campaign01/
    - menu: Campaign 2
      url: /road-map/campaign02/
    - menu: Campaign 3
      url: /road-map/campaign03/
- menu: Dashboard
  url: /dashboard/
- menu: Flow
  url: /flow/
- menu: Agile
  url: /agile/
  desc: >
    Generic Agile Development and Toyota Production System for Github Organizations.
  subitems:
    - menu: Getting Started
      group: 
        - menu: V²Agile Workflow on GitHub
          url: /agile/getting-started/agile-workflow/
        - menu: V²Sprint Workflow on GitHub
          url: /agile/getting-started/sprint-workflow/
        - menu: Roles & Communication
          url: /agile/getting-started/roles/
        - menu: Testing
          url: /agile/getting-started/iterations/
    - menu: Fundamentals
      group:
        - menu: Agile Development Primer
          url: /agile/fundamentals/agile-primer/
        - menu: Motivation by Design
          url: /agile/fundamentals/motivation/
    - menu: Developing / Evaluating
      group:
        - menu: Solving today's Problems
          url: /agile/developing/solving-problems/
        - menu: Multi Repo Management
          url: /agile/developing/multi-repo/
        - menu: Adding SCRUM to GitHub
          url: /agile/developing/adding-scrum/
        - menu: Adding Dashboard to GitHub
          url: /agile/developing/dashboard/
        - menu: Developing V²Plan
          url: /agile/developing/developing/
        - menu: Adapting V²Plan
          url: /agile/developing/adapting/
    - menu: Reference
      group:
        - menu: Features of V²Plan
          url: /agile/reference/features/
        - menu: V² Plan Reference
          url: /agile/reference/reference/

Notes

• Max Lengths of Menu Item name: 13 Char
• Max Lengths of Article Name: 26 char. Article Name is the Menu Name in Level 3 and 4

[VillageHubertChen]

Layout Tweak Article-Bar

• [x] HC, LC: Merge Layout Styling of our current design and Hero below

Hero

• → http://getuikit.com/docs/grid-parallax.html

Improvements

• Looks lighter and more modern
• Make Article more the hero of the page

Keep important features

• Keep the Board Jumbotron in the Header of Article-Bar to show connection of chosen Book-Bar Menu Item and Article-Bar content
• Article-Bar is sticky

[VillageHubertChen]

Contents-Bar

Implementation

• [x] Find Hero Page and get HC's approval
• [ ] Read values from Article Front Matter
  • [ ] Golden Reference Article → http://v-squared.github.io/v2-Plan/system/
  • [ ] Implement all items of Table of Contents
  • [ ] Fix bug that scroll position is so that sticky Books-Bar covers heading
• [ ] Implement → Styling
• [ ] Implement → Behavior

Hero

• → http://getbootstrap.com/getting-started/#download

Styling

• Placement: Right side of Article
• Layout Style: Same as Article-Bar
• Vertical Alignment: Align all baselines of all Headings of: (Article-Bar | Article | Contents-Bar)
• Separation:
  1. Index vertical line plus white spaces. Similar to the Article Bar, except the vertical line is reduced in height to the height of the selected box
  2. Article will get Jumbotron, which will separate Article from both side bars
• Stickiness: Sticky, same as Article Bar
• Index:
  • One purpose of index is separation, as described above
  • Indicates the scroll position of the Article in the Table of Contents via Index-Line
• Index-Line: (for ScrollSpy)
  • indexed: 3px, left side border, color: #000
  • hover: 1px, left side border, color: #666
• Colors:
  • normal: #666
  • indexed: #000
  • hover: #666

Behavior

• Live Index: When scrolling down your position in the Article is indexed by the Index-Line and Index Color of text
• Code: Use the code you used for Side Navigation Bar in V² Home Page a whole ago

[VillageHubertChen]

Nav Bar System Responsive

• [x] HC, LC: Develop Rules
• [x] You currently name the Off Canvas Icon for Book-Bar: "Navigation". Rename → "Books & Articles"
• [x] In the same spirit, add the name: "Boards" to Icon for Board-Bar
• [x] Indent Article Pages in Off Canvas Navigation. Also reduce top margin for first Article
• [x] Add the 3D Button look to Books, but not to Articles. This is done very simply in styling: Give the top boarder a lighter gray than background and the bottom boarder a darker gray than background. This feature will clearly differentiate Books versus Articles in the Off Canvas Navigation Bar.
• [x] Choose better font for Article Bar
• [x] Display Table of Contents on Top of Article once you collapse the Article-Bar
• [x] Increase Font size in Text in Board Jumbotron. Once done ask HC to check.
• [x] Create Issue → Off Canvas Bar is too slow on Mobile #108
• [x] Fix issue that scroll bar shows too late on Article Bar when window height is reduced
  • It is possible that the height of the sticky Book Menu need to be considered!
• [x] Fix typo: It should be "Books & Articles" not "Book & Articles"

Introduction

After the redesign we have three columns:

1. Article-Bar
2. Article
3. GitHub-Bar

Rules (What collapses when)

• Article-Bar includes ToC and as such it is more important than GitHub-Bar. So GitHub-Bar is collapsed earlier on.
• 1279px: Collapse GitHub-Bar into Right Off Canvas Navigation. Place Icon right to Progress Bar (Temporary solution)
• 959px: Collapse Article-Bar into Left Off Canvas Navigation. Place Icon to right into Board-Bar
• 768px: Collapse Board-Bar and Book-Bar. Add it to the Left Off Canvas Navigation. Icon already there.

Styling (of Off Canvas)

• → http://getuikit.com/docs/grid-parallax.html

[VillageHubertChen]

Edit & GitHub FAB

Edit FAB

• FAB is acronym for: Floating Action Button. Key design element in Material Design
• Two entries:
  • Edit Article
  • Article Issue
• Use Icons as you already do in Edit-Bar
• On pressing Edit FAB pop up a menu to the top

GitHub FAB

• Works the same as Edit FAB
• Entries:
  • Repo
  • Graphs
  • Pulse
  • Board
  • Issues
• Board Icon: 3 Vertical bards
• Board Link: https://waffle.io/V-Squared/V-Squared.github.io
• Repo: Use repository Icon. Text is Repository. Which repository it is will not be shown.The user can find out after he clicks.

Filter for Issues

• Create Structured Labels:
  • Board: Plan
  • Board: Organization
• Add the filter to the Issue Button for Plan

[LukasChen]

@VillageHubertChen. Please do a review and let me know if the positioning is good enogh :+1:

[VillageHubertChen]

Review:

The Good: Implementation of FAB is great. Thanks for going the extra mile to make it a two column layout. Great job! Also the menu prepositions itself depending on window width and scroll position. Impressive!

The Bad: You forgot to assign any functions to the buttons! So I moved this issue back to developing.

[VillageHubertChen]

Good job in fixing remaining bugs!