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

some text edits

Browse Source
This commit is contained in:
jlord 2013-07-30 10:48:52 -07:00
parent 5cac3521e7
commit b65b285242
3 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/site.css
View File

@ -1,7 +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, h2, h3, h4, h5, h6 {}
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;}
@ -60,18 +59,11 @@ ul.nav li a:hover {border-bottom: 1px #FD9393 solid;}
.hideRow {display: none;} .hideRow {display: none;}
.selectedRow {color: #FF4C0D;} .selectedRow {color: #FF4C0D;}
/*@media (max-width: 1024px) {
body {border: 20px #F8F8F8 solid; margin: 0px; padding: 20px 20px 80px 20px; }
#rightSide {max-width: 100%; float: left;}
#map {max-width: 100%;}
}*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) { @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) {
body {background: #ff00ff;}
body {border: 20px #F8F8F8 solid; margin: 0px; padding: 20px 20px 80px 20px;} body {border: 20px #F8F8F8 solid; margin: 0px; padding: 20px 20px 80px 20px;}
#tableFilter, .clear, .resetMap {display: none;} #tableFilter, .clear, .resetMap {display: none;}
#wrapper {max-width: 460px; padding-top: 20px;} #wrapper {max-width: 460px; padding-top: 20px;}
#hackSpotsTable, #map {min-width: 224px;} #hackSpotsTable, #map {min-width: 224px;}
} }

16
index.html
View File

@ -2,16 +2,16 @@
<head> <head>
<title>Hack Spots</title> <title>Hack Spots</title>
<script type="text/javascript" src="js/ICanHaz.js"></script> <script type="text/javascript" src="js/ICanHaz.js"></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script> <script type="text/javascript" src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script>
<script src='js/jquery.js '></script> <script type="text/javascript" src='js/jquery.js '></script>
<script type="text/javascript" src='js/tabletop.js'></script> <script type="text/javascript" src='js/tabletop.js'></script>
<script type="text/javascript" src='js/sheetsee.js'></script> <script type="text/javascript" src='js/sheetsee.js'></script>
<link rel="shortcut icon" href="https://raw.github.com/jlord/hack-spots/master/favico.png"/> <link rel="shortcut icon" href="https://raw.github.com/jlord/hack-spots/master/favico.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' /> <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic'>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700'>
<link media="screen" rel="stylesheet" type="text/css" href="css/style.css"> <link media="screen" rel="stylesheet" type="text/css" href="css/style.css">
<link media="screen" rel="stylesheet" type="text/css" href="css/site.css"> <link media="screen" rel="stylesheet" type="text/css" href="css/site.css">
</head> </head>
@ -44,9 +44,9 @@
<h3>Info</h3> <h3>Info</h3>
<p>When I'm visiting a new city I'd like to know which coffee shops have the best vibes, great coffee and are good for hunkering down and having a good hack. Yelp will tell you where the Starbucks is and Foursquare will tell you where your friend's have <em>been</em> - but did they like it and was it a grab in go place or a hack place? Plus, what about the people I don't follow on Foursquare or who can't check-in when in other countries?</p> <p>When I'm visiting a new city I'd like to know which coffee shops have the best vibes, great coffee and are good for hunkering down and having a good hack. Yelp will tell you where the Starbucks is and Foursquare will tell you where your friend's have <em>been</em> - but did they like it and was it a grab in go place or a hack place? Plus, what about the people I don't follow on Foursquare or who can't check-in when in other countries?</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 with friends. They add their favorite spots and every visitor to the site gets the latest data.</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!. They add their favorite spots and every visitor to the site gets the latest data.</p>
<p>Besides being a list I've wanted to have, it's a fantastic (or I think so) way of using <a href="http://jlord.github.io/sheetsee.js" target="_blank">sheetsee.js</a>, which is a little JavaScript library I've been working on. Sheetsee.js helps you hook a website to a Google spreadsheet that you then use to create or collaborate on data. </p> <p>Besides being a list I've wanted to have, it's a fantastic (or I think so) way of using <a href="http://jlord.github.io/sheetsee.js" target="_blank">sheetsee.js</a>, which is a little JavaScript library I've been working on. Sheetsee.js helps you hook a Google Spreadsheet (awesome for data and collaboration!) to a website to make data more visual (maps, tables, charts).</p>
</div> </div>
</div><!-- end wrapper --> </div><!-- end wrapper -->
@ -216,9 +216,5 @@
} }
</script> </script>
<script type="text/javascript">
// console.log(gData)
</script>
</body> </body>
</html> </html>

14
readme.md
View File

@ -1,11 +1,21 @@
# Hi! # Hi!
I'm refining this a bit -- I have an idea -- but please, file some issues, fork it and set it up for yourself and let me know how it goes!
![screenshot](https://raw.github.com/jlord/hack-spots/gh-pages/img/hackspotsss.png) ![screenshot](https://raw.github.com/jlord/hack-spots/gh-pages/img/hackspotsss.png)
This is the code for a website that shows the spots myself, my friends (or Twitter friends) have found to be excelent hacking spots around the whole wide world. This is the code for a website that shows the spots myself, my friends (or Twitter friends) have found to be excelent hacking spots around the whole wide world.
### Fork -n- Go!
In a bit I'll do some more refining (and documentation) - but here's a fun fact:
This repo only has a **gh-pages** branch, which means as soon as you **fork** it, you have a hosted and live version of it yourself!
Next, create a spreadsheet with the same column headers as [the original](https://docs.google.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c#gid=0).
Click on the `index.html` file, click edit and change **line 107**. Replace the existing spreadsheet URL key with your spreadsheet's key. You'll find that by clicking (in Google Spreadsheets) File > Publish to the Web > Start Publishing, it will then display the key in a window. ![get key](https://raw.github.com/jllord/sheetsee-cache/master/img/key.png)
Commit those changes and **LIKE WOAH** you now have a version of this website hooked to a spreadsheet that you can distrubute however you'd like.
## But How? ## But How?
A Google Spreadsheet holds all the data and it is connected to this website using the goodies in [sheetsee.js](http://www.github.com/jlord/sheetsee.js). Everytime you visit the website, you'll have the most up to date data that has been entered into the spreadsheet. A Google Spreadsheet holds all the data and it is connected to this website using the goodies in [sheetsee.js](http://www.github.com/jlord/sheetsee.js). Everytime you visit the website, you'll have the most up to date data that has been entered into the spreadsheet.