cover: Change the logic again:

- Work on feeds.
- Add `.is-cover` to modify the behaviours of columns.
- Only apply logic for dimensions on the cover container; too many contextual side effects otherwise.
- Add classes to dimension and align, including auto margins for flex.
- Rename classes in templates accordingly.
This commit is contained in:
Fabien Basmaison
2021-04-27 14:58:30 +02:00
parent 56d821970a
commit 8ddc292ee6
14 changed files with 294 additions and 73 deletions

View File

@ -37,13 +37,13 @@
columns is-mobile is-gapless
"
>
<div class="column">
<div class="column is-2-mobile is-cover">
<a href="{{ item.book.local_path }}" aria-hidden="true">
{% include 'snippets/book_cover.html' %}
{% include 'snippets/book_cover.html' with cover_class='is-w-auto is-h-m is-h-s-mobile' %}
</a>
</div>
<div class="column is-9-mobile is-10-tablet ml-3">
<div class="column ml-3">
<span>{% include 'snippets/book_titleby.html' %}</span>
{% include 'snippets/stars.html' with rating=item.book|rating:request.user %}
{% include 'snippets/shelve_button/shelve_button.html' %}
@ -133,11 +133,15 @@
{% if suggested_books|length > 0 %}
{% for book in suggested_books %}
<div class="columns is-mobile is-gapless">
<a class="column" href="{{ book.local_path }}" aria-hidden="true">
{% include 'snippets/book_cover.html' with book=book %}
<a
class="column is-cover align to-c"
href="{{ book.local_path }}"
aria-hidden="true"
>
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-s-tablet is-h-xs is-h-s-mobile' %}
</a>
<div class="column is-9-mobile is-8-tablet ml-3">
<div class="column ml-3">
<p>{% include 'snippets/book_titleby.html' with book=book %}</p>
<form class="mt-1" name="add-book" method="post" action="{% url 'list-add-book' %}">