From 174c7a8b9f14da4e39df6a32a3ab593cc03f0745 Mon Sep 17 00:00:00 2001
From: Zachary Kain <zakkain@gmail.com>
Date: Tue, 5 Mar 2013 22:06:45 -0500
Subject: [PATCH] tweaks, most notably DISABLE CHART BUTAN

---
 styles/app/tasks.styl | 269 ++++++++++++++++++++----------------------
 views/app/tasks.html  |  29 +++--
 2 files changed, 139 insertions(+), 159 deletions(-)

diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl
index 9dc1b45b94..ce121649f4 100644
--- a/styles/app/tasks.styl
+++ b/styles/app/tasks.styl
@@ -34,89 +34,75 @@ for $stage in $stages
   background-color: white
 
 
-// 2. Task Options
-// ================
 
-label.checkbox.inline{
-    width: 40px
-}
-
-.todos
-  .nav-pills > .active > a, .nav-pills > .active > a:hover
-    color: #005580
-    background-color: #DEE5F2
-
-.dailys
-  .repeat-days > .btn:not(.active)
-    background-color: #aaa;
-    background-image: -moz-linear-gradient(top, #eee, #aaa);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa));
-    background-image: -webkit-linear-gradient(top, #eee, #aaa);
-    background-image: -o-linear-gradient(top, #eee, #aaa);
-    background-image: linear-gradient(to bottom, #eee, #aaa);
-    background-repeat: repeat-x;
-
-.context-enabled
-  .display-context-dependant,
-  .task-list li
-    display: none
-
-  &.context-completed
-    .show-for-completed, .completed
-      display: block
-
-  &.context-uncompleted
-    .show-for-uncompleted, .uncompleted
-      display: block
-
-.help-icon
-  float:right;
-
-.task:hover
-  cursor: move
-
-li:hover .task-meta-controls .hover-show
-  display: inline
-
-.task
-
-  .task-meta-controls
-    float:right
-    i
-      margin-left:5px
-
-  .task-meta-controls .hover-show
-    display: none;
-
-.vote-up, .vote-down
-    text-decoration:none;
-
-.new-task-form
-  margin-bottom:5px;
-
-
-// begin rewrite css 2013-03-04
+// 2. Columns & Tasks
+// ===================
 
+// main columns
+// ------------
 .task-column
   padding: 1.5em
   background: #f5f5f5
   border: 1px solid #ccc
   font-family: 'Lato', sans-serif
-  h2
+
+  .task-column_title
     margin: 0 0 0.5em
     padding: 0
-  
-  .nav-tabs
-    margin-top: 0.75em
 
-  .option-box
-    .option-action
-      margin-left: 0.25em
+  hr
+    border: 0
+    border-bottom: 1px solid #ddd
 
-
-.rewards
+// add new task form
+// -----------------
+.addtask-form
   margin-bottom: 0.75em
+  outline: 1px solid rgba(0,0,0,0.15)
+  outline-offset: -1px
 
+// the input field
+.addtask-field
+  display: inline-block
+  width: 80% // fallback for Safari 5.1
+  width: calc(unquote('100% - 3em'))
+  input
+    font-family: 'Lato', sans-serif
+    border: 0
+    outline: 0
+    border-radius: 0
+    box-shadow: none
+    background-color: white
+    height: 2.5em
+    padding: 0 0 0 0.5em
+    width: 100%
+    &:focus
+      box-shadow: inset 0 0 3px darken($best, 20%)
+
+// the button
+.addtask-btn
+  display: inline-block
+  // important for overriding bootstrap, remove later
+  width: 1.51515em !important
+  height: 1.51515em
+  padding: 0
+  font-size: 1.65em
+  line-height: 1.55
+  outline: 0
+  border: 0
+  background-color: darken($best, 20%)
+  opacity: 0.75
+  &:hover,
+  &:focus
+    opacity: 1
+    background-color: darken($best, 20%)
+  &:active
+    background-color: darken($best, 30%)
+    opacity: 1
+
+
+// an individual task entry
+// ------------------------
 .task
   list-style: none
   clear: both
@@ -126,114 +112,109 @@ li:hover .task-meta-controls .hover-show
   margin-bottom: 0.75em
   outline: 1px solid rgba(0,0,0,0.1)
   outline-offset: -1px
-  -webkit-background-clip: padding-box
-  border-radius: 0.25em
-  // overflow: hidden
+  &:hover
+    cursor: move
   &:last-child
     margin-bottom: 0
 
+// task content
+.task-text
+  display: inline
+
+
+// primary task commands
+// ----------------------
 .task-controls
   display: inline
   margin-left: -0.5em
   margin-right: 0.5em
-.task-text
-  display: inline
 
-.task-checker
-  label
+  // plus/minus commands
+  .task-action-btn
+    display: inline-block
+    width: 1.773em
+    height: 1.773em
+    padding: 0
+    font-size: 1.41em
+    line-height: 1.773
+    text-align: center
+    color: black
+    vertical-align: top
+    border-right: 1px solid rgba(0,0,0,0.25)
+    &:last-child
+      border: 0
+    &:hover, &:focus
+      text-decoration: none
+
+  // checkbox
+  .task-checker input[type=checkbox]
+    margin: 0
+    padding: 0
+    visibility: hidden
+
+  .task-checker label
     display: inline-block
     width: 2.5em
     height: 2.5em
-    padding: 0
     margin: 0
     vertical-align: top
     cursor: pointer
+
+    // uncompleted icon
     &:after
       content: '○'
       display: block
-      opacity: 0.2
+      font-size: 3em
       line-height: 0.76
       text-align: center
       color: black
-      font-size: 3em
+      opacity: 0.2
+
+    // hint at completed icon
     &:hover:after,
     &:focus:after
       content: '¬'
-      display: block
       font-size: 3em
-      color: black
-      transform: rotate(135deg)
       line-height: 1.1
       text-align: left
+      transform: rotate(135deg)
       opacity: 0.5 !important
     &:active:after
       opacity: 0.75 !important
 
-  & input[type=checkbox]:checked + label:after
+  // completed icon
+  .task-checker input[type=checkbox]:checked + label:after
     content: '¬'
     transform: rotate(135deg)
     line-height: 1.1
     text-align: left
     opacity: 0.75
-  
-  input[type=checkbox]
-    margin: 0
-    padding: 0
-    visibility: hidden
 
-.addtask-form
-  margin-bottom: 0.75em
-  .addtask-field
-    display: inline-block
-    width: 80% // fallback for Safari 5.1
-    width: calc(unquote('100% - 3em'))
-    input
-      font-family: 'Lato', sans-serif
-      outline: 0
-      border: 0
-      box-shadow: none
-      background-color: white
-      height: 2.5em
-      padding: 0 0 0 0.5em
-      width: 100%
-      &:focus
-        box-shadow: inset 0 0 3px darken($best, 20%)
-  .addtask-btn
-    display: inline-block
-    width: 1.51515em
-    height: 1.51515em
-    padding: 0
-    font-size: 1.65em
-    line-height: 1.55
-    outline: 0
-    border: 0
-    background-color: darken($best, 20%)
-    opacity: 0.5
-    &:hover,
-    &:focus
-      opacity: 0.75
-      background-color: darken($best, 20%)
-    &:active
-      background-color: darken($best, 30%)
-      opacity: 1
 
-.task-action-btn
-  display: inline-block
-  width: 1.773em
-  height: 1.773em
-  padding: 0
-  font-size: 1.41em
-  line-height: 1.773
-  text-align: center
-  color: black
-  vertical-align: top
-  border-right: 1px solid rgba(0,0,0,0.25)
-  &:last-child
-    border: 0
-  &:hover,
-  &:focus
-    text-decoration: none
-  // &.action-plus
-  //   background-color: darken($color-good, 20%)
-  // &.action-minus
-  //   background-color: darken($color-worst, 20%)
\ No newline at end of file
+// secondary task commands
+// -----------------------
+.task-meta-controls
+  float: right
+  margin-left: 0.25em
+  opacity: 0.25
+  a > i
+    margin-left: 0.125em
+  .task-notes
+    margin-left: 0.125em
+
+.task:hover .task-meta-controls
+  opacity: 1
+
+
+// .context-enabled
+//   .display-context-dependant,
+//   .task-list li
+//     display: none
+
+//   &.context-completed
+//     .show-for-completed, .completed
+//       display: block
+
+//   &.context-uncompleted
+//     .show-for-uncompleted, .uncompleted
+//       display: block
\ No newline at end of file
diff --git a/views/app/tasks.html b/views/app/tasks.html
index 0826a1f742..fd880e1767 100644
--- a/views/app/tasks.html
+++ b/views/app/tasks.html
@@ -4,7 +4,7 @@
     <!-- Habits Column -->
     <div class="module">
         <div class="task-column habits">
-            <h2>Habits</h2>
+            <h2 class="task-column_title">Habits</h2>
             <app:newTask type="habit" inputValue="{_newHabit}" placeHolder="New Habit" />
             <ul class="habits">{#each _habitList as :task}<app:task />{/}</ul>
         </div>
@@ -13,7 +13,7 @@
     <!-- Dailys Column -->
     <div class="module">
         <div class="task-column dailys">
-            <h2>Daily</h2>
+            <h2 class="task-column_title">Daily</h2>
             <app:newTask type="daily" inputValue="{_newDaily}" placeHolder="New Daily" />
             <ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
         </div>
@@ -29,7 +29,7 @@
                 <a class="option-action" href="/v1/users/{{_user.id}}/calendar.ics?apiToken={{_user.apiToken}}" rel=tooltip title="iCal"><i class=icon-calendar></i></a>
                 <!-- <a href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}" rel=tooltip title="Google Calendar"><i class=icon-calendar></i></a> -->
             </span>
-            <h2>Todos</h2>
+            <h2 class="task-column_title">Todos</h2>
             <div class="display-context-dependant show-for-uncompleted">
                 <app:newTask type="todo" inputValue="{_newTodo}" placeHolder="New Todo" />
             </div>
@@ -38,7 +38,6 @@
             </ul>
             <div class="display-context-dependant show-for-completed">
                 <a class='btn' x-bind=click:clearCompleted>Clear Completed</a>
-                <p>&nbsp;</p>
             </div>
             <div id="todos-chart" style="display:none;"></div>
             <ul class="todo-status-toggler nav nav-tabs">
@@ -53,7 +52,7 @@
         <div class="task-column rewards">
             <!--Title -->
             <div class="row-fluid">
-                <div class="span6"><h2>Rewards</h2></div>
+                <div class="span6"><h2 class="task-column_title">Rewards</h2></div>
                 <div class="span6">
                     {#unless _view.activeTabPets}
                     <table><tr>
@@ -145,16 +144,16 @@
     <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, :task.repeat)}">
         <!-- 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>
-
+            <!-- edit -->
+            <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>
+            <!-- delete -->
+            <a x-bind=click:del rel=tooltip title="Delete"><i class="icon-trash"></i></a>
+            <!-- chart -->
+            <!-- removing for now cuz it's broken -->
+            {#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> -->
+            {/}
+            <!-- notes -->
             {#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>
             {/}