Make good Demos

[VillageHubertChen]

• HC: Write specs for 2 Example Pages
  • Static HTML
  • Dynamic HTML
• Write specs for Navigation Bar
• Read → V²►v2-Tabs►README.md
• Implement Demos according to specs below
• Trigger HC for testing → Testing of examples #5

[VillageHubertChen]

Static HTML Demo

HTML of Intro to Demo

• Static, hand coded HTML
• Identical to Static HTML Demo

HTML of Links

• Links to each tab, layout as following

  Links to first Tab Bar

• Standard
• DIY
• Retail

Links to Off-Page Tab Bar

• Apps
• Plan
• Organization

HTML of Tab Bar

Static, hand coded HTML. Content of tabs see below

Content of the Tabs

• Based on Tabs of V² Home Page
• Tabs: Standard, DIY, Retail (because they only have 3 tiles)
• Items: Tab-Title, Tab-Sub-Title, Tile-Title, Tile-Image, Tile Overlay

Styling

• Use same CSS of V² Home Page, but remove all that is not needed

[VillageHubertChen]

Dynamic HTML Demo

HTML of Intro to Demo

• Static, hand coded HTML
• Identical to Static HTML Demo

HTML of Links

• Links to each tab, layout as following

  Links to first Tab Bar

• Standard
• DIY
• Retail

Links to second Tab Bar

• Apps
• Plan
• Organization

Links to Off-Page Tab Bar

• Standard
• DIY
• Retail

Note: We are using this inefficient layout to build up content so that linking to the tab target requires scrolling and as such we can demo scrolling.

HTML of Tabs

• HTML is generated with ng-repeat from JSON file "tabs.json"
• Please note this demo has two tabs

Content of the Tabs

• Based on Tabs of V² Home Page
• Tabs of Tab-Bar 1: Standard, DIY, Retail (because they only have 3 tiles)
• Tabs of Tab-Bar 2: Apps, Plan, Organization
• Items: Tab-Title, Tab-Sub-Title, Tile-Title, Tile-Image, Tile Overlay

Styling

• Use same CSS as for Static Demo

[VillageHubertChen]

Navigation Bar

• 3 Menu Items
  • Static HTML Tab Demo
  • Dynamic HTML Tab Demo
  • Readme (Copy of the Readme file's content)
• Placed on top of page. Nav Bar is sticky
• Simple design. Pick from whatever design you can easily do / have in your library