Fixed css styles, added pluralization widget, removed broken links

tastejs · Sep 20, 2011 · dea0f1c · dea0f1c
1 parent e320dee
commit dea0f1c
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 14 deletions.
diff --git a/todo-example/angularjs/css/app.css b/todo-example/angularjs/css/app.css
@@ -43,6 +43,17 @@ html {
   cursor:pointer;
 }
 
+#todoapp {
+    background: none repeat scroll 0 0 white;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    background: none repeat scroll 0 0 white;
+    margin: 0 auto 40px;
+    padding: 20px;
+    width: 480px;
+}
+
 #todoapp {
   width: 480px;
   margin: 0 auto 40px;
@@ -164,7 +175,20 @@ html {
   *zoom: 1;
   margin-top: 10px;
   color: #777777;
+
+  background: none repeat scroll 0 0 #F4FCE8;
+    border-radius: 0 0 5px 5px;
+    border-top: 1px solid #EDEDED;
+    color: #555555;
+    display: block;
+    line-height: 36px;
+    margin: 20px -20px -20px;
+    overflow: hidden;
+    padding: 0 20px;
 }
+
+
+
   #todo-stats:after {
     content: "\0020";
     display: block;
@@ -183,6 +207,47 @@ html {
   #todo-stats .todo-clear {
     float: right;
   }
+
+  #todoapp #todo-stats {
+    background: none repeat scroll 0 0 #F4FCE8;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top: 1px solid #EDEDED;
+    color: #555555;
+    line-height: 36px;
+    margin-top: 10px;
+    padding: 0 20px;
+}
+
+  #todoapp #todo-stats .todo-clear a {
+	display: block;
+	line-height: 20px;
+	text-decoration: none;
+	-moz-border-radius: 12px;
+	-webkit-border-radius: 12px;
+	-o-border-radius: 12px;
+	-ms-border-radius: 12px;
+	-khtml-border-radius: 12px;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.1);
+	color: #555555;
+	font-size: 11px;
+	margin-top: 8px;
+	padding: 0 10px 1px;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+}
+/* line 136 */
+#todoapp #todo-stats .todo-clear a:hover {
+	background: rgba(0, 0, 0, 0.15);
+	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+}
+
     #todo-stats .todo-clear a {
       color: #777777;
       font-size: 12px;

diff --git a/todo-example/angularjs/index.html b/todo-example/angularjs/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html xmlns:ng="http://angularjs.org/">
+<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
 <head>
   <meta charset="utf-8">
   <title>AngularJS Todo App</title>
@@ -16,7 +16,7 @@ <h1>
             <div id="todo-form">
             </div>
             <form id="todo-form" ng:submit="addTodo()">
-                <input id="new-todo" name="newTodo" placeholder="What needs to be done?" type="text">
+                <input id="new-todo" name="newTodo" my:blur="addTodo()" placeholder="What needs to be done?" type="text">
                 <span class="ui-tooltip-top" ng:show="showHitEnterHint">
                     Press Enter to save this task
                 </span>
@@ -39,13 +39,13 @@ <h1>
             </div>
             <div id="todo-stats">
               <span class="todo-count" ng:show="hasTodos()">
-                <span class="number">{{ remainingTodos() }}</span>
-                <span class="word">items</span> left.
+                <ng:pluralize count="remainingTodos()" when="{'0' : 'No items left.', '1': '1 item left.', 'other' : '{} items left.' }">
+                </ng:pluralize>
               </span>
               <span class="todo-clear" ng:show="hasFinishedTodos()">
                   <a ng:click="clearCompletedItems()">
-                  Clear <span class="number-done">{{ finishedTodos() }}</span>
-                  completed <span class="word-done">item</span>
+                  	Clear <ng:pluralize count="finishedTodos()" when="{'1': '1 completed item', 'other' : '{} completed items' }">
+                  	</ng:pluralize>
                   </a>
               </span>
         </div>
@@ -64,16 +64,14 @@ <h1>
             Rewritten to use <a href="http://angularjs.org">AngularJS </a> by
             <br>
             <a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a>
+            <br>Cleanup, edits: <a href="http://www.linkedin.com/pub/dan-doyon/2/1b0/a83">Dan Doyon</a>
         </p>
     </div>
   <script src="js/booter.js"></script>
-  <script src="lib/angular/angular.js" ng:autobind></script>
+  <script src="lib/angular/angular.min.js" ng:autobind></script>
   <script src="lib/rx/rx.js"></script>
   <script src="lib/rx/rx.angular.js"></script>
-  <script src="js/services.js"></script>
   <script src="js/controllers.js"></script>
-  <script src="js/filters.js"></script>
-  <script src="js/widgets.js"></script>
   <script src="js/directive.js"></script>  
 </body>
 </html>
diff --git a/todo-example/angularjs/js/directive.js b/todo-example/angularjs/js/directive.js
@@ -10,13 +10,12 @@ angular.directive('my:blur', function(expression, compiledElement) {
     };
 });
 
-
 angular.directive("my:focus", function(expression, compiledElement){
   return function(element){
     this.$watch(expression, function(){
-    if(angular.formatter.boolean.parse(expression) && element.length > 0){
-      element[0].focus();
-    } 
+      if(angular.formatter.boolean.parse(expression)){
+        element[0].focus();
+      } 
     }, element);
   };
 });