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

some css and array.length the data

Browse Source
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 */ /* 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;} 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;} 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;} 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; } 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;} 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 {height: 400px; max-width: 530px; min-width: 300px; background: #DADADA;}
#map a {border: none;} #map a {border: none;}
.container {margin: 24px 0px;} .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;} ::selection {background: #E5FF1D;}
::-moz-selection {background: #E5FF1D;} ::-moz-selection {background: #E5FF1D;}

45
index.html
View File

@ -42,6 +42,7 @@
</div> </div>
<div id="info" class="container"> <div id="info" class="container">
<h3>Contribute!</h3> <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> <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> <h3>Info</h3>
@ -85,24 +86,28 @@
{{/rows}} {{/rows}}
</script> </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"> <script id="selectedSpot" type="text/html">
{{#rows}} {{#rows}}
<h4 class="fauxButton">SELECTED SPOT</h4> <h4 class="fauxButton">SELECTED SPOT</h4>
<h2>{{name}}</h2> <h2>{{name}}</h2>
<p class="colorText">{{address}}, {{city}}, {{state}} <p class="colorText">{{address}}, {{city}}, {{state}}
<ul> <ul>
<li><span class="category">Wifi:</span> {{wifipassword}}</li> <li><span class="category">Wifi:</span> {{wifipassword}}</li>
<li><span class="category">Outlets:</span> {{outlets}}</li> <li><span class="category">Outlets:</span> {{outlets}}</li>
<li><span class="category">Couch:</span> {{couch}}</li> <li><span class="category">Couch:</span> {{couch}}</li>
<li><span class="category">Large Table:</span> {{largetable}}</li> <li><span class="category">Large Table:</span> {{largetable}}</li>
<li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li> <li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li>
<li><span class="category">Brewing:</span> {{brewing}}</li> <li><span class="category">Brewing:</span> {{brewing}}</li>
</ul> </ul>
<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="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> <li><a href="http://www.yelp.com/search?find_desc={{name}},{{city}},{{state}}" target="_blank">Find on Yelp</a></li>
</ul> </ul>
{{/rows}} {{/rows}}
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
@ -212,6 +217,12 @@
$('#selectedSpot').css("display", "none") $('#selectedSpot').css("display", "none")
}) })
var numberOfSpots = gData.length
var theNumberofSpots = ich.theNumberofSpots({
numberOfSpots: numberOfSpots
})
$('#theNumberofSpots').html(theNumberofSpots)
function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) { function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) {
geoJSON.forEach(function (d) { geoJSON.forEach(function (d) {
if (d.properties["marker-color"] === highlightColor) { if (d.properties["marker-color"] === highlightColor) {