Skip to content

Commit fb4b0a6

Browse files
author
Lu Chen
committed
tidy up styling
1 parent 21cbd40 commit fb4b0a6

File tree

5 files changed

+103
-24
lines changed

5 files changed

+103
-24
lines changed

‎css/basic-styles.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ table {
5454
*/
5555

5656
body {
57-
font-family: 'Vista Sans OT', 'Libre Baskerville', serif;
57+
font-family: 'Vista Sans OT', 'Cabin Condensed', serif;
5858
min-height: 740px;
5959
background: #4C66A4;
6060
}
@@ -77,6 +77,7 @@ a {
7777
a:hover,
7878
a:active {
7979
color: #F6B900;
80+
opacity: 0.6;
8081
}
8182

8283
.step {
@@ -193,4 +194,8 @@ html[xmlns] .clearfix {
193194

194195
* html .clearfix {
195196
height: 1%;
197+
}
198+
199+
.preload {
200+
display: none;
196201
}

‎css/slide.css

+57-1
Original file line numberDiff line numberDiff line change
@@ -221,10 +221,52 @@
221221
div.results {
222222
max-width: 600px;
223223
margin: 0 auto;
224-
height: 170px;
224+
height: 180px;
225225
overflow: auto;
226226
}
227227

228+
div.results img {
229+
display: inline-block;
230+
margin: 2px;
231+
border-radius: 5px;
232+
}
233+
234+
.node input {
235+
padding: 10px;
236+
font-size: 20px;
237+
margin: 0px auto 15px auto;
238+
display: block;
239+
margin-top: -40px;
240+
}
241+
242+
.node input {
243+
border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); text-align: center; color: #FFFFFF; background-color: #3093c7;
244+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));
245+
background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
246+
background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
247+
background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
248+
background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
249+
background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
250+
251+
-webkit-animation-name: bluePulse;
252+
-webkit-animation-duration: 2s;
253+
-webkit-animation-iteration-count: infinite;
254+
}
255+
256+
.node input:hover {
257+
cursor: pointer;
258+
border:1px solid #1c5675; background-color: #26759e;
259+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));
260+
background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
261+
background-image: -moz-linear-gradient(top, #26759e, #133d5b);
262+
background-image: -ms-linear-gradient(top, #26759e, #133d5b);
263+
background-image: -o-linear-gradient(top, #26759e, #133d5b);
264+
background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
265+
}
266+
267+
.loading {
268+
background: url('../images/loading.gif') no-repeat center center;
269+
}
228270

229271
/*
230272
(9) facebook plugins
@@ -248,6 +290,10 @@ div.results {
248290
font-size: 30px;
249291
}
250292

293+
#plugins .live {
294+
font-size: 22px;
295+
}
296+
251297

252298
/*
253299
(10) notifications
@@ -298,3 +344,13 @@ div.results {
298344
letter-spacing: 0.1em;
299345
padding: 0 0.2em;
300346
}
347+
348+
/*
349+
Let's add an obnoxious glow! From:
350+
http://www.zurb.com/playground/radioactive-buttons
351+
*/
352+
@-webkit-keyframes bluePulse {
353+
from { background-color: #007d9a; -webkit-box-shadow: 0 0 18px #333; }
354+
50% { background-color: #2daebf; -webkit-box-shadow: 0 0 25px #2daebf; }
355+
to { background-color: #007d9a; -webkit-box-shadow: 0 0 18px #333; }
356+
}

‎images/loading.gif

6.66 KB
Loading

‎index.html

+38-20
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,19 @@
99

1010
<link href="css/basic-styles.css" rel="stylesheet" />
1111
<link href="css/slide.css" rel="stylesheet" />
12-
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
12+
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:400,700' rel='stylesheet' type='text/css'>
1313
<link rel="shortcut icon" href="favicon.ico" />
1414
</head>
1515
<body>
16+
<script>
17+
// To use this demo on your own, you should change these values.
18+
var settings = {
19+
APP_ID : '410001752413776',
20+
EVENT_ID : '314881508624057'
21+
};
22+
</script>
23+
24+
<img src="images/loading.gif" class="preload" />
1625

1726
<!-- This contains all the slides -->
1827
<div id="impress">
@@ -215,11 +224,6 @@ <h1 class="center">the "graph"</h1>
215224
Demo:
216225
<strong>Attendees of the PennApps FB event</strong>
217226
</p>
218-
<input
219-
type="button"
220-
onclick="fillAttendeesOfPennApps();"
221-
value="Show me attendees!"
222-
/>
223227
<pre>FB.api(
224228
'<b>/314881508624057?fields=attending.fields(picture,name)</b>',
225229
function(<b>response</b>) {
@@ -229,6 +233,11 @@ <h1 class="center">the "graph"</h1>
229233
*/
230234
}
231235
);</pre>
236+
<input
237+
type="button"
238+
onclick="fillAttendeesOfPennApps();"
239+
value="Run API Call"
240+
/>
232241
<div id="event-attendees-results" class="results"></div>
233242
<script>
234243
var returnIsErrorAndAlertIfNeeded = function(response) {
@@ -246,18 +255,21 @@ <h1 class="center">the "graph"</h1>
246255
https://developers.facebook.com/tools/explorer?method=GET&path=me%2Fevents
247256
!!! make sure you add user_events to your access token !!!
248257
*/
249-
FB.api('/314881508624057?fields=attending.fields(picture,name)', function(response) {
258+
$('#event-attendees-results').html('').addClass('loading');
259+
FB.api('/' + settings.EVENT_ID + '?fields=attending.fields(picture,name)', function(response) {
250260
if (returnIsErrorAndAlertIfNeeded(response))
251261
return;
252-
var results = $('#event-attendees-results').html('');
262+
var results = $('#event-attendees-results').html('').removeClass('loading');
253263
var attendees = response.attending.data;
254264
var numAdded = 0;
255265
for (var i = 0; numAdded < 60 && i < attendees.length; i++) {
256266
var person = attendees[i];
257-
if (person.picture.data.is_silhouette)
267+
var picture_data = person.picture.data;
268+
if (picture_data.is_silhouette) {
258269
continue;
270+
}
259271
numAdded++;
260-
appendImg(results, person.picture.data.url);
272+
appendImg(results, picture_data.url);
261273
}
262274
});
263275
};
@@ -281,11 +293,6 @@ <h1 class="center">the "graph"</h1>
281293
Demo:
282294
<strong>Recent Music Listens</strong>
283295
</p>
284-
<input
285-
type="button"
286-
onclick="fillMusicListens();"
287-
value="Reveal my music!"
288-
/>
289296

290297
<pre>FB.api(
291298
'<b>/me/music.listens</b>',
@@ -296,14 +303,20 @@ <h1 class="center">the "graph"</h1>
296303
*/
297304
}
298305
);</pre>
306+
<input
307+
type="button"
308+
onclick="fillMusicListens();"
309+
value="Run API Call"
310+
/>
299311
<div id='music-listens-results' class="results"></div>
300312
<script>
301313
var fillMusicListens = function() {
314+
$('#music-listens-results').html('').addClass('loading');
302315
FB.api('/me/music.listens', function(response) {
303316
if (returnIsErrorAndAlertIfNeeded(response))
304317
return;
305-
var results = $('#music-listens-results').html('');
306-
for (var i = 0; i < response.data.length && i < 24; i++) {
318+
var results = $('#music-listens-results').html('').removeClass('loading');
319+
for (var i = 0; i < response.data.length && i < 22; i++) {
307320
FB.api('/' + response.data[i].data.song.id, function(response) {
308321
if (response && response.image && response.image[0] && response.image[0].url)
309322
appendImg(results, response.image[0].url);
@@ -327,12 +340,17 @@ <h1 class="center">the "graph"</h1>
327340
<div class="caption fl">
328341
<h1>plugins</h1>
329342
<h2>copy and paste widgets for easy interaction</h2>
343+
344+
<h2 class="live">
345+
this is live btw, not a screenshot.<br />
346+
go on and add a comment &rarr;
347+
</h2>
330348
</div>
331349
<div
332350
class="fb-comments fr"
333351
data-href="http://ldvchen.github.com/fbapidemo"
334352
data-width="470"
335-
data-num-posts="4"
353+
data-num-posts="3"
336354
data-order-by="reverse_time">
337355
</div>
338356
</div>
@@ -366,7 +384,7 @@ <h1>tl;dr</h1>
366384
<a href="https://developers.facebook.com/docs/concepts/login/">
367385
<b class="accent-yellow">Facebook Login</b>
368386
</a>
369-
= easily rig up a login system
387+
= quickly &amp; easily rig up a login system
370388
</p>
371389
<p>
372390
<a href="https://developers.facebook.com/docs/reference/api/">
@@ -461,7 +479,7 @@ <h2>p.s.</h2>
461479
window.fbAsyncInit = function() {
462480
update_html_from_login_state(false, {});
463481
FB.init({
464-
appId : '410001752413776', // App ID
482+
appId : settings.APP_ID, // App ID
465483
status : true, // check login status
466484
cookie : true, // enable cookies to allow the server to access the session
467485
xfbml : true // parse XFBML

‎todo.txt

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
- JS variables for event
2-
- add CSS animation to links + things
1+
- better icons
2+
- tidy up README
33

0 commit comments

Comments
 (0)