Alamantus
/
little-library
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix positioning of title/author

This commit is contained in:
Robbie Antenesse 2019-01-26 11:55:15 -06:00
parent a117a9fce8
commit e5f6736f02
3 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/css/styles.css
View File

@ -60,7 +60,10 @@
.spine .text-container {
width: 260px;
transform: rotate(90deg) translateX(108px) translateY(58px);
height: 100px;
transform: rotate(90deg) translateX(82px) translateY(80px);
overflow: hidden;
word-break: break-all;
}
.spine .title {
font-size: 1.3em;
@ -70,21 +73,23 @@
}
.book-slot.is-thin .book .spine .text-container {
transform: rotate(90deg) translateX(108px) translateY(78px);
height: 80px;
transform: rotate(90deg) translateX(92px) translateY(92px);
}
.book-slot.is-thick .book .spine .text-container {
transform: rotate(90deg) translateX(108px) translateY(40px);
height: 120px;
transform: rotate(90deg) translateX(72px) translateY(72px);
}
.book.is-short .spine .text-container {
width: 230px;
transform: rotate(90deg) translateX(98px) translateY(40px);
transform: rotate(90deg) translateX(68px) translateY(66px);
}
.book-slot.is-thin .book.is-short .spine .text-container {
transform: rotate(90deg) translateX(98px) translateY(60px);
transform: rotate(90deg) translateX(78px) translateY(76px);
}
.book-slot.is-thick .book.is-short .spine .text-container {
transform: rotate(90deg) translateX(98px) translateY(20px);
transform: rotate(90deg) translateX(58px) translateY(56px);
}
.book.is-short .spine .title {
font-size: 1.1em;
@ -94,17 +99,17 @@
}
.book.is-tall .spine .text-container {
width: 290px;
transform: rotate(90deg) translateX(120px) translateY(78px);
transform: rotate(90deg) translateX(98px) translateY(95px);
}
.book-slot.is-thin .book.is-tall .spine .text-container {
transform: rotate(90deg) translateX(120px) translateY(98px);
transform: rotate(90deg) translateX(108px) translateY(106px);
}
.book-slot.is-thick .book.is-tall .spine .text-container {
transform: rotate(90deg) translateX(120px) translateY(58px);
transform: rotate(90deg) translateX(88px) translateY(86px);
}
.book.is-tall .spine .title {
font-size: 1.5em;
}
.book.is-tall .spine .subtitle {
font-size: 1.3em;
}
.book.is-tall .spine .subtitle {
font-size: 1.1em;
}

7
routes/get_home.js
View File

@ -49,8 +49,11 @@ module.exports = function (app) {
id,
title: bookData.title,
author: bookData.author,
thickness: fileDetails.size > (maxSize * 0.3) ? 'is-thick' : (fileDetails.size < (maxSize * 0.6) ? 'is-thin' : ''),
tallness: bookData.title.length > 15 ? 'is-tall' : (bookData.title.length < 8 ? 'is-short' : ''),
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',
fileType: bookData.fileType,
modal,
});

6
templates/elements/book.html
View File

@ -1,9 +1,9 @@
<div class="book-slot {{thickness}} column is-narrow is-paddingless" id="book_{{id}}">
<div class="book {{tallness}} modal-button" data-modal="{{id}}">
<div class="spine">
<div class="spine" style="background:{{spineColor}}">
<div class="text-container">
<h2 class="title">{{title}}</h2>
<h4 class="subtitle">{{author}}</h4>
<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>