From b7d46b1e20a8a4611f33879880ca5148f62b4fc9 Mon Sep 17 00:00:00 2001
From: Zachary Kain <zakkain@gmail.com>
Date: Mon, 4 Mar 2013 19:42:48 -0500
Subject: [PATCH] start new task column css, add classes

---
 styles/app/tasks.styl | 10 +++++-
 views/app/tasks.html  | 75 +++++++++++++++++++++++--------------------
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl
index adf7efd112..2fbdfacb0b 100644
--- a/styles/app/tasks.styl
+++ b/styles/app/tasks.styl
@@ -89,4 +89,12 @@ li:hover .task-meta-controls .hover-show
     text-decoration:none;
 
 .new-task-form
-  margin-bottom:5px;
\ No newline at end of file
+  margin-bottom:5px;
+
+
+// begin rewrite css 2013-03-04
+
+.addtask-form
+  margin-bottom: 0.75em
+  .addtask-btn
+    float: right
\ No newline at end of file
diff --git a/views/app/tasks.html b/views/app/tasks.html
index ccdd9bf407..ae4defe0bf 100644
--- a/views/app/tasks.html
+++ b/views/app/tasks.html
@@ -123,49 +123,54 @@
     </div>
 
 <newTask:>
-    <form class="form-inline new-task-form" id="new-{@type}" data-task-type="{@type}" x-bind="submit:addTask">
-        <input value="{@inputValue}" type="text" name="new-task" placeholder="{@placeHolder}"/>
-        <input class="btn" type="submit" value="Add" />
+    <form class="addtask-form form-inline new-task-form" id="new-{@type}" data-task-type="{@type}" x-bind="submit:addTask">
+        <input class="addtask-field" value="{@inputValue}" type="text" name="new-task" placeholder="{@placeHolder}"/>
+        <input class="btn addtask-btn" type="submit" value="Add">
     </form>
 
+    <!-- all the parts of a single task -->
     <task:>
         <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, :task.repeat)}">
-    <pre>
-    <div class="task-meta-controls">
+            <pre>
+                <!-- right-hand side control buttons -->
+                <div class="task-meta-controls">
+                    <div class="hover-show">
+                        <a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit" rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
+                        <a x-bind=click:del rel=tooltip title="Delete"><i class="icon-trash"></i></a>
+                        {#if :task.history}
+                        <a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history" rel="tooltip" title="Progress">
+                            <i class="icon-signal"></i>
+                        </a>
+                        {/}
+                    </div>
 
-        <div class="hover-show">
-            <a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit" rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
-            <a x-bind=click:del rel=tooltip title="Delete"><i class="icon-trash"></i></a>
-            {#if :task.history}
-            <a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history" rel="tooltip" title="Progress">
-                <i class="icon-signal"></i>
-            </a>
-            {/}
-        </div>
+                    {#if :task.notes}
+                    <span rel="popover" data-trigger="hover" data-placement="left" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
+                    {/}
+                </div>
 
-        {#if :task.notes}
-        <span rel="popover" data-trigger="hover" data-placement="left" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
-        {/}
-    </div>
+                <!-- left-hand side checkbox -->
+                <div class="task-controls">
+                    <!-- Habits -->
+                    {#if equal(:task.type, 'habit')}
+                    {#if :task.up}<a data-direction=up x-bind=click:score><img src="/img/add.png" /></a>{/}
+                    {#if :task.down}<a data-direction=down x-bind=click:score><img src="/img/remove.png" /></a>{/}
+                    <!-- Rewards -->
+                    {else if equal(:task.type, 'reward')}
+                    <a x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
+                    <!-- Daily & Todos -->
+                    {else}
+                    <input type=checkbox checked="{:task.completed}">
+                    {/}
+                </div>
 
-    <div class="task-controls">
-        <!-- Habits -->
-        {#if equal(:task.type, 'habit')}
-        {#if :task.up}<a data-direction=up x-bind=click:score><img src="/img/add.png" /></a>{/}
-        {#if :task.down}<a data-direction=down x-bind=click:score><img src="/img/remove.png" /></a>{/}
-        <!-- Rewards -->
-        {else if equal(:task.type, 'reward')}
-        <a x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
-        <!-- Daily & Todos -->
-        {else}
-        <input type=checkbox checked="{:task.completed}"/>
-        {/}
-    </div>
-    <div class="task-text">{:task.text}</div>
+                <!-- main content -->
+                <div class="task-text">{:task.text}</div>
 
-    <app:taskMeta />
-    </pre>
-    </li>
+                <!-- edit/options dialog -->
+                <app:taskMeta />
+            </pre>
+        </li>
 
 <taskMeta:>
     <div style="display:none;" id={{:task.id}}-edit>