Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

updating UI theme to, template structure to common Todo app look and …

…feel.
  • Loading branch information...
commit f28060c5e7c7e5e81ee996735893286af718e680 1 parent 1a79356
@addyosmani authored
Showing with 321 additions and 16 deletions.
  1. +2 −1  css/style.css
  2. +282 −2 css/todos.css
  3. +37 −13 index.html
View
3  css/style.css
@@ -57,7 +57,8 @@ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 1
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
-input[type="checkbox"] { vertical-align: bottom; }
+input[type="checkbox"] { margin-right: 5px;
+ vertical-align: middle; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
View
284 css/todos.css
@@ -117,13 +117,13 @@ table {
/* App CSS */
body, html {
- color: #777;
- background-color: #F2F4F5; }
+ }
.sc-view {
position: relative;
overflow: visible; }
+/*
body {
-moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 1px;
-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 1px;
@@ -239,3 +239,283 @@ body {
text-decoration: line-through; }
body ul li:nth-child(odd) {
background-color: #F7F7F7; }
+
+ */
+ /*new additions*/
+
+
+body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.4em;
+ background: #eeeeee;
+ color: #333333;
+}
+
+#todoapp {
+ width: 480px;
+ margin: 0 auto 40px;
+ background: white;
+ padding: 20px;
+ -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;
+-moz-border-radius-bottomleft: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ -o-border-bottom-left-radius: 5px;
+ -ms-border-bottom-left-radius: 5px;
+ -khtml-border-bottom-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ -moz-border-radius-bottomright: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ -o-border-bottom-right-radius: 5px;
+ -ms-border-bottom-right-radius: 5px;
+ -khtml-border-bottom-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+#todoapp h1 {
+ font-size: 36px;
+ font-weight: bold;
+ text-align: center;
+ padding: 20px 0 30px 0;
+ line-height: 1;
+}
+
+#create-todo {
+ position: relative;
+}
+#create-todo input {
+ width: 466px;
+ font-size: 24px;
+ font-family: inherit;
+ line-height: 1.4em;
+ border: 0;
+ outline: none;
+ padding: 6px;
+ border: 1px solid #999999;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+}
+#create-todo input::-webkit-input-placeholder {
+ font-style: italic;
+}
+#create-todo span {
+ position: absolute;
+ z-index: 999;
+ width: 170px;
+ left: 50%;
+ margin-left: -85px;
+}
+
+#todo-list {
+ margin-top: 10px;
+}
+#todo-list li {
+ padding: 12px 20px 11px 0;
+ position: relative;
+ font-size: 24px;
+ line-height: 1.1em;
+ border-bottom: 1px solid #cccccc;
+}
+#todo-list li:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ clear: both;
+ overflow: hidden;
+ visibility: hidden;
+}
+#todo-list li.editing {
+ padding: 0;
+ border-bottom: 0;
+}
+#todo-list .editing .display,
+#todo-list .edit {
+ display: none;
+}
+#todo-list .editing .edit {
+ display: block;
+}
+#todo-list .editing input {
+ width: 444px;
+ font-size: 24px;
+ font-family: inherit;
+ margin: 0;
+ line-height: 1.6em;
+ border: 0;
+ outline: none;
+ padding: 10px 7px 0px 27px;
+ border: 1px solid #999999;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+}
+#todo-list .check {
+ position: relative;
+ top: 9px;
+ margin: 0 10px 0 7px;
+ float: left;
+}
+#todo-list .done .todo-content {
+ text-decoration: line-through;
+ color: #777777;
+}
+#todo-list .todo-destroy {
+ position: absolute;
+ right: 5px;
+ top: 14px;
+ display: none;
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ background: url(destroy.png) no-repeat 0 0;
+}
+#todo-list li:hover .todo-destroy {
+ display: block;
+}
+#todo-list .todo-destroy:hover {
+ background-position: 0 -20px;
+}
+
+#todo-stats {
+ *zoom: 1;
+ margin-top: 10px;
+ color: #777777;
+}
+#todo-stats:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ clear: both;
+ overflow: hidden;
+ visibility: hidden;
+}
+#todo-stats .todo-count {
+ float: left;
+}
+#todo-stats .todo-count .number {
+ font-weight: bold;
+ color: #333333;
+}
+#todo-stats .todo-clear {
+ float: right;
+}
+#todo-stats .todo-clear a {
+ color: #777777;
+ font-size: 12px;
+}
+#todo-stats .todo-clear a:visited {
+ color: #777777;
+}
+#todo-stats .todo-clear a:hover {
+ color: #336699;
+}
+
+#instructions {
+ width: 520px;
+ margin: 10px auto;
+ color: #777777;
+ text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+ text-align: center;
+}
+#instructions a {
+ color: #336699;
+}
+
+#credits {
+ width: 520px;
+ margin: 30px auto;
+ color: #999;
+ text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+ text-align: center;
+}
+#credits a {
+ color: #888;
+}
+
+
+
+/* line 109 */
+#todoapp #todo-stats {
+ *zoom: 1;
+ margin-top: 10px;
+ color: #555555;
+ -moz-border-radius-bottomleft: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ -o-border-bottom-left-radius: 5px;
+ -ms-border-bottom-left-radius: 5px;
+ -khtml-border-bottom-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ -moz-border-radius-bottomright: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ -o-border-bottom-right-radius: 5px;
+ -ms-border-bottom-right-radius: 5px;
+ -khtml-border-bottom-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ background: #f4fce8;
+ border-top: 1px solid #ededed;
+ padding: 0 20px;
+ line-height: 36px;
+}
+/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+#todoapp #todo-stats:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ clear: both;
+ overflow: hidden;
+ visibility: hidden;
+}
+/* line 118 */
+#todoapp #todo-stats .todo-count {
+ float: left;
+}
+/* line 120 */
+#todoapp #todo-stats .todo-count .number {
+ font-weight: bold;
+ color: #555555;
+}
+/* line 123 */
+#todoapp #todo-stats .todo-clear {
+ float: right;
+}
+/* line 125 */
+#todoapp #todo-stats button {
+ 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;
+ float:right;
+}
+/* line 136 */
+#todoapp #todo-stats button: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;
+}
+
+
+#todos { display:block}
+
+
+
View
50 index.html
@@ -21,30 +21,54 @@
<![endif]-->
</head>
<body>
- <h1>Todos</h1>
+
+ <div id="todoapp">
+ <div class="title">
+ <h1>Todos</h1>
+ </div>
+
+ <div class="content">
+
<script type="text/html">
- {{view Todos.CreateTodoView id="new-todo" placeholder="What needs to be done?"}}
- <!-- Insert this after the CreateTodoView and before the collection. -->
- {{#view Todos.StatsView id="stats"}}
- {{#view SC.Button classBinding="isActive"
- target="Todos.todosController"
- action="clearCompletedTodos"}}
- Clear Completed Todos
- {{/view}}
- {{remainingString}} remaining
- {{/view}}
+{{#view id="create-todo"}}
+ {{view Todos.CreateTodoView id="new-todo" placeholder="What needs to be done?"}}
+{{/view}}
{{view SC.Checkbox class="mark-all-done"
- title="Mark All as Done"
+ title="Mark all as done"
valueBinding="Todos.todosController.allAreDone"}}
- {{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}}
+{{#view id="todos"}}
+ {{#collection id="todo-list" contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}}
{{view SC.Checkbox titleBinding="parentView.content.title"
valueBinding="parentView.content.isDone"}}
{{/collection}}
+{{/view}}
+
+ <!-- Insert this after the CreateTodoView and before the collection. -->
+ {{#view Todos.StatsView id="todo-stats"}}
+ {{#view SC.Button classBinding="isActive"
+ target="Todos.todosController"
+ action="clearCompletedTodos"}}
+ Clear Completed
+ {{/view}}
+ {{remainingString}} remaining
+ {{/view}}
+
</script>
+ </div>
+ </div>
+
+ <div id="credits">
+ Credits:
+ <br />
+ Tom Dale, SproutCore, Updates: Addy Osmani
+ </div>
+
+
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
Please sign in to comment.
Something went wrong with that request. Please try again.