Skip to content

Commit

Permalink
Styling changes mostly.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tobinbradley
tobinbradley committed May 30, 2012
1 parent 1778c1d commit 4c418dd
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 90 deletions.
19 changes: 12 additions & 7 deletions css/style.css
View file
Expand Up @@ -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; }
Expand Down Expand Up @@ -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 */
Expand All @@ -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;}
Expand Down
59 changes: 38 additions & 21 deletions index.html
View file
Expand Up @@ -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 />
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -139,7 +156,7 @@ <h5>Additional Resources</h5>
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>
Expand Down
6 changes: 3 additions & 3 deletions js/map.js
View file
Expand Up @@ -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({
Expand Down Expand Up @@ -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.");
Expand Down Expand Up @@ -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 } });
Expand Down

0 comments on commit 4c418dd

Please sign in to comment.