adding initial version of yuilibrary todo application, pre-changes

69a59e39 · addyosmani · 7422d03a · 69a59e39 · 69a59e39 · 69a59e39
Commit 69a59e39 authored Aug 20, 2011 by addyosmani
4 changed files
--- a/todo-example/yuilibrary/css/style.css
+++ b/todo-example/yuilibrary/css/style.css
+#todo-app {
+    margin: 1em;
+    text-align: center;
+}
+
+#todo-list,
+#todo-stats {
+    margin: 1em auto;
+    text-align: left;
+    width: 450px;
+}
+
+#todo-list {
+    list-style: none;
+    padding: 0;
+}
+
+#todo-stats,
+.todo-clear { color: #777; }
+
+.todo-clear { float: right; }
+
+.todo-done .todo-content {
+    color: #666;
+    text-decoration: line-through;
+}
+
+.todo-edit,
+.editing .todo-view { display: none; }
+
+.editing .todo-edit { display: block; }
+
+.todo-input {
+    display: block;
+    font-family: Helvetica, sans-serif;
+    font-size: 20px;
+    line-height: normal;
+    margin: 5px auto 0;
+    padding: 6px;
+    width: 420px;
+}
+
+.todo-item {
+    border-bottom: 1px dotted #cfcfcf;
+    font-size: 20px;
+    padding: 6px;
+    position: relative;
+}
+
+.todo-label {
+    color: #444;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.todo-remaining {
+    color: #333;
+    font-weight: bold;
+}
+
+.todo-remove {
+    position: absolute;
+    right: 0;
+    top: 12px;
+}
+
+.todo-remove-icon {
+    /*
+    Delete icon courtesy of The Noun Project:
+    http://thenounproject.com/noun/delete/
+    */
+    background: url(../assets/app/remove.png) no-repeat;
+    display: block;
+    height: 16px;
+    opacity: 0.6;
+    visibility: hidden;
+    width: 23px;
+}
+
+.todo-remove:hover .todo-remove-icon { opacity: 1.0; }
+
+.todo-hover .todo-remove-icon,
+.todo-remove:focus .todo-remove-icon { visibility: visible; }
+
+.editing .todo-remove-icon { visibility: hidden; }
\ No newline at end of file
--- a/todo-example/yuilibrary/index.html
+++ b/todo-example/yuilibrary/index.html
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
+<head>
+    <title>Todo</title>
+    <link rel="stylesheet" href="css/style.css" type="text/css"/>
+</head>
+<body>
+
+
+<!-- This is the main container and "shell" for the todo app. -->
+<div id="todo-app">
+    <label class="todo-label" for="new-todo">What do you want to do today?</label>
+    <input type="text" id="new-todo" class="todo-input"
+        placeholder="buy milk">
+
+    <ul id="todo-list"></ul>
+    <div id="todo-stats"></div>
+</div>
+
+
+
+<!-- This template HTML will be used to render each todo item. -->
+<script type="text/x-template" id="todo-item-template">
+    <div class="todo-view">
+        <input type="checkbox" class="todo-checkbox" {checked}>
+        <span class="todo-content" tabindex="0">{text}</span>
+    </div>
+
+    <div class="todo-edit">
+        <input type="text" class="todo-input" value="{text}">
+    </div>
+
+    <a href="#" class="todo-remove" title="Remove this task">
+        <span class="todo-remove-icon"></span>
+    </a>
+</script>
+
+<!-- This template HTML will be used to render the statistics at the bottom
+     of the todo list. -->
+<script type="text/x-template" id="todo-stats-template">
+    <span class="todo-count">
+        <span class="todo-remaining">{numRemaining}</span>
+        <span class="todo-remaining-label">{remainingLabel}</span> left.
+    </span>
+
+    <a href="#" class="todo-clear">
+        Clear <span class="todo-done">{numDone}</span>
+        completed <span class="todo-done-label">{doneLabel}</span>
+    </a>
+</script>
+
+
+<script src="js/yui-3.4.0.min.js"></script>
+<script type="text/javascript" src="js/app.js"></script>
+
+
+    </body>
+</html>
\ No newline at end of file
--- a/todo-example/yuilibrary/js/app.js
+++ b/todo-example/yuilibrary/js/app.js
--- a/todo-example/yuilibrary/js/yui-3.4.0.min.js
+++ b/todo-example/yuilibrary/js/yui-3.4.0.min.js