Permalink
Browse files

Styling changes mostly.

  • Loading branch information...
1 parent 1778c1d commit 4c418dd09c2baa9dfa932cab7e52aec90de5b36d @tobinbradley committed May 30, 2012
Showing with 129 additions and 90 deletions.
  1. +12 −7 css/style.css
  2. +38 −21 index.html
  3. +3 −3 js/map.js
  4. +41 −42 js/metrics.json
  5. +31 −13 js/script.js
  6. +4 −4 php/report.php
View
@@ -253,15 +253,18 @@ footer { position: absolute; bottom: 0; left: 20px; right: 20px; height: 10px; o
/* header */
#title { float: left; }
-#top-links { float: right; position: relative; top: 28px;}
+#top-links { float: right; position: relative; top: 27px; }
+#top-links div { display: inline-block; position: relative; }
+#top-links a { position: relative; }
#title a { font-size: 26px; color: #4B58A6; margin: 0; font-weight: normal; }
#title a:hover { text-decoration: none; }
.ie7 header hr { position: relative; top: -7px; }
header .ui-icon {
background-image: url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/flick/images/ui-icons_0073ea_256x240.png");
+ float: left;
+ margin: 0 2px;
}
-
/* search area */
#search { margin: 0 0 15px 0; text-align: center; }
#searchbox { padding: 3px; border:1px solid #b2b2b2; color: #7C7C7C; }
@@ -289,15 +292,15 @@ input::-moz-placeholder, textarea::-moz-placeholder { color: #7C7C7C; }
.measureDetails { padding-bottom: 10px; min-height: 496px; }
.measureDetails h4 { margin: 12px 0 0; font-size: 16px; }
.measureDetails h5 { margin: 12px 0 0; font-size: 15px; }
-.quickLink { background: url("../img/quicklink.png") center right no-repeat; padding: 0 13px 0 0; }
+/*.quickLink { background: url("../img/quicklink.png") center right no-repeat; padding: 0 13px 0 0; }*/
#selectedNeighborhood { text-align: center; margin: 5px 0;}
#details_chart { text-align: center; }
-.measureDetails div img { max-width: 90%; }
-#permalink a { font-size: 10px; }
#indicator_auxchart { margin: 0; text-align: center; }
-#indicator_quicklinks h4 { padding-left: 0; }
#social_media { text-align: center; }
-aside hr { margin-top: 40px; }
+#sidebar-footer hr { margin-top: 40px; }
+#selected-accordion { margin-top: 20px; }
+#selected-accordion div { padding-bottom: 15px; }
+#metricslist { padding-left: 10px; }
/* Metrics list */
@@ -314,6 +317,8 @@ aside hr { margin-top: 40px; }
/* jquery ui tweaks */
.ui-widget { font-size: 1em !important; font-family: Helmet, Freesans, sans-serif !important;}
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #4B58A6 !important; }
+.ui-accordion-content a, .ui-accordion-content a:link, .ui-accordion-content a:visited { color: #4B58A6 !important; }
.ui-autocomplete-loading { background: transparent url('../img/ui-anim_basic_16x16.gif') right no-repeat !important }
.ui-autocomplete .ui-menu-item { padding-left: 10px }
.ui-autocomplete { overflow: auto; overflow-y: auto; overflow-x: hidden; font-size: 0.9em; font-weight: normal; max-height: 400px; box-shadow: 2px 2px 4px #666;}
View
@@ -40,16 +40,19 @@
</head>
<body>
-
- <div id="toplinks" style="position: absolute; top: 0; left: 0; right: 20px; margin: 0; text-align: right; color: #366CB3; display: none; "> City of Charlotte &bull; Mecklenburg County &bull; UNCC &bull; Fusion Tables &bull; Get the Code</div>
<div id="container">
<header>
<div id="title">
<a href="javascript:void(0)" class="showWelcome">Quality of Life Dashboard (beta)</a>
</div>
<div id="top-links" class="screen-only mute">
- <span class="ui-icon ui-icon-print alignleft" style="position: relative; top: -1px;"></span> <a href="javascript:void(0)" id="report">Print</a>
+ <div>
+ <a href="javascript:void(0)" id="report"><span class="ui-icon ui-icon-print"></span> Print Report</a>
+ </div>
+ <div>
+ <a href="javascript:void(0)" id="download_data"><span class="ui-icon ui-icon-circle-arrow-s"></span> Download Data</a>
+ </div>
</div>
<div style="clear:both"></div>
<hr />
@@ -59,11 +62,10 @@
<div id="map">
<div id="maptools-top" class="screen-only">
<span id="currentlyShowing"><strong>Currently Showing: </strong></span> <select id="mapIndicie" class=""></select>
-
</div>
<div id="map-canvas"></div>
<div id="maptools-bottom" class="screen-only">
- <div id="opacity_slider"></div>
+ <div id="opacity_slider"></div>
</div>
<div id="legend" class="hidden"></div>
</div>
@@ -74,36 +76,51 @@
The <strong>Quality of Life Dashboard</strong> is your gateway to the 2012 Neighborhood Quality of Life Study.
It is designed to help officials and residents assess the health of Charlotte and Mecklenburg County neighborhoods.
</p>
- <p>
+
+ <p style="padding-bottom: 10px;">
You can <strong>begin by searching for an address below</strong> (<a href="javascript:void(0)" class="searchhelp">help</a>), such as <em>700 N Tryon</em>, or by interacting with the map.
- A complete <strong>list of variables</strong> collected in this study is available <a href="javascript:void(0)" class="showMetricslist">here</a>.
</p>
</div>
<div id="search" class="screen-only">
+ <p style="padding-bottom: 10px;">
+ <strong>View Variables</strong><br />
+ <a href="javascript:void(0)" class="showMetricslist" rel="character">Character</a> &bull;
+ <a href="javascript:void(0)" class="showMetricslist" rel="green">Green</a> &bull;
+ <a href="javascript:void(0)" class="showMetricslist" rel="health">Health</a> &bull;
+ <a href="javascript:void(0)" class="showMetricslist" rel="education">Education</a> &bull;
+ <a href="javascript:void(0)" class="showMetricslist" rel="safety">Safety</a> &bull;
+ <a href="javascript:void(0)" class="showMetricslist" rel="housing">Housing</a> &bull;
+ <a href="javascript:void(0)" class="showMetricslist" rel="economics">Economics</a>
+ </p>
<input id="searchbox" class="inset" type="textbox" placeholder='Start here! Try "700 N Tryon"' x-webkit-speech speech />
<p class="mute"><span id="gpsarea" class="hidden">
<a href="javascript:void(0)" id="gps">Find My Location</a> &bull; </span>
- <a href="javascript:void(0)" class="showMetricslist">Show All Variables</a> &bull;
<a href="javascript:void(0)" class="searchhelp">Help</a>
</p>
+
</div>
- <div id="selected-summary" class="hidden">
+ <div id="selected-summary" class="hidden">
+ <hr />
<div class="measureDetails">
<h4 id="selectedNeighborhood">Neighborhood</h4>
<div id='details_chart' class="chart"></div>
<div id="indicator_auxchart"></div>
- <h5>What is this Indicator?</h5>
- <div id="indicator_description"></div>
- <h5>Why is this Important?</h5>
- <div id="indicator_why"></div>
- <div id="indicator_quicklinks"></div>
- <h5>Technical Notes</h5>
- <div id="indicator_technical"></div>
- <h5>Data Source</h5>
- <div id="indicator_source"></div>
- <h5>Additional Resources</h5>
- <div id="indicator_resources"></div>
+
+ <div id="selected-accordion">
+ <h3><a href="#">What is this Indicator?</a></h3>
+ <div id="indicator_description"></div>
+ <h3><a href="#">Why is this Important?</a></h3>
+ <div id="indicator_why"></div>
+ <h3><a href="#">Related Variables</a></h3>
+ <div id="indicator_quicklinks"></div>
+ <h3><a href="#">Technical Notes</a></h3>
+ <div id="indicator_technical"></div>
+ <h3><a href="#">Data Source</a></h3>
+ <div id="indicator_source"></div>
+ <h3><a href="#">Additional Resources</a></h3>
+ <div id="indicator_resources"></div>
+ </div>
</div>
</div>
<div id="metricslist" class="hidden"></div>
@@ -139,7 +156,7 @@ <h4 id="selectedNeighborhood">Neighborhood</h4>
You can print a formatted version of your current browser by using your browser's print command.
You can also print out a PDF report by selecting a neighborhood and metrics below.
</p>
- <h4>Select Neighborhood</h4>
+ <h4>Select Neighborhood Profile Area</h4>
<p>
<select id="report_neighborhood" name="n"></select>
</p>
View
@@ -78,7 +78,7 @@ function mapInit() {
*/
function addMarker(lon, lat, featuretype, label) {
// remove old marker
- if (marker !== null) marker.setMap(null);
+ if (marker != null) marker.setMap(null);
// add new marker
marker = new google.maps.Marker({
@@ -115,7 +115,7 @@ function performIntersection(lat, lon) {
assignData(data.table);
updateData(FTmeta[$("#mapIndicie option:selected").val()]);
styleFusionTable(FTmeta[$("#mapIndicie option:selected").val()]);
- addMarker(lon, lat, 0, "<h3>Neighborhood " + activeRecord.ID + "</h3>");
+ addMarker(lon, lat, 0, "<h3>Neighborhood " + activeRecord.ID + "</h3>");
}
else {
//console.log("Unable to communicate with Fusion Tables.");
@@ -182,7 +182,7 @@ function styleFusionTable(measure) {
mapStyleJSON.push( { where: measure.field + " > " + value, polygonOptions: { fillColor: measure.style.colors[index], fillOpacity: theOpacity } });
}
else if (index === 0) {
- mapStyleJSON.push( { where: measure.field + " <= " + measure.style.breaks[index + 1], polygonOptions: { fillColor: measure.style.colors[index], fillOpacity: theOpacity } });
+ mapStyleJSON.push( { where: measure.field + " >= 0 and " + measure.field + " <= " + measure.style.breaks[index + 1], polygonOptions: { fillColor: measure.style.colors[index], fillOpacity: theOpacity } });
}
else {
mapStyleJSON.push({ where: measure.field + " > " + value + " and " + measure.field + " <= " + measure.style.breaks[index + 1], polygonOptions: { fillColor: measure.style.colors[index], fillOpacity: theOpacity } });
Oops, something went wrong.

0 comments on commit 4c418dd

Please sign in to comment.