diff --git a/examples/todos/client/todos.css b/examples/todos/client/todos.css index 62c1f53534..a98b7df26a 100644 --- a/examples/todos/client/todos.css +++ b/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 { diff --git a/examples/todos/client/todos.html b/examples/todos/client/todos.html index 1ff4374c73..09a8fcb913 100644 --- a/examples/todos/client/todos.html +++ b/examples/todos/client/todos.html @@ -19,22 +19,14 @@
- 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 Add new tag - 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. -
- -- Inspired by Backbone's - Todo Demo. -
+ 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. +