alazyreader
/
nyc-bookstores
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases Wiki Activity

some css and array.length the data

This commit is contained in:
jlord 2013-07-31 00:49:22 -07:00
parent cd5a6910ae
commit 623bc69ae3
2 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/site.css
View File

@ -1,6 +1,6 @@
/* Page Specific CSS */
body {font-family: "Lato"; background: #fff; color: #333; font-size: 16px; border: 52px #F8F8F8 solid; margin: 0px; padding: 20px 20px 200px 20px;}
body {font-family: Lato; background: #fff; color: #333; font-size: 16px; border: 52px #F8F8F8 solid; margin: 0px; padding: 20px 20px 200px 20px;}
h1 {font-size: 80px; font-family: Amatic SC; font-weight: normal; margin: 0px;}
h2 {font-size: 50px; font-family: Amatic SC; font-weight: normal; margin: 11px 0px;}
h3 {font-family: Amatic SC; font-size: 30px; margin: 10px 0px;}
@ -18,11 +18,13 @@ a.button {border: none;}
pre {word-wrap: break-word; padding: 14px; background: #F0F0F0; }
code {font-family: "Consolas", "Ubuntu Mono", monospace; line-height: 22px; font-size: 13px; color: #636363; font-weight: normal;}
.red-text {color: #FD9393;}
#map {height: 400px; max-width: 530px; min-width: 300px; background: #DADADA;}
#map a {border: none;}
.container {margin: 24px 0px;}
#tableFilter {margin: 12px 0px; border: none; border-bottom: 1px solid #333; background-color: transparent; padding: 0px; font-family: Merriweather; color: #333; font-size: 13px; height: 22px;}
#tableFilter {margin: 12px 0px; border: none; border-bottom: 1px solid #333; background-color: transparent; padding: 0px; font-family: Lato; color: #333; font-size: 13px; height: 22px;}
::selection {background: #E5FF1D;}
::-moz-selection {background: #E5FF1D;}

45
index.html
View File

@ -42,6 +42,7 @@
</div>
<div id="info" class="container">
<h3>Contribute!</h3>
<div id="theNumberofSpots"></div>
<p>This website is hooked up to <a href="https://docs.google.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c#gid=0" target="_blank">this Google Spreadsheet</a>, which I've shared, so click and add your favorite hack spots to the bottom of the list! For the map you'll need to <strong>get the lat and long</strong> of the spot, you can get that <a href="http://www.latlong.net/" target="_blank">here</a>. The locating of these places is helpful, so please try to fill out all the columns.</p>
<h3>Info</h3>
@ -85,24 +86,28 @@
{{/rows}}
</script>
<script id="theNumberofSpots" type="text/html">
<p><strong><span class="red-text">{{numberOfSpots}}</span> hack spots strong!</p>
</script>
<script id="selectedSpot" type="text/html">
{{#rows}}
<h4 class="fauxButton">SELECTED SPOT</h4>
<h2>{{name}}</h2>
<p class="colorText">{{address}}, {{city}}, {{state}}
<ul>
<li><span class="category">Wifi:</span> {{wifipassword}}</li>
<li><span class="category">Outlets:</span> {{outlets}}</li>
<li><span class="category">Couch:</span> {{couch}}</li>
<li><span class="category">Large Table:</span> {{largetable}}</li>
<li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li>
<li><span class="category">Brewing:</span> {{brewing}}</li>
</ul>
<ul>
<li><a href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a></li>
<li><a href="http://www.yelp.com/search?find_desc={{name}},{{city}},{{state}}" target="_blank">Find on Yelp</a></li>
</ul>
{{/rows}}
{{#rows}}
<h4 class="fauxButton">SELECTED SPOT</h4>
<h2>{{name}}</h2>
<p class="colorText">{{address}}, {{city}}, {{state}}
<ul>
<li><span class="category">Wifi:</span> {{wifipassword}}</li>
<li><span class="category">Outlets:</span> {{outlets}}</li>
<li><span class="category">Couch:</span> {{couch}}</li>
<li><span class="category">Large Table:</span> {{largetable}}</li>
<li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li>
<li><span class="category">Brewing:</span> {{brewing}}</li>
</ul>
<ul>
<li><a href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a></li>
<li><a href="http://www.yelp.com/search?find_desc={{name}},{{city}},{{state}}" target="_blank">Find on Yelp</a></li>
</ul>
{{/rows}}
</script>
<script type="text/javascript">
@ -212,6 +217,12 @@
$('#selectedSpot').css("display", "none")
})
var numberOfSpots = gData.length
var theNumberofSpots = ich.theNumberofSpots({
numberOfSpots: numberOfSpots
})
$('#theNumberofSpots').html(theNumberofSpots)
function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) {
geoJSON.forEach(function (d) {
if (d.properties["marker-color"] === highlightColor) {