|
1 | 1 | <!doctype html> |
2 | 2 | <html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org"> |
| 3 | +<!doctype html> |
| 4 | +<html lang="en"> |
3 | 5 | <head> |
4 | | - <meta charset="utf-8"> |
5 | | - <title>AngularJS Todo App</title> |
6 | | - <link rel="stylesheet" href="css/app.css"/> |
| 6 | + <meta charset="utf-8"> |
| 7 | + <title>AngularJS - TodoMVC</title> |
| 8 | + <link rel="stylesheet" href="css/app.css"> |
| 9 | + <link rel="stylesheet" href="css/overwrite.css"> |
7 | 10 | </head> |
8 | 11 | <body> |
9 | | - <div ng:controller="App.Controllers.TodoController" id="todoapp"> |
10 | | - <div class="title"> |
11 | | - <h1> |
12 | | - Todos |
13 | | - </h1> |
14 | | - </div> |
15 | | - <div class="content"> |
16 | | - <div id="todo-form"> |
17 | | - </div> |
| 12 | + <div ng:controller="App.Controllers.TodoController" id="todoapp"> |
| 13 | + <header> |
| 14 | + <h1>Todos</h1> |
18 | 15 | <form id="todo-form" ng:submit="addTodo()"> |
19 | | - <input id="new-todo" name="newTodo" my:blur="addTodo()" placeholder="What needs to be done?" type="text"> |
20 | | - <span class="ui-tooltip-top" ng:show="showHitEnterHint"> |
21 | | - Press Enter to save this task |
22 | | - </span> |
| 16 | + <input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?"> |
23 | 17 | </form> |
24 | | - <div id="todos"> |
25 | | - <ul id="todo-list"> |
26 | | - <li class="todo" ng:class="'editing-' + todo.editing + ' done-' + todo.done" ng:repeat="todo in todos"> |
27 | | - <div class="display"> |
28 | | - <input class="check" type="checkbox" name="todo.done" / > |
29 | | - <div ng:click="editTodo(todo)" class="todo-content"> {{ todo.content }} </div> |
30 | | - <span class="todo-destroy" ng:click="removeTodo(todo)"></span> |
31 | | - </div> |
32 | | - <div class="edit"> |
| 18 | + </header> |
| 19 | + <!-- TODO: figure out if its spec compliant to remove the #main id if its getting into the way?--> |
| 20 | + <section id="main" ng:show="hasTodos()"> |
| 21 | + <input id="toggle-all" type="checkbox" name="allChecked" ng:click="toggleAllStates()"> |
| 22 | + <label for="toggle-all">Mark all as complete</label> |
| 23 | + <ul id="todo-list"> |
| 24 | + <li ng:repeat="todo in todos" my:dblclick="editTodo(todo)" ng:class="(todo.done && ' done ') + (todo.editing && ' editing ')"> |
| 25 | + <div class="view"> |
| 26 | + <input class="toggle" type="checkbox" name="todo.done"> |
| 27 | + <label>{{ todo.content }}</label> |
| 28 | + <a class="destroy" ng:click="removeTodo(todo)"></a> |
| 29 | + </div> |
33 | 30 | <form ng:submit="finishEditing(todo)"> |
34 | | - <input class="todo-input" my:focus="todo.editing" my:blur="finishEditing(todo)" name="todo.content" type="text"> |
| 31 | + <input class="edit" type="text" name="todo.content" my:focus="todo.editing" my:blur="finishEditing(todo)"> |
35 | 32 | </form> |
36 | | - </div> |
37 | | - </li> |
38 | | - </ul> |
39 | | - </div> |
40 | | - <div id="todo-stats"> |
41 | | - <span class="todo-count" ng:show="hasTodos()"> |
42 | | - <ng:pluralize count="remainingTodos()" when="{'0' : 'No items left.', '1': '1 item left.', 'other' : '{} items left.' }"> |
43 | | - </ng:pluralize> |
44 | | - </span> |
45 | | - <span class="todo-clear" ng:show="hasFinishedTodos()"> |
46 | | - <a ng:click="clearCompletedItems()"> |
47 | | - Clear <ng:pluralize count="finishedTodos()" when="{'1': '1 completed item', 'other' : '{} completed items' }"> |
48 | | - </ng:pluralize> |
49 | | - </a> |
50 | | - </span> |
51 | | - </div> |
52 | | - </div> |
| 33 | + </li> |
| 34 | + </ul> |
| 35 | + </section> |
| 36 | + <footer ng:show="hasTodos()"> |
| 37 | + <a id="clear-completed" ng:click="clearCompletedItems()" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a> |
| 38 | + <div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div> |
| 39 | + </footer> |
| 40 | + </div> |
| 41 | + <div id="instructions"> |
| 42 | + Double-click to edit a todo. |
53 | 43 | </div> |
54 | | - <ul id="instructions"> |
55 | | - <li>Click to edit a todo.</li> |
56 | | - </ul> |
57 | 44 | <div id="credits"> |
58 | | - <p> |
59 | | - Originally Created by |
60 | | - <br> |
61 | | - <a href="http://jgn.me/">Jérôme Gravel-Niquet</a> |
62 | | - </p> |
63 | | - <p> |
64 | | - Rewritten to use <a href="http://angularjs.org">AngularJS </a> by |
65 | | - <br> |
66 | | - <a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a> |
67 | | - <br>Cleanup, edits: <a href="http://www.linkedin.com/pub/dan-doyon/2/1b0/a83">Dan Doyon</a> |
68 | | - </p> |
| 45 | + Created by <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>. |
69 | 46 | </div> |
70 | 47 | <script src="js/booter.js"></script> |
71 | | - <script src="lib/angular/angular.min.js" ng:autobind></script> |
72 | | - <script src="lib/rx/rx.js"></script> |
73 | | - <script src="lib/rx/rx.angular.js"></script> |
| 48 | + <script src="js/lib/angular/angular.min.js" ng:autobind></script> |
74 | 49 | <script src="js/controllers.js"></script> |
75 | 50 | <script src="js/directive.js"></script> |
76 | 51 | </body> |
|
0 commit comments