Change div+input box to textarea

index.html

@@ -31,7 +31,7 @@
     <script type="text/template" id="taskTemplate">
       <div class="task">
         <div class="link">•</div>
-        <div class="content"><%= content %></div>
+        <textarea class="edit"><%= content %></textarea>
       </div>
     </script>
     <script src="javascripts/vendor/jquery.min.js"></script>

javascripts/models/task.js

@@ -8,6 +8,8 @@ var app = app || {};
       parent_id: '',
       content: ''
     },
+
+    url: '/task'
     
   });
 

javascripts/views/task.js

@@ -7,10 +7,32 @@ var app = app || {};
     tagName: 'li',
     template: $('#taskTemplate').html(),
 
+    events: {
+      'click .task': 'edit',
+      'blur .edit': 'close',
+      'keypress .edit': 'add'
+    },
+
     render: function() {
       var tmpl = _.template(this.template);
       this.$el.html(tmpl(this.model.toJSON()));
+      this.$input = this.$('.edit');
       return this;
+    },
+
+    edit: function() {
+      this.$el.addClass('editing');
+      this.$input.focus();
+    },
+
+    close: function() {
+      var value = this.$input.val().trim();
+      this.model.save({content: value});
+      this.$el.removeClass('editing');
+    },
+
+    add: function() {
+      this.$input.blur();
     }
 
   });

sass/app.scss

@@ -74,6 +74,7 @@ body {
           list-style: none;
           .task {
             margin: 10px 0;
+            height: 20px;
             color: $fontcolor;
             .link {
               vertical-align: middle;
@@ -106,13 +107,30 @@ body {
               z-index: 8;
               background-color: #aaa;
             }
-            .content {
-              padding-left: 10px;
-              width: 90%;
-              line-height: 20px;
-              text-align: justify;
-              vertical-align: middle;
-              display: inline-block;
+            textarea.edit {
+              box-shadow: none;
+              display: inline;
+              background: transparent;
+              resize: none;
+              outline: 0;
+              border: 0;
+              padding: 0;
+              margin: 0;
+              width: 620px;
+              height: 18px;
+              font-family: inherit;
+              font-size: inherit;
+              font-weight: inherit;
+              line-height: inherit;
+              letter-spacing: inherit;
+              color: inherit;
+              overflow: hidden;
+              position: relative;
+              word-wrap: break-word;
+            }
+            textarea.edit:focus {
+              background-color: white;
+              height: 18px;
             }
           }
         }
@@ -127,4 +145,4 @@ body {
       font-size: 12px;
     }
   }
-}
+}

stylesheets/app.css

@@ -5571,9 +5571,10 @@ body #gofish #main .children li {
 /* line 75, ../sass/app.scss */
 body #gofish #main .children li .task {
   margin: 10px 0;
+  height: 20px;
   color: #333333;
 }
-/* line 78, ../sass/app.scss */
+/* line 79, ../sass/app.scss */
 body #gofish #main .children li .task .link {
   vertical-align: middle;
   display: inline-block;
@@ -5594,34 +5595,52 @@ body #gofish #main .children li .task .link {
   -khtml-border-radius: 12px;
   border-radius: 12px;
 }
-/* line 98, ../sass/app.scss */
+/* line 99, ../sass/app.scss */
 body #gofish #main .children li .task .with-children > .link {
   background-color: #e0e0e0;
 }
-/* line 101, ../sass/app.scss */
+/* line 102, ../sass/app.scss */
 body #gofish #main .children li .task .open > .link {
   background-color: white;
 }
-/* line 104, ../sass/app.scss */
+/* line 105, ../sass/app.scss */
 body #gofish #main .children li .task .link:hover {
   cursor: pointer;
   z-index: 8;
   background-color: #aaa;
 }
-/* line 109, ../sass/app.scss */
-body #gofish #main .children li .task .content {
-  padding-left: 10px;
-  width: 90%;
-  line-height: 20px;
-  text-align: justify;
-  vertical-align: middle;
-  display: inline-block;
+/* line 110, ../sass/app.scss */
+body #gofish #main .children li .task textarea.edit {
+  box-shadow: none;
+  display: inline;
+  background: transparent;
+  resize: none;
+  outline: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 620px;
+  height: 18px;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  overflow: hidden;
+  position: relative;
+  word-wrap: break-word;
 }
-/* line 121, ../sass/app.scss */
+/* line 131, ../sass/app.scss */
+body #gofish #main .children li .task textarea.edit:focus {
+  background-color: white;
+  height: 18px;
+}
+/* line 139, ../sass/app.scss */
 body #gofish #main > .children {
   margin-left: 0;
 }
-/* line 124, ../sass/app.scss */
+/* line 142, ../sass/app.scss */
 body #gofish #footer {
   color: #333333;
   margin: 10px 0;