Add a glow to taken styled books

public/css/styles.css

@@ -57,6 +57,11 @@
   margin-top: -20%;
   z-index: 2;
 }
+.book .spine.is-success {
+  -webkit-box-shadow: inset 0px 0px 99px 10px rgba(230,252,106,1);
+  -moz-box-shadow: inset 0px 0px 99px 10px rgba(230,252,106,1);
+  box-shadow: inset 0px 0px 99px 10px rgba(230,252,106,1);
+}
 
 .spine .text-container {
   width: 260px;

public/js/little-library.js

@@ -51,9 +51,14 @@ $(document).ready(function() {
 
   $('.take-book').click(function() {
     var id = $(this).data('book');
-    $('#book_' + id).find('.box')
-      .removeClass('box').addClass(['notification', 'is-success'])
-      .attr('title', 'This can be downloaded until you leave this page');
+    var book = $('#book_' + id).find('.spine');
+    if (book) {
+      book.addClass('is-success');
+    } else {
+      book = $('#book_' + id).find('.box');
+      book.removeClass('box').addClass(['notification', 'is-success'])
+    }
+    book.attr('title', 'This can be downloaded until you leave this page');
     socket.emit('take book', id);
     downloadButton = this;
     $(this).addClass('is-loading');

templates/elements/book.html

@@ -5,10 +5,6 @@
         <h2 class="title" style="color:{{textColor}}">{{title}}</h2>
         <h4 class="subtitle" style="color:{{textColor}}">{{author}}</h4>
       </div>
-      <!-- div class="tags has-addons">
-        <span class="tag">File Format</span>
-        <span class="tag is-info">{{fileType}}</span>
-      </div -->
     </div>
   </div>