updating CSS style. Fixing ordering.

examples/todos/index.html

@@ -21,7 +21,7 @@
 
         <div id='create-todo'>
           <input id='new-todo' placeholder='What needs to be done?' type='text' />
-          <span class='ui-tooltip-top'>Press Enter to create this task</span>
+          <span class='ui-tooltip-top' style='display:none;'>Press Enter to add this task</span>
         </div>
 
         <div id='todos'>

examples/todos/javascripts/todos.js

@@ -22,8 +22,13 @@ $(function(){
       });
     },
 
+    nextOrder: function() {
+      if (!this.length) return 1;
+      return this.last().get('order') + 1;
+    },
+
     comparator: function(todo) {
-      return todo.id;
+      return todo.get('order');
     },
 
     parse: function(resp) {
@@ -162,7 +167,8 @@ $(function(){
       if (e.keyCode == 13) {
         Todos.create({
           content: this.newInput.val(),
-          done: false
+          order:   Todos.nextOrder(),
+          done:    false
         });
         this.newInput.val('');
       }
@@ -177,7 +183,7 @@ $(function(){
 
       if (this.newInput.val() !== "" && this.newInput.val() !== this.newInput.attr('placeholder')) {
         this.tooltipTimeout = setTimeout(function(){
-          tt.fadeIn();
+          tt.show().fadeIn();
         }, 1000);
       }
     },

examples/todos/screen.css

@@ -76,13 +76,13 @@ body {
 /* line 17 */
 #todoapp {
   width: 480px;
-  margin: 40px auto;
+  margin: 0 auto 40px;
   background: white;
   padding: 20px;
-  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px 0;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px 0;
-  -o-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px 0;
-  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px 0;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
+  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
 }
 /* line 24 */
 #todoapp .title h1 {
@@ -122,7 +122,6 @@ body {
   width: 170px;
   left: 50%;
   margin-left: -85px;
-  opacity: 0;
 }
 /* line 54 */
 #todoapp .content ul#todo-list {
@@ -249,11 +248,11 @@ body {
 #credits {
   width: 520px;
   margin: 30px auto;
-  color: #777777;
+  color: #999;
   text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
   text-align: center;
 }
 /* line 133 */
 #credits a {
-  color: #336699;
+  color: #888;
 }