Feature: Add star button for specified pin

pinry/static/css/pinry.css

@@ -190,7 +190,7 @@ textarea {
     width: 240px;
 }
 
-.pin .editable {
+.pin .editor {
     background: rgba(255, 255, 255, 0.4);
     border: 2px solid rgba(255, 255, 255, 0.4);
     -webkit-border-radius: 4px;
@@ -202,11 +202,11 @@ textarea {
     color: white;
 }
 
-.pin:hover .editable {
+.pin:hover .editor {
     display: block;
 }
 
-.pin .editable .borderable {
+.pin .editor .borderable {
     background: rgba(0, 0, 0, 0.8);
     -webkit-border-radius: 4px;
        -moz-border-radius: 4px;

pinry/static/js/pinry.js

@@ -78,12 +78,12 @@ $(window).load(function() {
         // Show edit-buttons only on mouse over
         $('.pin').each(function(){
             var thisPin = $(this);
-            thisPin.find('.editable').hide();
+            thisPin.find('.editor').hide();
             thisPin.off('hover');
             thisPin.hover(function() {
-                thisPin.find('.editable').stop(true, true).fadeIn(300);
+                thisPin.find('.editor').stop(true, true).fadeIn(300);
             }, function() {
-                thisPin.find('.editable').stop(true, false).fadeOut(300);
+                thisPin.find('.editor').stop(true, false).fadeOut(300);
             });
         });
 

pinry/templates/includes/pins.html

@@ -2,16 +2,20 @@
     <script id="pins-template" type="text/x-handlebars-template">
         {{#each pins}}
         <div class="pin" data-id="{{id}}">
+            <div class="editor">
+                <div class="borderable">
+                    <span class="glyphicon glyphicon-heart" data-id="{{id}}"></span>
+                </div>
             {{#if editable}}
-                <div class="editable">
-                    <div class="borderable">
-                        <span class="glyphicon glyphicon-trash" data-id="{{id}}"></span>
-                    </div>
-                    <div class="borderable">
-                        <span class="glyphicon glyphicon-pencil" data-id="{{id}}"></span>
-                    </div>
+                <div class="borderable">
+                    <span class="glyphicon glyphicon-trash" data-id="{{id}}"></span>
+                </div>
+                <div class="borderable">
+                    <span class="glyphicon glyphicon-pencil" data-id="{{id}}"></span>
                 </div>
             {{/if}}
+            </div>
+
             <a href="{{image.standard.image}}" class="lightbox" data-id="{{id}}">
                 <div class="image-wrapper" style="width: {{image.thumbnail.width}}px; height: {{image.thumbnail.height}}px;">
                     <img src="{{image.thumbnail.image}}" width="{{image.thumbnail.width}}" height="{{image.thumbnail.height}}"/>