styling

samples/today-app/app/assets/partials/app/listStatus.html

@@ -1,9 +1,9 @@
-<div class=list-header">
+<div class="list-header clearfix">
     <div ng-show="!tasksIncomplete().length ">
         <h2><i>Nothing left to do! Go you!</i></h2>
     </div>
     <div ng-show="tasksIncomplete().length ">
-        <h2><b>Next: {{tasksIncomplete()[0].Description}}</b></h2>
-        <div class="pull-right time">{{ clock }}</div>
+        <div class="description"><b>
+            <div class="clock">{{ clock }}</div> - {{tasksIncomplete()[0].Description}}</b></div>
     </div>
 </div>

samples/today-app/app/assets/partials/app/listTasks.html

@@ -1,18 +1,22 @@
 <ng-include src="'partials/app/listStatus.html'"></ng-include>
-
-<h2>To do today</h2>
       <ul class="tasks">
-          <li ng-repeat="task in list.tasks | filter:{AddedLater: false }" >
+          <li ng-repeat="task in list.tasks | filter:{AddedLater: false }"
+            ng-class="task.Complete && 'complete' || 'incomplete'"
+          >
         <input class="toggle" type="checkbox" ng-model="task.Complete" ng-change="updateTask(task)"/>
-          <span class="taskDescription">{{task.Description}}</span>
+        <span
+            class="taskDescription">{{task.Description}}</span>
         <a ng-click="destroyTask(task)"><i class="icon icon-trash"></i></i></a>
         </li>
-      </ul>
-<h2>Tasks you added later...</h2>
+    </ul>
+    <div class="well later">
+        <h3>It's ok if you don't get to tasks you added later...</h3>
       <ul class="tasks">
-          <li ng-repeat="task in list.tasks | filter:{AddedLater: true }" >
+          <li ng-repeat="task in list.tasks | filter:{AddedLater: true }"
+          ng-class="task.Complete && 'complete' || 'incomplete'" >
           <input class="toggle" type="checkbox" ng-model="task.Complete" ng-change="updateTask(task)"/>
           <span class="taskDescription">{{task.Description}}</span>
         <a ng-click="destroyTask(task)"><i class="icon icon-trash"></i></a>
         </li>
-      </ul>
+    </ul>
+</div>

samples/today-app/app/assets/partials/app/sidebarAddTasks.html

@@ -1,5 +1,4 @@
 <div ng-show="list.tasks.length">
-    <div class="well">
     <h2>What else?</h2>
 <p>Come up with something else? Just jot it down in the text area and click the button. Don't worry. it won't count against your stats for today.</p>
 
@@ -8,5 +7,4 @@ <h2>What else?</h2>
     </div>
 <div class="controls clearfix"><input type="submit" value="Add" ng-click="addTasks(tasksToAdd); tasksToAdd=''" class="widget btn btn-primary pull-right">
 </div>
-    </div>
  </div>

samples/today-app/app/assets/partials/app/sidebarProgress.html

@@ -1,4 +1,7 @@
-<span><small>Finished {{ initialTasksComplete().length }} of {{ initialTasks().length }} (+ {{ laterTasksComplete().length }} bonus)</small></span>
+<div class="progress-wrapper">
+    <h2>Progress</h2>
+    <span class="progress-status"><small>{{ initialTasksComplete().length }} of {{ initialTasks().length }} (+{{ laterTasksComplete().length }} bonus)</small></span>
 <div class="progress progress-striped">
     <div class="bar" style="width: {{initialTasksCompletePercentage()}}%;"></div>
 </div>
+</div>

samples/today-app/app/styles/themes/custom/_overrides.less

@@ -16,20 +16,34 @@ body {
 
 ul.tasks {
     list-style: none;
-}
-
-ul.tasks li {
+    margin-top: 1em;
+    margin-bottom: 1em;
+ li {
     font-size: 1.5em;
+    line-height: 1.7em;
+    &.complete {
+        color: @grayLight;
+        span {text-decoration: line-through; }
+    }
     i.icon {
     font-size: 0.7em;
+    line-height: 0.5em;
     vertical-align:text-bottom;
-    height: inherit;
-    line-height: inherit;
     color: #999;
-    &:hover {
-        color: @red;
+    display:none;
+    }
+    &:hover i.icon {
     text-decoration: none;
+    display:inline-block;
     }
+}
+}
+
+.later {
+    h3 { font-weight: bold; }
+    ul.tasks {
+        margin: 0;
+        font-size: 0.8em;
     }
 }
 
@@ -44,3 +58,22 @@ ul.tasks li {
 .navbar a {
     color: @white;
 }
+
+.list-header {
+        font-size: 2em;
+.clock {
+    display: inline-block;
+}
+.description {
+    .now {
+    color: @grayLight;
+    }
+    padding: 0.25em;
+}
+}
+
+.progress-wrapper {
+    .progress-status {
+    display: none;
+    }
+}