Color the books according to their id hash

This commit is contained in:
Robbie Antenesse 2019-01-26 12:16:43 -06:00
parent e5f6736f02
commit f95e5cd65c
4 changed files with 15 additions and 4 deletions

View File

@ -23,6 +23,7 @@
"socket.io": "^2.2.0",
"socket.io-client": "^2.2.0",
"striptags": "^3.1.1",
"tinycolor2": "^1.4.1",
"unused-filename": "^1.0.0"
}
}

View File

@ -15,7 +15,7 @@
width: 100px;
height: 300px; /* The tallest a book could be */
border-bottom: 4px solid saddlebrown;
margin: 10px 0 -4px !important;
margin: 10px 1px -4px !important;
}
.book-slot.is-thin {
width: 80px;

View File

@ -2,6 +2,7 @@ const path = require('path');
const fs = require('fs');
const snarkdown = require('snarkdown');
const fecha = require('fecha');
const tinycolor = require('tinycolor2');
const settings = require('../settings.json');
@ -45,6 +46,10 @@ module.exports = function (app) {
footer: '<a class="button close">Close</a> <a class="button is-success modal-button" data-modal="' + confirmId + '">Take Book</a>',
});
const maxSize = settings.maxFileSize > 0 ? settings.maxFileSize : 10;
let spineColor = tinycolor('#' + id.substr(0, 6));
if (!spineColor.isValid()) {
spineColor = tinycolor.random();
}
return app.templater.fill('./templates/elements/book.html', {
id,
title: bookData.title,
@ -52,8 +57,8 @@ module.exports = function (app) {
thickness: (fileDetails.size > (maxSize * 0.3)) || (bookData.title.length > 28)
? 'is-thick' : (fileDetails.size < (maxSize * 0.6) ? 'is-thin' : ''),
tallness: bookData.title.length > 16 ? 'is-tall' : (bookData.title.length < 8 ? 'is-short' : ''),
spineColor: '#ff0000',
textColor: '#ffffff',
spineColor: spineColor.toString(),
textColor: spineColor.isLight() ? '#000000' : '#ffffff',
fileType: bookData.fileType,
modal,
});
@ -63,7 +68,7 @@ module.exports = function (app) {
books = '<div class="column"><div class="content">The shelf is empty. Would you like to <a href="/give">add a book</a>?</div></div>';
}
const body = '<h2 class="title">Available Books</h2><div class="bookshelf columns is-gapless is-multiline">' + books + '</div>';
const body = '<h2 class="title">Available Books</h2><div class="bookshelf columns is-gapless is-multiline is-mobile">' + books + '</div>';
const html = app.templater.fill('./templates/htmlContainer.html', {
title: 'View',
resourcePath: (req.url.substr(-1) === '/' ? '../' : './'),

View File

@ -908,6 +908,11 @@ striptags@^3.1.1:
resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.1.1.tgz#c8c3e7fdd6fb4bb3a32a3b752e5b5e3e38093ebd"
integrity sha1-yMPn/db7S7OjKjt1LltePjgJPr0=
tinycolor2@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
to-array@0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"