From 85a1b0674de932f0958da9c496e84e83966af1ff Mon Sep 17 00:00:00 2001
From: Abhishek Das <das.abhshk@gmail.com>
Date: Sun, 7 Apr 2013 19:58:52 +0530
Subject: [PATCH] Sublists are being rendered as expected;

* Setting each task's `margin-left` according to it's parent
* Putting a view element inside another view element was causing issues
---
 public/javascripts/views/list.js |  6 +++--
 public/javascripts/views/task.js | 10 +++++++-
 public/sass/app.scss             | 29 +++++++++++++++++++++-
 public/stylesheets/app.css       | 42 +++++++++++++++++++++++++++++---
 4 files changed, 80 insertions(+), 7 deletions(-)

diff --git a/public/javascripts/views/list.js b/public/javascripts/views/list.js
index 02f63dd..537029e 100644
--- a/public/javascripts/views/list.js
+++ b/public/javascripts/views/list.js
@@ -27,8 +27,10 @@ var app = app || {};
         model: task
       });
       var a = taskView.render();
-      this.$el.append(a.el);
-      //a.$input.focus();
+      if (a.model.get('parent_id')!=0)
+        a.$el.insertAfter($('*[data-id="'+a.model.get('parent_id')+'"]').parents('li:first'));
+      else
+        this.$el.append(a.el);
       console.log(a.$input.prop('selectionStart'));
     }
 
diff --git a/public/javascripts/views/task.js b/public/javascripts/views/task.js
index 45b43d0..c9900be 100644
--- a/public/javascripts/views/task.js
+++ b/public/javascripts/views/task.js
@@ -23,7 +23,15 @@ var app = app || {};
       var tmpl = _.template(this.template);
       var task = this;
       this.$el.html(tmpl(this.model.toJSON()));
-      this.$input = this.$('.edit');
+      if (this.model.get('parent_id')!=0) {
+        this.$el.addClass('shift1');
+        var className = $('*[data-id="'+this.model.get('parent_id')+'"]').parents('li:first').attr('class');
+        if (className!=undefined && className!=0 && className.substring(0,5) == 'shift') {
+          this.$el.removeClass();
+          this.$el.addClass('shift' + (parseInt(className.charAt(5))+1));
+        }
+      }
+      this.$input = this.$('.edit:first');
       socket.on('task', function(data){
         if (task.model.id == data.id) {
           if (task.$input.val != data.content)
diff --git a/public/sass/app.scss b/public/sass/app.scss
index 6d8e231..0f61331 100644
--- a/public/sass/app.scss
+++ b/public/sass/app.scss
@@ -116,7 +116,7 @@ body {
               border: 0;
               padding: 0;
               margin: 0;
-              width: 620px;
+              width: 80%;
               font-family: inherit;
               font-size: inherit;
               font-weight: inherit;
@@ -135,6 +135,33 @@ body {
             }
           }
         }
+        li.shift1 {
+          margin-left: 30px;
+        }
+        li.shift2 {
+          margin-left: 60px;
+        }
+        li.shift3 {
+          margin-left: 90px;
+        }
+        li.shift4 {
+          margin-left: 120px;
+        }
+        li.shift5 {
+          margin-left: 150px;
+        }
+        li.shift6 {
+          margin-left: 180px;
+        }
+        li.shift7 {
+          margin-left: 210px;
+        }
+        li.shift8 {
+          margin-left: 240px;
+        }
+        li.shift9 {
+          margin-left: 270px;
+        }
       }
     }
     #main > .children {
diff --git a/public/stylesheets/app.css b/public/stylesheets/app.css
index 1b2530c..b4fd10b 100644
--- a/public/stylesheets/app.css
+++ b/public/stylesheets/app.css
@@ -5619,7 +5619,7 @@ body #hackflowy #main .children li .task input.edit {
   border: 0;
   padding: 0;
   margin: 0;
-  width: 620px;
+  width: 80%;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
@@ -5637,11 +5637,47 @@ body #hackflowy #main .children li .task input.edit {
 body #hackflowy #main .children li .task input.edit:focus {
   background-color: white;
 }
-/* line 140, ../sass/app.scss */
+/* line 138, ../sass/app.scss */
+body #hackflowy #main .children li.shift1 {
+  margin-left: 30px;
+}
+/* line 141, ../sass/app.scss */
+body #hackflowy #main .children li.shift2 {
+  margin-left: 60px;
+}
+/* line 144, ../sass/app.scss */
+body #hackflowy #main .children li.shift3 {
+  margin-left: 90px;
+}
+/* line 147, ../sass/app.scss */
+body #hackflowy #main .children li.shift4 {
+  margin-left: 120px;
+}
+/* line 150, ../sass/app.scss */
+body #hackflowy #main .children li.shift5 {
+  margin-left: 150px;
+}
+/* line 153, ../sass/app.scss */
+body #hackflowy #main .children li.shift6 {
+  margin-left: 180px;
+}
+/* line 156, ../sass/app.scss */
+body #hackflowy #main .children li.shift7 {
+  margin-left: 210px;
+}
+/* line 159, ../sass/app.scss */
+body #hackflowy #main .children li.shift8 {
+  margin-left: 240px;
+}
+/* line 162, ../sass/app.scss */
+body #hackflowy #main .children li.shift9 {
+  margin-left: 270px;
+}
+/* line 167, ../sass/app.scss */
 body #hackflowy #main > .children {
   margin-left: 0;
 }
-/* line 143, ../sass/app.scss */
+/* line 170, ../sass/app.scss */
 body #hackflowy #footer {
   color: #333333;
   margin: 10px 0;