1
0
Fork 0

cover: Handle covers with specific heights:

- Have an explicit contextual class on `cover-container`.
- Use more flexible, consistent and searchable variable name for passing classes to covers.
- Consistently use `'…'` with django variables.
- Give the option to not hide covers to screen readers.
- consitently give a title to the cover container if `alt_text` exists.
- [lists] Remove `.content` which is applying too extensive default styles.
This commit is contained in:
Fabien Basmaison 2021-04-24 21:16:30 +02:00
parent 783cc6edf0
commit eea8b4e750
16 changed files with 47 additions and 36 deletions

View file

@ -32,7 +32,7 @@
href="{{ book.local_path }}"
aria-hidden="true"
>
{% include 'snippets/book_cover.html' with size="small" %}
{% include 'snippets/book_cover.html' with cover_class='is-small' %}
</a>
<div class="column is-9-mobile is-10-tablet ml-3">

View file

@ -8,11 +8,19 @@
<a href="{{ list.local_path }}">{{ list.name }}</a> <span class="subtitle">{% include 'snippets/privacy-icons.html' with item=list %}</span>
</h4>
</header>
<div class="card-image is-flex is-clipped">
{% for book in list.listitem_set.all|slice:5 %}
<a href="{{ book.book.local_path }}">{% include 'snippets/book_cover.html' with book=book.book size="small" %}</a>
{% endfor %}
</div>
{% with list_books=list.listitem_set.all|slice:5 %}
{% if list_books %}
<div class="card-image columns is-mobile is-gapless is-clipped has-height">
{% for book in list_books %}
<a class="column is-narrow" href="{{ book.book.local_path }}">
{% include 'snippets/book_cover.html' with book=book.book cover_class='is-small' aria='show' %}
</a>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<div class="card-content is-flex-grow-0">
<div {% if list.description %}title="{{ list.description }}"{% endif %}>
{% if list.description %}

View file

@ -28,7 +28,7 @@
</div>
{% if lists %}
<section class="block content">
<section class="block">
{% include 'lists/list_items.html' with lists=lists %}
</section>