updated to fit new design

removed ie.css removed links to friends increased limit of friends, photos and likes
gsathya · Sep 13, 2011 · 7943114 · 7943114
1 parent f889f90
commit 7943114
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 69 deletions.
diff --git a/exampleapp.py b/exampleapp.py
@@ -98,7 +98,7 @@ def fb_call(call, args=None):
 
 
 def get_home():
-    return 'https://' + request.host + '/'
+    return 'http://' + request.host + '/'
 
 
 @app.route('/')
@@ -110,11 +110,11 @@ def index():
         me = fb_call('me', args={'access_token': access_token})
         app = fb_call(FBAPI_APP_ID, args={'access_token': access_token})
         likes = fb_call('me/likes',
-                        args={'access_token': access_token, 'limit': 11})
+                        args={'access_token': access_token, 'limit': 4})
         friends = fb_call('me/friends',
-                          args={'access_token': access_token, 'limit': 3})
+                          args={'access_token': access_token, 'limit': 4})
         photos = fb_call('me/photos',
-                         args={'access_token': access_token, 'limit': 11})
+                         args={'access_token': access_token, 'limit': 16})
 
         redir = get_home() + 'close/'
         POST_TO_WALL = ("https://www.facebook.com/dialog/feed?redirect_uri=%s&"

diff --git a/static/base.css b/static/base.css
@@ -6,7 +6,6 @@
 /* =global elements
 --------------------------------------------- */
 body {
-  border: 1px solid #b3b3b3;
   color: #999;
   font: 14px/1.5em "Lucida Grande", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -26,7 +25,7 @@ a:hover, a:active {
 }
 
 h1 {
-  color: #1c1c1c;
+  color: #656565;
   font-family: "Helvetica Neue", Arial, sans-serif;
   font-size: 18px;
   font-weight: normal;
@@ -37,6 +36,9 @@ h1 {
 /* =header
 --------------------------------------------- */
 header {
+  border-left: 1px solid #b3b3b3;
+  border-right: 1px solid #b3b3b3;
+  border-top: 1px solid #b3b3b3;
   font-size: 11px;
   padding: 24px 18px;
 }
@@ -47,13 +49,16 @@ header h1 {
   padding: 2px 0 8px;
 }
 
-header img + div {
+header #picture + div {
   margin-left: 82px;
 }
 
-header img {
+header #picture {
   float: left;
   margin-right: 18px;
+  width: 64px;
+  height: 64px;
+  overflow: hidden;
 }
 
 header .tagline {
@@ -139,7 +144,7 @@ header .tagline {
   display: inline-block;
   font: bold 14px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
   line-height: 32px;
-  padding: 0 40px;
+  padding: 0 25px;
   text-decoration: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, .2);
 }
@@ -149,6 +154,7 @@ header .tagline {
 --------------------------------------------- */
 #get-started {
   background: url("/static/images/get-started-bg.jpg");
+  border: 1px solid #353d4f;
   height: 105px;
   text-align: center;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .29);
@@ -183,8 +189,8 @@ header .tagline {
 #guides ul li,
 #samples .list {
   float: left;
-  margin-right: 9px;
-  width: 170px;
+  margin-right: 7px;
+  width: 172px;
 }
 
 #guides ul li p,
@@ -195,6 +201,11 @@ header .tagline {
 
 /* =guides
 --------------------------------------------- */
+#guides {
+  border-bottom: 1px solid #b3b3b3;
+  border-left: 1px solid #b3b3b3;
+  border-right: 1px solid #b3b3b3;
+}
 #guides ul li {
   font-size: 11px;
   list-style: none;
@@ -239,21 +250,10 @@ header .tagline {
 --------------------------------------------- */
 #samples {
   background-image: url("/static/images/samples-bg.png");
-  /*
-   * original
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 1.5%, rgba(0, 0, 0, 0) 100%), url("/static/images/samples-bg.png");
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .25)), color-stop(1.5%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), url("/static/images/samples-bg.png");
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 1.5%, rgba(0, 0, 0, 0) 100%), url("/static/images/samples-bg.png");
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 1.5%, rgba(0, 0, 0, 0) 100%), url("/static/images/samples-bg.png");
-  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 1.5%, rgba(0, 0, 0, 0) 100%), url("/static/images/samples-bg.png");
-  background-image: linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 1.5%, rgba(0, 0, 0, 0) 100%), url("/static/images/samples-bg.png");
-  */
-
-  /* concept */
-  border-bottom: 1px solid #ccc;
-  -moz-box-shadow: 0 0 13px rgba(0, 0, 0, .2) inset;
-  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2) inset;
-  box-shadow: 0 0 3px rgba(0, 0, 0, .2) inset;
+  border-bottom: 1px solid #dadada;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  border-top: 1px solid #fff;
 }
 
 #samples h3 {
@@ -266,56 +266,55 @@ header .tagline {
 }
 
 #samples ul {
+  background: url("/static/images/picture-sketch.png") 4px 8px;
   background-repeat: repeat-y;
-  height: 198px;
+  height: 161px;
   overflow: hidden;
   padding-top: 8px;
 }
 
-#samples ul.photos,
-#samples ul.friends {
-  background: none;
-}
-
 #samples li {
-  background-repeat: no-repeat;
-  background-position: top left;
   color: #7c7c7c;
   display: block;
   font-size: 11px;
   font-weight: bold;
+  height: 32px;
   line-height: 32px;
   margin-bottom: 11px;
+  overflow: hidden;
   padding-left: 36px;
+  position: relative;
 }
 
-#samples ul.friends li {
-  padding-left: 54px;
-  line-height: 50px;
+#samples .list img {
+  height: auto;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 32px;
 }
 
-#samples ul.things li {
-  padding-left: 12px;
-  line-height: 18px;
-  white-space:nowrap;
-}
-
-#samples ul.photos li {
-  margin-left: 0;
-  height: 82px;
+#samples .inline img {
+  position: static;
 }
 
 #samples .inline ul {
   background-repeat: repeat;
 }
+
 #samples .inline li {
   float: left;
-  height: 32px;
   margin-left: 12px;
   overflow: hidden;
   padding: 0;
+  width: 32px;
 }
 
+#samples .inline li.first-column {
+  margin-left: 0;
+}
+
+
 /* ------------------------------------------ */
 
 /* =clearfix

diff --git a/static/ie.css b/static/ie.css
diff --git a/templates/index.html b/templates/index.html
@@ -17,21 +17,31 @@
     <meta content="" property="og:site_name" />
     <meta content="{{appId}}" property="fb:app_id" />
     <script type="text/javascript">function popup(pageURL, title,w,h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)-(h/2); var targetWin = window.open( pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left ); }</script>
+    <!--[if IE]>
+      <script>
+        var tags = ['header', 'section'];
+        while(tags.length)
+          document.createElement(tags.pop());
+      </script>
+    <![endif]-->
   </head>
   <body>
     <header class="clearfix">
       <!-- By passing a valid access token here, we are able to display -->
       <!-- the user's images without having to download or prepare -->
       <!-- them ahead of time -->
-      <a href="#" onclick="window.open('http://www.facebook.com/{{me.id}}')">
-        <img height="64" src="https://graph.facebook.com/me/picture?type=large&amp;access_token={{token}}" />
-      </a>
+      <p id="picture">
+        <img
+          src="https://graph.facebook.com/me/picture?type=large&access_token={{token}}"
+          height="64">
+      </p>
       <div>
-        <h1>Welcome,
-        <strong>{{me.name}}</strong></h1>
-        <p class="tagline">This app is named {{app.name}}</p>
+        <h1>Welcome, <strong>{{me.name}}</strong></h1>
+        <p class="tagline">
+          This is your app
+          <a href="{{app.link}}">{{app.name}}</a>
+        </p>
         <div id="share-app">
-          <p>Share your app:</p>
           <ul>
             <li>
               <a class="facebook-button" href="#" onclick="popup('{{POST_TO_WALL}}', 'Post to Wall', 580, 400);">
@@ -50,38 +60,46 @@ <h1>Welcome,
     <section id="get-started">
       <p>Welcome to your Facebook app, running on
       <span>heroku</span>!</p>
-      <a class="button" href="http://devcenter.heroku.com/articles/facebook">Learn how to edit this app</a>
+      <a class="button" href="http://devcenter.heroku.com/articles/facebook">Learn How to Edit This App</a>
     </section>
     <section class="clearfix" id="samples">
       <h1>Examples of the Facebook Graph API</h1>
       <div class="list">
         <h3>A few of your friends</h3>
         <ul class="friends">{% for friend in friends.data %}
-        <li style="background-image: url('https://graph.facebook.com/{{friend.id}}/picture');">
-          <a href="#" onclick="window.open('http://www.facebook.com/{{friend.id}}')">{{friend.name}}</a>
+        <li>
+          <img src="https://graph.facebook.com/{{friend.id}}/picture" alt="{{friend.name}}">
+          {{friend.name}}
         </li>{% endfor %}</ul>
       </div>
       <div class="list inline">
         <h3>Recent photos</h3>
-        <ul class="photos">{% for photo in photos.data %}
-        <li>
-          <a href="#" onclick="window.open('http://www.facebook.com/{{photo.id}}')">
-            <img src="{{photo.source}}" width="163" />
-          </a>
-        </li>{% endfor %}</ul>
+        <ul class="photos">
+          {% for photo in photos.data %}
+            {% if loop.index0%4 == 0 %}
+          <li class="first-column">
+            {% else %}
+          <li>
+            {% endif %}
+            <img src="{{photo.source}}" alt="{{photo.name}}">
+          </li>
+          {% endfor %}
+        </ul>
       </div>
       <div class="list">
         <h3>Things you like</h3>
         <ul class="things">{% for like in likes.data %}
         <li>
-          <a href="#" onclick="window.open('http://www.facebook.com/{{like.id}}')">{{like.name}}</a>
+          <img src="https://graph.facebook.com/{{like.id}}/picture?type=square" alt="{{like.name}}">
+          {{like.name}}
         </li>{% endfor %}</ul>
       </div>
       <div class="list">
         <h3>Friends using this app</h3>
         <ul class="friends">{% for friend in app_friends %}
         <li style="background-image: url('{{friend.pic_square}}');">
-          <a href="#" onclick="window.open('http://www.facebook.com/{{friend.uid}}')">{{friend.name}}</a>
+          <img src="https://graph.facebook.com/{{friend.uid}}/picture?type=square" alt="{{friend.name}}">
+          {{friend.name}}
         </li>{% endfor %}</ul>
       </div>
     </section>