display toolbar after successful load

2011-03-30 22:46:16 -06:00 · 2011-03-30 22:46:16 -06:00 · 0fe57b067d
--- a/index.html
+++ b/index.html
@ -1,6 +1,10 @@
+<!DOCTYPE html>
 <html>
-<head><title> My Photos </title></head>
-<link type="text/css" href="style.css" rel="stylesheet" />
+<head>
+  <title> My Photos </title>
+  <link type="text/css" href="style.css" rel="stylesheet" />
+  <link rel="icon" type="image/x-icon" href="i/pic_16.png" />
+</head>
 <body>
 <div id="splash">
 <p>This is a little tiny <a href="https://apps.mozillalabs.com">open web application</a>: it can
@ -12,7 +16,7 @@ Click anywhere to begin.
 </p>
 </div>
 <div id="toolbar">
-this is a little toolbar 
+You've got <span id="numpics">...</span> pictures stored.
 </div>
 <div id="aboutus">
  A <a href="http://mozillalabs.com">Mozilla Labs</a> Hack &middot; <a href="http://mozilla.com/privacy">Privacy Policy</a>
--- a/myphotos.js
+++ b/myphotos.js
@ -30,7 +30,7 @@ $(document).ready(function() {
        function() {
            navigator.apps.amInstalled(function(r) {
                if (r) {
-                    alert("you're installed!");
+                    $("#toolbar").animate({ 'margin-top': "0px" });
                } else {
                    var html = $("<p><strong>Step 1:</strong>  You should <a href='#'>click here</a> to install this site into your " +
                                 "browser.</p>");
@ -41,7 +41,7 @@ $(document).ready(function() {
                                {
                                    url: "/manifest.webapp",
                                    onsuccess: function (rv) {
-                                        console.log("awesome");
+                                        $("#toolbar").animate({ 'margin-top': "0px" });
                                    },
                                    onerror: function (errObj) {
                                        var html = $("<p><strong class='sucks'>DAMN!</strong>  Something went horribly wrong [" +
--- a/style.css
+++ b/style.css
@ -38,10 +38,10 @@ a {
 #toolbar {
    font-size: .8em;
    position: fixed;
-    height: 40px;
+    height: 20px;
    margin-top: -40px;
-    width: 600px;
-    margin-left: -300px;
+    width: 300px;
+    margin-left: -150px;
    top: 0px;
    left: 50%;
    background-color: #000;
@ -51,7 +51,9 @@ a {
    border-bottom-left-radius : 10px;
    -moz-border-radius-bottomleft : 10px;
    -webkit-border-bottom-left-radius : 10px;
-
+    text-align: center;
+    padding-top: 15px;
+    padding-bottom: 15px;
 }

 strong.sucks {