Diagram of dynamic content, HTML Views and Fragment Nesting

Projects Hub is a singe page web app. Fragments of HTML is pulled in Javascript (Angular) views. This page describes views and fragments nesting.

There are three functional layouts in the hub:

• Projects Hub (filtered and sorted card view of projects and ideas)
• Project Page (details of project definition and progress)
• Idea page (details of ideas for project, the same layout as Project Page with minor modifications)

All layouts are styled by CSS loaded in the main container: index.html. Some HTML fragments are reused among the three layouts. To help with targeting styling in different layouts each is wrapped in a div with unique class: .OK-hub-wrapper for Projects Hub, or OK-project-page-wrapper for Project Page and for Idea Page.

Fragments diagram (as of April 2, 2015):

https://cloud.githubusercontent.com/assets/10410203/6975529/cf513230-d962-11e4-9269-228408ac220d.png

Fragment confusing text description is below. You will be safer looking at the diagram in the link above (you have been warned!).

[index.html] -- main container (links to CSS and Javascript)

pages/[hub.htm] -- <div.OK-hub-wrapper> <header> + <div for select project banner> + <div for filters [map/Filter.html]> + <div for sorting[map/Sort.html]> + <div for project card and idea articles> <project card article contains divs with [project/preview.html] + [project/description.html] + [project/socialbadges.html] + [project/techandhelp.html] + [project/contributers.html]>, <idea article contains [project/preview.html] + [{{card.title}}] + [{{card.subtitle}} + [{{card.category}}] + [{{card.goals}} + [{{card.suggester}}] >   -- main container for Projects Hub layout 

pages/[project.htm] (not to be confused with project/project.html -- consider renaming?) -- <div.OK-project-page-wrapper  ng-controller="projectCtrl"> [project/header.html -- page header] + [projecttype] + [static/cfahub.html -- page footer] -- main container for Project Page and Idea Page layout

map/[Filter.html] -- filters panel in the hub
map/[Sort.html] -- filter results and sort projects control in the hub

project/[contributers.html] -- <section> list of contributors to the project
project/[description.html] -- <section> project title, subtitle, civic category, user goals description, link to project page 
project/[development.html] -- <div row> [project progress HTML] + [JS insert of project/issues.html -- issues on GitHub]  + [{{card.techstack}} -- code stack from GitHub]  -- used in project page layout
project/header.html -- <header> Project and Idea pages header 
project/idea.html -- <div><div row>[{{card.suggester}}] + <article>[project/info.html]
project/info.html -- <div row> -- project definition panels -- used in project/idea.html
project/issues.html -- <p>list of project issues on GitHub -- used in development.html  
project/preview.html -- <section> -- project image + developed in {{card.city}}
project/project.html (not to be confused with pages/[project.htm] -- consider renaming?) -- <article> [project/preview.html] + [project/socialbadges.html] + [project/info.html] + [project/development.html] -- all project page content except header and footer
project/socialbadges.html -- <div container-fluid><div row><section> -- project badges used in both project page (esp. this markup), and project card
project/techandhelp.html -- <section>[{{card.platform}}] + [{{card.active}} -- needs JS to link to online product, if any] + [{{card.techstack}}] + [project/issues.html] -- used in project card in the hub

static/cfahub.html -- <div> footer -- used in project page