Browse Source

Add a glow to taken styled books

master
Robbie Antenesse 3 years ago
parent
commit
a0cd714933
  1. 5
      public/css/styles.css
  2. 11
      public/js/little-library.js
  3. 4
      templates/elements/book.html

5
public/css/styles.css

@ -57,6 +57,11 @@ @@ -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;

11
public/js/little-library.js

@ -51,9 +51,14 @@ $(document).ready(function() { @@ -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');

4
templates/elements/book.html

@ -5,10 +5,6 @@ @@ -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>

Loading…
Cancel
Save