jvortmann: introduced glyphicons-halflings icons. Fixed fork-me image…

…. Moved remove link to header. Removed unused images.

public/stylesheets/sass/easy_retro.scss

@@ -40,6 +40,11 @@ $post_it_font_size: 12px;
     border-bottom: 2px solid rgba($color, 0.5);
     &:hover {
       background-color: darken($color, 25%);
+      .icon {
+        &:hover {
+          opacity: 0.7;
+        }
+      }
     }
   }
 }
@@ -84,10 +89,14 @@ body {
   @include create-box-shadow;
 
   .header {
-    height: 20px;
-    width: $post_it_side;
+    height: 17px;
+    width: $post_it_side -10px;
     font-weight: bold;
     cursor: move;
+    padding: 4px 4px 0 5px;
+    .icon {
+      opacity: 0;
+    }
   }
 
   .content {
@@ -101,9 +110,21 @@ body {
   }
 
   .footer {
+    opacity: 0;
     height: 20px;
-    width: $post_it_side;
-    padding: 0 2px 0 2px;
+    width: $post_it_side -10px;
+    padding: 5px 5px 0 5px;
+  }
+
+  &:hover {
+    .header {
+      .icon {
+        opacity: 0.3;
+      }
+    }
+    .footer {
+      opacity: 1;
+    }
   }
 }
 
@@ -145,41 +166,59 @@ menu {
   }
 }
 
-.hidden {
-  display : none;
-}
-
 .icon {
   float: left;
   opacity: 0.3;
   &:hover {
     opacity: 0.7;
   }
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+  vertical-align: text-top;
+  background-image: url("../images/glyphicons-halflings.png");
+  background-position: 14px 14px;
+  background-repeat: no-repeat;
+  *margin-right: .3em;
+}
+
+.delete {
+  background-position: -312px 0;
+  float: left;
 }
 
-.vote {
-  @include flip-horizontally;
-  height: 25px;
-  width: 25px;
-  margin-top: 3px;
-  margin-right: -5px;
+.vote-up {
+  background-position: -289px -96px;
 }
 
-.list {
-  height: 25px;
-  width: 20px;
-  margin-top: 3px;
+.vote-down {
+  background-position: -312px -96px;
 }
 
-.edit {
-  height: 20px;
-  width: 20px;
-  margin-top: 7px;
+.actions {
+  background-position: -360px -48px;
 }
 
-.delete {
-  height: 15px;
-  width: 15px;
-  margin-top: 8px;
-  margin-left: 1px;
+.notes {
+  background-position: 0 -72px;
+}
+
+.responsible {
+  background-position: -168px 0;
+}
+
+.tags {
+  background-position: 0 -48px;
+}
+
+.hidden {
+  display : none;
+}
+
+.fork-me-flag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0;
 }

views/board.slim

@@ -8,6 +8,7 @@ html
     script{type="text/javascript" data-main="javascripts/main" src="javascripts/require.js"}
   body
     a href="http://github.com/thiagotnunes/easy-retro"
+      img.fork-me-flag{src="../images/fork_me.png" alt="Fork me on GitHub"}
     menu
       span.handwritten.big Add
       input#add_well.add.well{type="button"}
@@ -17,13 +18,12 @@ html
     #board
       #base_post_it.post_it.hidden.handwritten.big
         .header
+          a.delete.icon{href="#" alt="delete"}
         .content{contenteditable="true"}
         .footer
-          a.hidden href="#"
-            img.vote.icon{src="images/thumbs_up.png" alt="vote up"}
-          a.hidden href="#"
-            img.list.icon{src="images/list_items.png" alt="list item"}
-          a.hidden href="#"
-            img.edit.icon{src="images/edit.png" alt="edit"}
-          a href="#"
-            img.delete.icon{src="images/trash.png" alt="delete"}
+          a.hidden.vote-up.icon{href="#" alt="vote up"}
+          a.hidden.vote-down.icon{href="#" alt="vote down"}
+          a.hidden.actions.icon{href="#" alt="actions"}
+          a.hidden.notes.icon{href="#" alt="notes"}
+          a.hidden.responsible.icon{href="#" alt="responsible"}
+          a.hidden.tags.icon{href="#" alt="tags"}