use iscroll

rp8 · Aug 19, 2012 · f05b1f8 · f05b1f8
1 parent 6898876
commit f05b1f8
Show file tree

Hide file tree

Showing 21 changed files with 2,021 additions and 141 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 ## todos
 =====
 
-TODOs - Dust client side template with server REST api and based on http://documentcloud.github.com/backbone/examples/todos
+TODOs - Backbone/Dust client side template with server REST api and based on http://documentcloud.github.com/backbone/examples/todos
 
 ## Required modules:
 
@@ -12,6 +12,7 @@ TODOs - Dust client side template with server REST api and based on http://docum
 *	backbone
 *	dustjs-linkedin
 *	jquery
+* iscroll
 
 ### Compile dust templates
 

diff --git a/footer.dust b/footer.dust
@@ -1,5 +1,7 @@
-    <footer>
-      <a id="clear-completed">Clear completed</a>
-      <div id="todo-count"></div>
-    </footer>
+    <div id="footer">
+      <div id="footer-cmd">
+        <a id="clear-completed">Clear completed</a>
+        <div id="todo-count"></div>
+      </div>
+    </div>
 
diff --git a/header.dust b/header.dust
@@ -1,5 +1,3 @@
-    <header>
-      <h1>TODO List</h1>
-      <input id="new-todo" type="text" placeholder="What needs to be done?">
-    </header>
-
+<div id="header">
+  <span>TODO List</span>
+</div>
diff --git a/index.dust b/index.dust
@@ -2,31 +2,36 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <title>TODOs</title>
+  <link rel="stylesheet" href="css/todo_scroll.css"/>
   <link rel="stylesheet" href="css/todos.css"/>
+  <link rel="icon" type=image/png" href="image/apple-touch-icon.png"/>
 	<link rel="apple-touch-icon" href="image/apple-touch-icon.png"/>
   <script src="js/underscore-min.js"></script>
   <script src="js/jquery-1.8.0.min.js"></script>
   <script src="js/backbone-min.js"></script>
   <script src="js/dust-core-1.0.0.js"></script>
+  <script src="js/iscroll.js"></script>
+  <script src="js/todo_scroll.js"></script>
 </head>
 
 <body>
 
   <div id="todoapp">
-
-		{>"./header.dust"/}
-
-		{>"./section.dust"/}
-
-		{>"./footer.dust"/}
-
+    {>"./header.dust"/}
+    {>"./scroller.dust"/}
+    {>"./footer.dust"/}
   </div>
 
   <script src="js/item.js"></script>
   <script src="js/stats.js"></script>
   <script src="js/todo_models.js"></script>
   <script src="js/todo_views.js"></script>
-  </body>
+
+  </div>
+</body>
 </html>
diff --git a/input.dust b/input.dust
@@ -0,0 +1,5 @@
+<div id="input">
+  <input id="new-todo" type="text" placeholder="What needs to be done?">
+  <input id="toggle-all" type="checkbox">
+  <label for="toggle-all">Mark all as completed</label>
+</div>
diff --git a/item.dust b/item.dust
@@ -1,6 +1,6 @@
 <div class="view">
-  <input class="toggle" type="checkbox" {#done} checked="checked" {:else} "" {/done} />
-  <label>{title}</label>
+  <input id="c_{id}" class="toggle" type="checkbox" {#done} checked="checked" {:else} "" {/done} />
+  <label for="c_{id}">{title}</label>
   <a class="destroy"></a>
 </div>
 <input class="edit" type="text" value="{title}" />
diff --git a/public/css/todo_scroll.css b/public/css/todo_scroll.css
@@ -0,0 +1,138 @@
+#header {
+  position:absolute; z-index:1;
+  top:0; left:0;
+  width:100%;
+  height:30px;
+  line-height:30px;
+  font-weight: bold;
+  text-shadow: 0 1px 1px #335413; 
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
+  background-image:      -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
+  background-image:         linear-gradient(#74b042, #56A00E);    
+
+  color:#eee;
+  font-size:20px;
+  text-align:center;
+}
+
+#header a {
+  color:#f3f3f3;
+  text-decoration:none;
+  font-weight:bold;
+  text-shadow:0 -1px 0 rgba(0,0,0,0.5);
+}
+
+#footer {
+  position:absolute; z-index:2;
+  bottom:0; left:0;
+  padding:0;
+  width:100%;
+  height:25px;
+  background: #74b042;
+  color:#fff;
+  font-weight: bold;
+  text-shadow: 0 1px 1px #335413; 
+  text-align:center;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
+  background-image:    -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
+  background-image:     -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
+  background-image:      -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
+  background-image:         linear-gradient(#74b042, #56A00E);    
+}
+
+#wrapper {
+  position:absolute; z-index:1;
+  top:65px; bottom:20px; left:-9999px;
+  width:100%;
+  background:#333;
+  overflow:auto;
+}
+
+#scroller {
+  position:absolute; z-index:1;
+  top:0px; 
+/*  -webkit-touch-callout:none;*/
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+  width:100%;
+  padding:0;
+}
+
+#scroller ul {
+  list-style:none;
+  padding:0;
+  margin:0;
+  width:100%;
+  text-align:left;
+}
+
+#scroller li {
+  padding:0 10px;
+  border-bottom:1px solid #ccc;
+  border-top:1px solid #fff;
+  background-color:#fafafa;
+}
+
+#myFrame {
+  position:absolute;
+  top:0; left:0;
+}
+
+/**
+ *
+ * Pull down styles
+ *
+ */
+#pullDown, #pullUp {
+  background:#333;
+  height:35px;
+  line-height:30px;
+  padding:2px 2px 2px 2px;
+  border-bottom:1px solid #ccc;
+  font-weight:bold;
+  font-size:12px;
+  color:#ffffff;
+}
+
+#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
+  display:block; float:left;
+  width:40px; height:40px;
+  background:url(../image/pull.png) 0 0 no-repeat;
+  -webkit-background-size:40px 80px; background-size:40px 80px;
+  -webkit-transition-property:-webkit-transform;
+  -webkit-transition-duration:250ms;  
+}
+#pullDown .pullDownIcon {
+  -webkit-transform:rotate(0deg) translateZ(0);
+}
+#pullUp .pullUpIcon  {
+  -webkit-transform:rotate(-180deg) translateZ(0);
+}
+
+#pullDown.flip .pullDownIcon {
+  -webkit-transform:rotate(-180deg) translateZ(0);
+}
+
+#pullUp.flip .pullUpIcon {
+  -webkit-transform:rotate(0deg) translateZ(0);
+}
+
+#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
+  background-position:0 100%;
+  -webkit-transform:rotate(0deg) translateZ(0);
+  -webkit-transition-duration:0ms;
+
+  -webkit-animation-name:loading;
+  -webkit-animation-duration:2s;
+  -webkit-animation-iteration-count:infinite;
+  -webkit-animation-timing-function:linear;
+}
+
+@-webkit-keyframes loading {
+  from { -webkit-transform:rotate(0deg) translateZ(0); }
+  to { -webkit-transform:rotate(360deg) translateZ(0); }
+}
+