Permalink
Browse files

Styling changes, finished reporting section with map, charts etc. Rep…

…orting section requires php curl to get data from GFT.
  • Loading branch information...
1 parent 7ffbd22 commit bd4e0d129c9ab893ed7a041555a4b4ea4124212d @tobinbradley committed Dec 31, 2011
Showing with 115 additions and 99 deletions.
  1. +41 −7 css/style.css
  2. +7 −14 index.html
  3. +24 −24 js/metrics.json
  4. +3 −1 js/plugins.js
  5. +12 −47 js/script.js
  6. +28 −6 php/report.php
View
@@ -216,6 +216,7 @@ td { vertical-align: top; }
.alignleft { float: left }
.alignright { float: right }
.print-only { display: none }
+.transition { -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; }
/* main page elements */
@@ -243,13 +244,13 @@ header nav ul li { display: inline; }
nav ul li a, nav ul li a:visited { color: #ccc; padding-left: 15px; text-decoration: none; }
nav ul li a:hover { text-decoration: underline; color: #ccc; }
#title { max-width: 960px; margin: 0 auto; height: 130px; background: url("../img/site-logo.png") left top no-repeat; }
-#title h3 { font-family: 'Corben', sans-serif; font-size: 32px; color: #222; letter-spacing: 8px; padding: 0; margin: 0 0 8px; text-shadow: 0px 2px 3px #666;}
-#title h1 { font-family: 'Corben', sans-serif; font-size: 58px; color: #222; text-shadow: 0px 2px 3px #666; margin:0 ;}
+#title h3 { font-family: 'Corben', sans-serif; font-size: 32px; color: #222; letter-spacing: 8px; padding: 0; margin: 0 0 8px; text-shadow: 0px 2px 3px #666; font-weight: 700; }
+#title h1 { font-family: 'Corben', sans-serif; font-size: 58px; color: #222; text-shadow: 0px 2px 3px #666; margin:0 ; font-weight: 700; }
#google_translate_element { text-align: center; position: relative; top: -10px; }
/* search area */
#search { margin-bottom: 25px; text-align: center; }
-#searchbox, #mapIndicie { padding: 6px 4px; border:2px solid #dadada; border-radius:7px; color: #7C7C7C; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
+#searchbox, #mapIndicie { padding: 6px 4px; border:2px solid #dadada; border-radius:7px; color: #7C7C7C; }
#searchbox:focus, #searchbox:hover, #mapIndicie:focus, #mapIndicie:hover { outline:none; border-color: #9ecaed; box-shadow:0 0 10px #9ecaed; }
#searchbox { font-size: 24px; width: 70%; padding-left: 28px; background: url(../img/search.png) no-repeat 5px center; }
#mapIndicie { font-size: 18px; width: 100%; background: #fff; padding: 4px; margin-bottom: 4px; }
@@ -265,10 +266,44 @@ aside { float: left; width: 49%; min-width: 280px; padding-bottom: 10px; }
/* data area */
-.measureDetails h3 { margin-top: 0; text-align: center; }
-.measureDetails h4 { margin: 12px 0 2px ; }
+.measureDetails { background: #eee; padding-bottom: 10px; border-bottom: 1px solid #CFCFCF; border-radius: 7px; min-height: 508px; }
+.measureDetails h3, .measureDetails h4, .measureDetails div { padding-left: 10px; padding-right: 10px; }
+.measureDetails h3 { margin-top: 0; text-align: left; background: #ccc; padding: 0 0 0 10px; font-size: 16px; line-height: 2; border-radius: 7px 7px 0 0; }
+.measureDetails h4 { margin: 12px 0 0; }
.measureDetails h3, .measureDetails h4 { font-size: 16px; }
-#selectedNeighborhood { margin: 10px 0 2px; font-size: 24px; text-align: center; }
+.measureDetails h3 a { float: right; position: relative; text-decoration: none; color: #333; padding: 0 10px; border-left: 5px solid white; background: #a2d6eb; border-radius: 0 7px 0 0; }
+/* .measureDetails h3 a:hover { padding: 0 15px; } */
+.measureDetails h3 a:before,
+.measureDetails h3 a:after {
+ content: "";
+ position: absolute;
+ /* Pushed down half way, will get pulled back up half height of triangle
+ ensures centering if font-size or line-height changes */
+ top: 50%;
+ width: 0;
+ height: 0;
+}
+.measureDetails h3 a:before {
+ left: -12px;
+ /* Triangle */
+ border-top: 8px solid transparent;
+ border-bottom: 8px solid transparent;
+ border-right: 8px solid white;
+ /* Pull-up */
+ margin-top: -8px;
+}
+.measureDetails h3 a:after {
+ /* Smaller and different position triangle */
+ left: -5px;
+ border-top: 6px solid transparent;
+ border-bottom: 6px solid transparent;
+ border-right: 6px solid #a2d6eb;
+ margin-top: -6px;
+}
+#selectedNeighborhood { text-align: center; }
+#details_chart { text-align: center; padding-top: 10px; }
+#details_chart img { max-width: 90%; }
+#permalink a { font-size: 10px; }
/* PDF Report Form */
@@ -298,7 +333,6 @@ aside { float: left; width: 49%; min-width: 280px; padding-bottom: 10px; }
}
-
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
View
@@ -58,12 +58,12 @@
<div id="main" role="main" class="clearfix">
<div id="google_translate_element" class="hidden"></div>
<div id="search">
- <input id="searchbox" type="textbox" placeholder="Enter Address" />
+ <input id="searchbox" class="transition" type="textbox" placeholder="Enter Address" />
</div>
<div id="map">
- <select id="mapIndicie"></select>
+ <select id="mapIndicie" class="transition"></select>
<div id="map-canvas"></div>
</div>
@@ -82,10 +82,10 @@ <h3 style="color: red; margin-top: 0; ">Warning! This system is alpha quality an
</p>
</div>
<div id="selected-summary" class="hidden">
- <h2 id="selectedNeighborhood">Neighborhood</h2>
<div class="measureDetails">
- <h3>Metric 1</h3>
- <div id='details_chart' class="chart"></div>
+ <h3>Metric 1 <a href="#" class="transition">Blue</a></h3>
+ <h4 id="selectedNeighborhood">Neighborhood</h4>
+ <div id='details_chart' class="chart"><img src="http://chart.apis.google.com/chart?chf=bg,s,00000000&chxr=0,0,100&chxl=1:|2010&chxt=x&chbh=a,4,9&chs=350x75&cht=bhg&chco=4D89F9,C6D9FD&chds=0,100,0,100&chd=t:81|49&chdl=Neightborhood|County+Average&chdlp=t&chg=-1,0" /></div>
<h4>What is this Indicator?</h4>
<div id="indicator_description">
In vel auctor ante. Suspendisse rhoncus commodo ipsum, eget consectetur urna aliquet ac. Donec a hendrerit magna. Aliquam erat volutpat. Integer lacinia justo et quam adipiscing pharetra.
@@ -114,11 +114,7 @@ <h2 id="selectedNeighborhood">Neighborhood</h2>
</div>
</aside>
-
-
</div>
-
-
<footer>
<p id="social_media" class="screen-only">
@@ -145,8 +141,9 @@ <h2 id="selectedNeighborhood">Neighborhood</h2>
<div id="report-dialog" title="Create PDF Report" class="hidden">
<form action="php/report.php" method="get" target="_blank">
<input type="hidden" name="m" id="report_measures" value="">
+ <h4>Neighborhood</h4>
<p>
- <label for="report_neighborhood">Neighborhood: </label><select id="report_neighborhood" name="n"></select>
+ <select id="report_neighborhood" name="n"></select>
</p>
<h4>Metrics</h4>
<p id="report-metrics"></p>
@@ -163,10 +160,6 @@ <h2 id="selectedNeighborhood">Neighborhood</h2>
<!-- JavaScript at the bottom for fast page loading -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
- <script src="https://www.google.com/jsapi?key=ABQIAAAAm9Ct4PrMS0FyB27XUOQdYxQDpyRrWM6RoTuqCrFMtXdZ7RhO0xRSGo6XflSTl5uke-kxmtHnLXgNJQ"></script>
- <script type='text/javascript'>
- google.load('visualization', '1', {packages:['corechart']});
- </script>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
View
@@ -7,7 +7,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link Test" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"character_2" : {
@@ -18,7 +18,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 50, "colors": [ "#e0ffd4", "#a5ef63", "#1f5b10" ] }
},
"character_3" : {
@@ -29,7 +29,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 50, "colors": [ "#e0ffd4", "#a5ef63", "#1f5b10" ] }
},
"engagement_1" : {
@@ -40,7 +40,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"engagement_2" : {
@@ -51,7 +51,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"engagement_3" : {
@@ -62,7 +62,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"green_1" : {
@@ -73,7 +73,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"green_2" : {
@@ -84,7 +84,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"green_3" : {
@@ -95,7 +95,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"health_1" : {
@@ -106,7 +106,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"health_2" : {
@@ -117,7 +117,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"health_3" : {
@@ -128,7 +128,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"education_1" : {
@@ -139,7 +139,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"education_2" : {
@@ -150,7 +150,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"education_3" : {
@@ -161,7 +161,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"safety_1" : {
@@ -172,7 +172,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"safety_2" : {
@@ -183,7 +183,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"safety_3" : {
@@ -194,7 +194,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"housing_1" : {
@@ -205,7 +205,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"housing_2" : {
@@ -216,7 +216,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"housing_3" : {
@@ -227,7 +227,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"economics_1" : {
@@ -238,7 +238,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"economics_2" : {
@@ -249,7 +249,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
},
"economics_3" : {
@@ -260,7 +260,7 @@
"importance": "Notes on importance.",
"tech_notes": "Technical notes for the geeks.",
"source": "Information on the data source.",
- "links": "<a href='javascript:void(0)'>Link 1</a>, <a href='javascript:void(0)'>Link 2</a>, <a href='javascript:void(0)'>Link 3</a>",
+ "links": {"text": [ "Link 1", "Link 2" ], "links": [ "http://www.charmeck.org", "http://www.charmeck.org" ]},
"style": { "min": 0, "max": 100, "colors": [ "#e0ffd4", "#a5ef63", "#50aa00", "#1f5b10" ] }
}
}
Oops, something went wrong.

0 comments on commit bd4e0d1

Please sign in to comment.