style Todo tabs, misc stuff

styles/app/tasks.styl

@@ -261,7 +261,6 @@ for $stage in $stages
       font-weight: bold
       text-decoration: underline
 
-
   .option-content
     height: 2.5em
     width: 100%
@@ -299,21 +298,42 @@ for $stage in $stages
   padding: 0 0.5em
   &.active
     opacity: 1
-  &.spacious
-    margin: 0.75em 0
-    font-size: 1.5em
-    opacity: 1
 
+.tile.spacious
+  margin: 0.75em 0
+  font-size: 1.5em
+  opacity: 1
+.tile.bright
+  background-color: lighten($best, 20%)
+  &:hover, &:focus
+    background-color: lighten($best, 40%)
 
-// .context-enabled
+// todo context switching
-//   .display-context-dependant,
+.context-enabled
-//   .task-list li
+  .display-context-dependant,
-//     display: none
+  .task-list li
+    display: none
 
-//   &.context-completed
+  &.context-completed
-//     .show-for-completed, .completed
+    .show-for-completed, .completed
-//       display: block
+      display: block
 
-//   &.context-uncompleted
+  &.context-uncompleted
-//     .show-for-uncompleted, .uncompleted
+    .show-for-uncompleted, .uncompleted
-//       display: block
+      display: block
+
+// nav tabs
+.nav-tabs
+  margin-top: 1.5em
+.nav-tabs > li
+  &.active > a
+    color: #333
+    &:hover
+      margin-top: 1px
+  > a
+    border-radius: 0 !important
+    margin-top: 1px
+    color: #333
+    &:hover
+      border-top: 0
+      margin-top: 2px

views/app/tasks.html

@@ -22,6 +22,7 @@
     <!-- Todos Column -->
     <div class="module">
         <div class="task-column todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
+            <!-- todo export/graph options -->
             <span class='option-box pull-right'>
                 {#if _user.history.todos}
                   <a class="option-action" x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
@@ -30,16 +31,21 @@
                 <!-- <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 class="task-column_title">Todos</h2>
+
+            <!-- create new todo -->
             <div class="display-context-dependant show-for-uncompleted">
                 <app:newTask type="todo" inputValue="{_newTodo}" placeHolder="New Todo" />
             </div>
+
+            <!-- list of all the todos -->
             <ul class='todos task-list'>
                 {#each _todoList as :task}<app:task />{/}
             </ul>
-            <div class="display-context-dependant show-for-completed">
+            
-                <a class='btn' x-bind=click:clearCompleted>Clear Completed</a>
+            <button class='task-action-btn tile spacious bright display-context-dependant show-for-completed' x-bind=click:clearCompleted>Clear Completed</button>
-            </div>
             <div id="todos-chart" style="display:none;"></div>
+            
+            <!-- remaining/completed tabs -->
             <ul class="todo-status-toggler nav nav-tabs">
                 <li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
                 <li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>