No cover state for books

This commit is contained in:
Mouse Reeve 2020-03-15 15:41:23 -07:00
parent 3e0fc9a590
commit a57d43b0b4
3 changed files with 30 additions and 2 deletions

View file

@ -312,7 +312,7 @@ button.secondary {
.covers-shelf .book-preview:hover img {
box-shadow: #F3FFBD 0em 0em 1em 1em;
}
.covers-shelf .book-preview img {
.covers-shelf .book-cover {
float: none;
height: 11rem;
width: auto;
@ -332,6 +332,24 @@ button.secondary {
display: block;
}
.no-cover {
position: relative;
}
.no-cover div {
position: absolute;
padding: 1em;
color: white;
top: 0;
left: 0;
text-align: center;
}
.no-cover .title {
text-transform: uppercase;
margin-bottom: 1em;
}
.book-cover {
width: 180px;
}
.book-cover.small {
width: 50px;
height: auto;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8 KiB

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -1 +1,11 @@
<img class="book-cover {{ size }}" src="{% if book.cover %}/images/{{ book.cover }}{% else %}/static/images/no_cover.jpg{% endif %}">
{% if book.cover %}
<img class="book-cover {{ size }}" src="/images/{{ book.cover }}">
{% else %}
<div class="no-cover book-cover">
<img class="book-cover {{ size }}" src="/static/images/no_cover.jpg">
<div>
<p class="title">{{ book.title }}</p>
<p>{{ book.authors.first.name }}</p>
</div>
</div>
{% endif %}