Permalink
Browse files

Styles items control

  • Loading branch information...
aubreyrhodes committed Apr 24, 2012
1 parent 93440a4 commit 3e62e8101d660bc544aa79ed5275fd764f3307a8
@@ -1,14 +1,11 @@
<h1>To-Done Items</h1>
-<ul class="unstyled">
+<ul class="unstyled items">
<% for item in @items: %>
- <li class="item" data-id="<%= item.id %>">
- <div class="form-actions">
- <a data-type="show"><%= item.title %></a>
-
- <a class="btn btn-primary item-actions" data-type="edit">Edit</a>
- <a class="btn btn-danger item-actions" data-type="destroy">Destroy</a>
- </div>
+ <li class="item input-prepend input-append" data-id="<%= item.id %>">
+ <a class="btn <%- if item.completed: %> btn-success <% end %>"><i class="icon-ok"></i></a>
+ <span class="item-title"><%= item.title %></span>
+ <a class="btn btn-danger item-delete-btn" data-type="destroy">Destroy</a>
</li>
<% end %>
</ul>
@@ -1,3 +1,7 @@
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
+
+jQuery(document).ready ->
+ jQuery("#app").on("mouseover", ".item", -> jQuery('.item-delete-btn', @).show())
+ jQuery("#app").on("mouseout", ".item", -> jQuery('.item-delete-btn', @).hide())
@@ -28,7 +28,24 @@ body { padding-top: 60px; }
// Example:
// @linkColor: #ff0000;
-.item-actions{
- float: right;
- margin-right: 5px;
- }
+.item{
+ .item-title{
+ width: 200px;
+ display: inline-block;
+ border: 1px solid #CCC;
+ height: 18px;
+ padding: 4px;
+ margin-right: -3px;
+ margin-top: 4px;
+ margin-left: -3px;
+ background-color: whiteSmoke;
+ }
+ .btn{
+ margin-top: -3px;
+ }
+ .item-delete-btn{
+ display: none;
+ padding-top: 6px;
+ padding-bottom: 5px;
+ }
+}

0 comments on commit 3e62e81

Please sign in to comment.