Indicator Details Page

Transcription

1 Indicatr Details Page Interactin Dcument Versin Date Owner Changes/Updates /17/11 Nick Quintanilla - Initial dcument draft /1/11 Ian Oliver - Updated with feedback frm 8/30/11 Related Dcuments: This dcument is ne part f a larger set f Interactin Dcuments related t The Bstn Fundatin s 2011 Indicatrs website redesign and develpment initiative. Specificatins related t the general framewrk, glbal site elements, (such as the site header and fter), and brwser supprt have been defined within the Glbal Elements Interactin Dcument. 1

2 Ntes abut this Dcument: Unless therwise nted, all cntent elements shuld be CMS-managed All CMS-managed cntent (text, RTF cntent, media) t be frmally defined by TBF during cntent entry. Where applicable, dummy data will be used prir t frmal cntent entry. Dimensins f all image r media-based assets will be defined utside f this dcument during HTML prductin. Unless therwise nted, hver states and styles will defined utside f this dcument during HTML prductin Sectr Indicatin Icn (small) 1.2. Indicatr Cde and Title 1.3 Previus Indicatr Link 1.4 Next Indicatr Link 1.5 Why is this Imprtant? blurb 1.6 Hw We are Ding cntent 1.7 Related tpics listing 1.8 Measures & Data Visualizatins 2

3 1.1 Sectr Indicatr Icn (small) Type = Image Hard-cded Image is specific t the given sectr NOTE: Icn size differs frm the ther tw sectr indicatr icns which may appear n the page Large icn links t crrespnding Sectr page Medium icn links t crrespnding Gal Detail page Small icn links t crrespnding Indicatr Detail page 1.2 Indicatr Cde and Title This item is made up f tw textbased elements: 1) an indicatr cde (a decimal-separated number) and 2) an indicatr title Bth elements are pulled directly frm the CMS Line Wrapping = Enabled 1.3 Previus Indicatr Link Type = link Link text is nt editable via CMS Link text shuld read Previus Indicatr If n previus indicatrs exist, link shuld be disabled On-click = takes user t the detail page f the previus indicatr Appears abve and belw the indicatr details cntent 1.4 Next Indicatr Link Type = link Link text is nt editable via CMS Link text, Icn, and hyperlinks are prgrammatic (i.e. NOT CMS-managed) 3

4 Link text shuld read next Indicatr If n next indicatrs exist, link shuld be disabled On-click = takes user t the detail page f the next indicatr Appears abve and belw the indicatr details cntent 1.5 Why is this Imprtant Blurb Why is this Imprtant Cntainer Why is this imprtant? Heading Why is this imprtant cntent View Mre link Why is this Imprtant Cntainer Dimensins = exact dimensins TBD during HTML prductin Width = static Height: Clr: Height f cntainer may vary by length f the inner cntent. A maximum initial height will be enfrced s that if the cntent exceeds the height restrictin, it will be truncated and a + View Mre link will be rendered which will expand the rest f the cntent. When the height f the cntainer increases, ther cntent will be pushed lwer n the page This cntainer will have a different backgrund clr than the rest f the page Exact clr TBD during HTML prductin Clr is nt CMS managed Why is this imprtant? Heading Nt editable via CMS Shuld read Why is this imprtant? Nt clickable Why is this imprtant? Cntent Nt clickable Appear directly belw the Why is this imprtant? Heading (1.1.2) Length is restricted n initial page lad by the cntainer s maximum initial height. See Why is this imprtant cntainer (1.1.1) fr mre infrmatin View Mre link 4

5 Type = link Link text and functinality = hard cded Link nly appears if the inner cntent exceeds the initial maximum height restrictin f the cntainer. See Why is this Imprtant Cntainer (1.1.1) fr mre infrmatin. Link will nt appear if the inner cntent des nt exceed the maximum height restrictin f the cntainer r if the cntainer has already been expanded t display the full inner cntent. Clicking expands area t display all cntent (smth slide transitin). The adjacent area fr Hw Are We Ding cntent expands as well, whether it has a View Mre link r nt All cntent belw this area is pushed dwn accrdingly When expanded, + View Mre text changes t - View Less and will cllapse this cntent n click 1.6 Hw Are We Ding Cntent Hw Are We Ding Cntainer Hw Are We Ding Heading Hw Are We Ding Cntent View Mre Link Hw Are We Ding Cntainer Dimensins = exact dimensins TBD during HTML prductin Width = static Height: Height f cntainer may vary by length f the inner cntent. A maximum initial height will be enfrced s that if the cntent exceeds the height restrictin, it will be truncated and a + View Mre link will be rendered which will expand the rest f the cntent. When the height f the cntainer increases, ther cntent will be pushed lwer n the page Hw Are We Ding Heading Nt editable via the CMS Nt clickable Appears abve the Hw We are Ding Cntent (1.3.3) Hw Are We Ding Cntent Type = RTF Appears belw the Hw We are Ding Heading (1.3.2) View Mre Link Type = link Link text and functinality = hard cded 5

6 Link nly appears if the inner cntent exceeds the initial maximum height restrictin f the cntainer. See Why is this Imprtant Cntainer (1.3.1) fr mre infrmatin. Link will nt appear if the inner cntent des nt exceed the maximum height restrictin f the cntainer r if the cntainer has already been expanded t display the full inner cntent. Clicking expands area t display all cntent (smth slide transitin). The adjacent area fr Why is this Imprtant cntent expands as well, whether it has a View Mre link r nt All cntent belw this area is pushed dwn accrdingly When expanded, + View Mre text changes t - View Less and will cllapse this cntent n click 1.7 Related Tpics Listing Related Tpics Listing Lead-in text Related Tpics Listing Related Tpics Listing Lead-in text Nt editable via CMS Nt Clickable Shuld read This Indicatr is related t the fllwing Tpics: Related Tpics Listing Shws the tpics t which the specific indicatr is related Tpic relatinships shuld be managed frm the CMS Tpics shuld be separated by cmmas Tpics are clickable On click = takes user t the crrespnding tpic details page 1.8 Measures and Data Visualizatins Measures/Data Visualizatins cntainer Measure/Visualizatin Item Measure/Visualizatin Item Title Measure/Visualizatin Graphic Enlarge link 6

7 1.8.1 Measure/Data Visualizatins Cntainer Cntains Measures/Visualizatin items (1.4.2) Visualizatins shuld be ppulated accrding t the fllwing layut rules: Data Visualizatins n Indicatr Detail Pages If 1 Data Vis If 2 Data Vis If 3 Data Vis If 4 Data Vis Measure/Visualizatin Item Cntains the data visualizatin title and data visualizatin medium sized thumbnail (see designs fr dimensin guidance) If either the visualizatin title, visualizatin graphic, r details f the data visualizatin are nt ppulated in the CMS, the visualizatin will nt be rendered n the page See Mesuare/Visualizatin Item Title See Measure / Visualizatin Graphic Mdal functinality will be defined in a later ID Measure/Visualizatin Item Title Title is pulled directly frm the CMS Wrapping = enabled 7

8 Nt clickable Measure/Visualizatin Graphic Type = image On-click = launches the data visualizatin mdal (see Data Visualizatin Mdal ID fr mre inf) If n image is available t ppulate this area, the data visualizatin item will nt display Enlarge link Type = Link Text + Icn Icn has the same hyperlink as the link text On-click = launches the data visualizatin mdal (see Data Visualizatin Mdal ID fr mre inf) Right -aligned 8