Book and editions page styles

This commit is contained in:
Mouse Reeve 2020-09-29 13:11:52 -07:00
parent 7b32a122e4
commit 3dc43aa81c
6 changed files with 44 additions and 24 deletions

View file

@ -79,9 +79,12 @@ input.toggle-control:checked ~ .toggle-content {
/* --- BOOK COVERS --- */
.cover-container {
height: 250px;
}
.book-cover {
width: 10em;
height: auto;
height: 100%
object-fit: scale-down;
}
.no-cover {
position: relative;

View file

@ -87,10 +87,12 @@
</div>
{% endif %}
{% for review in reviews %}
<div class="block">
{% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
<div>
{% for review in reviews %}
<div class="block">
{% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
</div>
{% endfor %}
</div>
{% endfor %}
{% endblock %}

View file

@ -1,18 +1,29 @@
{% extends 'layout.html' %}
{% load fr_display %}
{% block content %}
<div class="content-container">
<h2>Editions of <a href="/book/{{ work.id }}">"{{ work.title }}"</a></h2>
<ol class="book-grid row wrap">
<div class="block">
<h2 class="title">Editions of <a href="/book/{{ work.id }}">"{{ work.title }}"</a></h2>
<div class="tile is-ancestor">
<div class="tile is-vertical">
<div class="tile">
{% for book in editions %}
<li class="book-preview">
<a href="/book/{{ book.id }}">
{% include 'snippets/book_cover.html' with book=book %}
</a>
{% include 'snippets/shelve_button.html' with book=book %}
</li>
{% if forloop.counter0|divisibleby:"5" %}
</div>
<div class="tile">
{% endif %}
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<a href="/book/{{ book.id }}">
{% include 'snippets/book_cover.html' with book=book %}
</a>
{% include 'snippets/shelve_button.html' with book=book %}
</article>
</div>
{% endfor %}
</ol>
</div>
</div>
</div>
{% endblock %}

View file

@ -9,7 +9,7 @@
</div>
{% endfor %}
<div class="content-container pagination row">
<div class="">
{% if prev %}
<p>
<a href="{{ prev }}">

View file

@ -1,12 +1,16 @@
{% load fr_display %}
{% if book.cover %}
<img class="book-cover {{ size }}" src="/images/{{ book.cover }}" alt="{% include 'snippets/cover_alt.html' with book=book %}">
<div class="cover-container">
<img class="book-cover {{ size }}" src="/images/{{ book.cover }}" alt="{% include 'snippets/cover_alt.html' with book=book %}">
</div>
{% else %}
<div class="no-cover book-cover {{ size }}">
<img class="book-cover {{ size }}" src="/static/images/no_cover.jpg" alt="No cover">
<div>
<p>{{ book.title }}</p>
<p>({{ book|edition_info }})</p>
<div class="cover-container">
<div class="no-cover book-cover {{ size }}">
<img class="book-cover {{ size }}" src="/static/images/no_cover.jpg" alt="No cover">
<div>
<p>{{ book.title }}</p>
<p>({{ book|edition_info }})</p>
</div>
</div>
</div>
{% endif %}

View file

@ -1,7 +1,7 @@
{% load humanize %}
{% load fr_display %}
<div class="card{% if depth %}depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
<div class="card{% if depth %} depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
<header class="card-header">
{% include 'snippets/status_header.html' with status=status %}
</header>