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 { .spine .text-container {
width: 260px; 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 { .spine .title {
font-size: 1.3em; font-size: 1.3em;
@ -70,21 +73,23 @@
} }
.book-slot.is-thin .book .spine .text-container { .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 { .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 { .book.is-short .spine .text-container {
width: 230px; 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 { .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 { .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 { .book.is-short .spine .title {
font-size: 1.1em; font-size: 1.1em;
@ -94,17 +99,17 @@
} }
.book.is-tall .spine .text-container { .book.is-tall .spine .text-container {
width: 290px; 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 { .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 { .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 { .book.is-tall .spine .title {
font-size: 1.5em;
}
.book.is-tall .spine .subtitle {
font-size: 1.3em; 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, id,
title: bookData.title, title: bookData.title,
author: bookData.author, author: bookData.author,
thickness: fileDetails.size > (maxSize * 0.3) ? 'is-thick' : (fileDetails.size < (maxSize * 0.6) ? 'is-thin' : ''), thickness: (fileDetails.size > (maxSize * 0.3)) || (bookData.title.length > 28)
tallness: bookData.title.length > 15 ? 'is-tall' : (bookData.title.length < 8 ? 'is-short' : ''), ? '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, fileType: bookData.fileType,
modal, 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-slot {{thickness}} column is-narrow is-paddingless" id="book_{{id}}">
<div class="book {{tallness}} modal-button" data-modal="{{id}}"> <div class="book {{tallness}} modal-button" data-modal="{{id}}">
<div class="spine"> <div class="spine" style="background:{{spineColor}}">
<div class="text-container"> <div class="text-container">
<h2 class="title">{{title}}</h2> <h2 class="title" style="color:{{textColor}}">{{title}}</h2>
<h4 class="subtitle">{{author}}</h4> <h4 class="subtitle" style="color:{{textColor}}">{{author}}</h4>
</div> </div>
<!-- div class="tags has-addons"> <!-- div class="tags has-addons">
<span class="tag">File Format</span> <span class="tag">File Format</span>