more todos tweaks

examples/todos/client/todos.css

@@ -28,14 +28,8 @@ input {
   font-size: 100%;
 }
 
-
-.tag {
-    opacity: 1;
-    transition: opacity 0.3s linear;
-    -moz-transition: opacity 0.3s linear;
-    -webkit-transition: opacity 0.3s linear;
-    -o-transition: opacity 0.3s linear;
-    position: relative;
+a, a:visited, a:active {
+   color: #258;
 }
 
 #top-tag-filter, #main-pane, #side-pane, #bottom-pane {
@@ -50,10 +44,11 @@ input {
 #top-tag-filter {
     height: 50px;
     bottom: auto;
+    background: #ddd;
 }
 
 #bottom-pane {
-    height: 120px;
+    height: 80px;
     top: auto;
     font-size: 80%;
     border-top: 1px solid #333;
@@ -66,14 +61,14 @@ input {
 
 #main-pane {
     top: 50px;
-    bottom: 120px;
+    bottom: 80px;
     left: 220px;
     overflow: auto;
 }
 
 #side-pane {
     top: 50px;
-    bottom: 120px;
+    bottom: 80px;
     width: 200px;
     right: auto;
     overflow: auto;
@@ -91,6 +86,14 @@ input {
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -o-border-radius: 4px;
+
+    opacity: 1;
+    transition: opacity 0.3s linear;
+    -moz-transition: opacity 0.3s linear;
+    -webkit-transition: opacity 0.3s linear;
+    -o-transition: opacity 0.3s linear;
+
+    position: relative;
 }
 
 #tag-filter .label {
@@ -102,18 +105,27 @@ input {
 
 #tag-filter .tag {
     margin-top: 10px;
+    border: 1px solid #777;
 }
 
 #tag-filter .selected {
     background: #69d;
 }
 
+#lists {
+    margin-top: 5px;
+}
+
 #lists .list {
     padding: 3px 6px;
 }
 
 #lists .selected {
+    padding: 2px 6px;
     background: #9be;
+    border-top: 1px solid #999;
+    border-bottom: 1px solid #999;
+    font-weight: bold;
 }
 
 #createList {
@@ -126,7 +138,9 @@ input {
 }
 
 #new-todo {
+    margin-top: 5px;
     margin-bottom: 10px;
+    margin-left: 5px;
 }
 
 #items-view {
@@ -159,6 +173,12 @@ input {
     line-height: 1;
 }
 
+#todo-input {
+    width: 300px;
+    position: relative;
+    top: -3px;
+}
+
 #item-list .done .todo-text {
     text-decoration: line-through;
     color: #999;
@@ -196,7 +216,9 @@ input {
 }
 
 #item-list .todo .item-tags div.addtag {
-    
+    background: none;
+    color: #333;
+    border: 1px dashed #999;
 }
 
 #item-list .todo .check {

examples/todos/client/todos.html

@@ -19,22 +19,14 @@
 
   <div id="bottom-pane">
     <div id="help">
-      <p>
-        To get started, create a new todo list in the left sidebar by
-        typing its name in the text box.  Select a list by clicking on its
-        name, and rename by double clicking.  The active list appears in
-        the main window pane.  You can do the usual here: add items, check
-        them off as completed, and destroy items.  You can also tag items
-        with one or more tags, by clicking the blue <b>Add new tag</b>
-        button to the right.  All your in-use tags appear at the top.  You
-        can filter the list items by selecting a tag, or click the
-        leftmost button to return to the full list.
-      </p>
-
-      <p>
-        Inspired by Backbone's
-        <a href="http://documentcloud.github.com/backbone/examples/todos/index.html">Todo Demo</a>.
-      </p>
+      Select a list on the left to view the todo items, and use the
+      buttons at the top to filter by tag.
+      Create a new list or a new item on the current list using
+      the text boxes.
+      <br><b>Double-click</b> on a todo item or list name to edit it.
+      You can also add and remove tags on each item.
+      <br>
+      <a href="https://github.com/meteor/meteor/tree/master/examples/todos">View the source code.</a>
     </div>
   </div>
 
@@ -42,7 +34,7 @@
 
 <template name="tag_filter">
   <div id="tag-filter" class="tag-list">
-    <div class="label">Filter:</div>
+    <div class="label">Tag filter:</div>
     {{#each tags}}
       {{> tag_item}}
     {{/each}}
@@ -104,12 +96,12 @@
 
 <template name="todo_item">
   <li class="todo {{done_class}}">
-    <div class="destroy"></div>
     {{#if editing}}
       <div class="edit">
         <input id="todo-input" type="text" value="{{text}}" />
       </div>
     {{else}}
+      <div class="destroy"></div>
       <div class="display">
         <input class="check" name="markdone" type="checkbox" {{{done_checkbox}}} />
         <div class="todo-text">{{text}}</div>
@@ -125,7 +117,7 @@
         </div>
       {{else}}
         <div class="tag addtag">
-          (+)
+          +tag
         </div>
       {{/if}}
     </div>