From b038b745346502594c8e086ec9dd379127fd7cc3 Mon Sep 17 00:00:00 2001
From: Zachary Kain <zakkain@gmail.com>
Date: Mon, 25 Mar 2013 10:05:44 -0400
Subject: [PATCH] checkbox shenanigans fix.

---
 styles/app/items.styl | 12 ++++++++++--
 styles/app/tasks.styl | 42 ++++++++++++++++++++++++++++++------------
 views/app/tasks.html  |  4 ++--
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/styles/app/items.styl b/styles/app/items.styl
index dc8700d359..1c2edbb42c 100644
--- a/styles/app/items.styl
+++ b/styles/app/items.styl
@@ -10,8 +10,9 @@
 
 .btn-buy
   width: 4.5em
-  height: 3em
-  padding: 0.75em 0 0
+  min-height: 3em
+  height: 100%
+  padding: 0.75em 0 0 0.5em
   text-align: center
   vertical-align: top
   background-color: $better
@@ -32,9 +33,16 @@
 .reward-cost
   display: inline
 
+.rewards .task-text
+  padding-left: 5em
+
+.rewards .task-options
+  background: white
 
 // store items
 .btn-reroll
+  width: 2.5em
+  padding-left: 0.25em
   background-color: $better
   cursor: pointer
   box-shadow: inset -1px -1px 0 rgba(0,0,0,0.1)
diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl
index cd15eea245..f7bd64a627 100644
--- a/styles/app/tasks.styl
+++ b/styles/app/tasks.styl
@@ -16,6 +16,8 @@ for $stage in $stages
       background-color: darken($stage[1], 30%)
       &:hover, &:focus
         background-color: darken($stage[1], 40%)
+    .task-options
+      background-color: $stage[1]
 
 // completed has to be outside the loop to override the color class
 .completed
@@ -98,15 +100,13 @@ for $stage in $stages
 // an individual task entry
 // ------------------------
 .task
-  overflow: hidden
   list-style: none
   clear: both
-  padding: 0 0.5em 0 0.5em
+  padding: 0
   min-height: 3em
-  line-height: 3
   margin-bottom: 0.75em
-  outline: 1px solid rgba(0,0,0,0.1)
-  outline-offset: -1px
+  box-shadow: inset 0 0 1px rgba(0,0,0,0.5)
+  position: relative
   &:hover
     cursor: move
   &:last-child
@@ -114,9 +114,13 @@ for $stage in $stages
 
 // task content
 .task-text
-  padding: 0.75em 0
+  display: block
+  padding: 0.75em 0 0.75em 3.5em
   line-height: 1.4
 
+.habit-wide .task-text
+  padding-left: 7em
+
 // when a task is being dragged
 .task.ui-sortable-helper {
   box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 0 5px rgba(0,0,0,0.1)
@@ -132,6 +136,14 @@ for $stage in $stages
   margin-left: -0.5em
   margin-right: 0.5em
 
+.task-controls.task-primary
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  float: none
+  margin: 0
+
 // plus/minus commands
 .task-action-btn
   display: inline-block
@@ -159,7 +171,7 @@ for $stage in $stages
 .task-checker label
   display: inline-block
   width: 3em
-  height: 3em
+  height: 100%
   margin: 0
   vertical-align: top
   cursor: pointer
@@ -204,7 +216,7 @@ for $stage in $stages
     opacity: 0.2
 
   label:after
-    content: ''
+    content: '◻'
   label:before
     position: absolute
     left: 0
@@ -241,7 +253,8 @@ for $stage in $stages
 // -----------------------
 .task-meta-controls
   float: right
-  margin-left: 0.25em
+  margin: 0.75em 0.5em 0 0.25em
+  height: 1em
   opacity: 0.25
   a > i
     margin-left: 0.125em
@@ -256,10 +269,15 @@ for $stage in $stages
 
 // task editing
 // ------------
+form
+  margin-bottom: 0 // stupid bootstrap override
+
 [class$="-options"]
-  padding: 0 0.5em
-  margin-top: 1.25em
+  padding: 1em 1em 0
   color: #333
+  z-index: 0
+  position: relative
+  background-color: 
 
   .option-group
     border-bottom: 1px solid rgba(0,0,0,0.1)
@@ -340,7 +358,7 @@ for $stage in $stages
   opacity: 1
 .tile.spacious
   margin: 0.75em 0
-  font-size: 1.5em
+  font-size: 1.25em
   opacity: 1
 .tile.bright
   background-color: lighten($best, 20%)
diff --git a/views/app/tasks.html b/views/app/tasks.html
index e1ca4846bf..f92feebcdd 100644
--- a/views/app/tasks.html
+++ b/views/app/tasks.html
@@ -67,7 +67,7 @@
 
 <!-- all the parts of a single task -->
 <task:>
-    <li data-id={{:task.id}} class="task {taskClasses(:task)}">
+    <li data-id={{:task.id}} class="task {taskClasses(:task)} {#if :task.down}{#if :task.up}habit-wide{/}{/}">
         
         <!-- right-hand side control buttons -->
         <div class="task-meta-controls">
@@ -87,7 +87,7 @@
         </div>
 
         <!-- left-hand side checkbox -->
-        <div class="task-controls">
+        <div class="task-controls task-primary">
             <!-- Habits -->
             {#if equal(:task.type, 'habit')}
             {#if :task.up}<a class="task-action-btn" data-direction=up x-bind=click:score>＋</a>{/}