rafaelcaricio/moviewyrm
1
0
Fork 0
forked from mirrors/bookwyrm
Code Issues 4 Pull requests Projects Releases Wiki Activity

cover: Handle covers with specific heights:

Browse source 
- 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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
bookwyrm/static/css/bookwyrm.css
View file

@ -124,6 +124,14 @@ body {
position: relative;
}
.cover-container.is-small {
height: 100px;
}
.cover-container.is-medium {
height: 150px;
}
/*
.cover-container.is-large {
height: max-content;
@ -135,14 +143,6 @@ body {
height: auto;
}
.cover-container.is-medium {
height: 150px;
}
.cover-container.is-small {
height: 100px;
}
@media only screen and (max-width: 768px) {
.cover-container {
height: 200px;
@ -163,6 +163,11 @@ body {
image-rendering: optimizeQuality;
}
[class~="has-height"] .book-cover {
width: auto;
height: 100%;
}
.no-cover .cover_caption {
position: absolute;
padding: 1em;

2
bookwyrm/templates/book/book.html
View file

@ -49,7 +49,7 @@
<div class="columns">
<div class="column is-one-fifth">
<div class="is-clipped">
{% include 'snippets/book_cover.html' with book=book size=large %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-large' %}
{% include 'snippets/rate_action.html' with user=request.user book=book %}
</div>
<div class="mb-3">

2
bookwyrm/templates/book/edit_book.html
View file

@ -170,7 +170,7 @@
<h2 class="title is-4">{% trans "Cover" %}</h2>
<div class="columns">
<div class="column is-narrow">
{% include 'snippets/book_cover.html' with book=book size="small" %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-small' %}
</div>
<div class="column is-narrow">
<div class="block">

2
bookwyrm/templates/book/editions.html
View file

@ -16,7 +16,7 @@
<div class="columns">
<div class="column is-2">
<a href="/book/{{ book.id }}">
{% include 'snippets/book_cover.html' with book=book size="medium" %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-medium' %}
</a>
</div>
<div class="column is-7">

2
bookwyrm/templates/discover/large-book.html
View file

@ -8,7 +8,7 @@
<div class="column">
<a
href="{{ book.local_path }}"
>{% include 'snippets/book_cover.html' with size="large" %}</a>
>{% include 'snippets/book_cover.html' with cover_class='is-large' %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}
</div>

2
bookwyrm/templates/discover/small-book.html
View file

@ -6,7 +6,7 @@
{% with book=book %}
<a
href="{{ book.local_path }}"
>{% include 'snippets/book_cover.html' with size="small" %}</a>
>{% include 'snippets/book_cover.html' with cover_class='is-small' %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}

2
bookwyrm/templates/feed/feed_layout.html
View file

@ -37,7 +37,7 @@
aria-label="{{ book.title }}"
aria-selected="{% if active_book == book.id|stringformat:'d' %}true{% elif shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}"
aria-controls="book-{{ book.id }}">
{% include 'snippets/book_cover.html' with book=book size="medium" %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-medium' %}
</a>
</li>
{% endfor %}

2
bookwyrm/templates/import_status.html
View file

@ -125,7 +125,7 @@
<td>
{% if item.book %}
<a href="/book/{{ item.book.id }}">
{% include 'snippets/book_cover.html' with book=item.book size='small' %}
{% include 'snippets/book_cover.html' with book=item.book cover_class='is-small' %}
</a>
{% endif %}
</td>

2
bookwyrm/templates/lists/curate.html
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">

14
bookwyrm/templates/lists/list_items.html
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>
{% 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 %}

2
bookwyrm/templates/lists/lists.html
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>

18
bookwyrm/templates/snippets/book_cover.html
View file

@ -9,21 +9,20 @@
is-clipped
is-flex
is-align-items-center
{{ cover_class }}
{% if not book.cover %}
no-cover
{% endif %}
{% if size %}
is-{{ size }}
{% endif %}
{% if container_class %}
{{ container_class }}
{% endif %}
"
aria-hidden="true"
{% if aria != "show" %}
aria-hidden="true"
{% endif %}
{% if book.alt_text %}
title="{{ book.alt_text }}"
{% endif %}
>
<img
class="book-cover"
@ -34,7 +33,6 @@
{% if book.alt_text %}
alt="{{ book.alt_text }}"
title="{{ book.alt_text }}"
{% endif %}
{% else %}
src="/static/images/no_cover.jpg"

2
bookwyrm/templates/snippets/search_result_text.html
View file

@ -1,6 +1,6 @@
{% load i18n %}
<div class="columns is-mobile is-gapless">
{% include 'snippets/book_cover.html' with book=result container_class='column' img_path=false %}
{% include 'snippets/book_cover.html' with book=result cover_class='column' img_path=false %}
<div class="column is-10 ml-3">
<p>

2
bookwyrm/templates/snippets/status/generated_status.html
View file

@ -8,7 +8,7 @@
<div class="columns is-mobile">
<div class="column is-narrow">
<div>
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="small" %}</a>
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-small' %}</a>
</div>
</div>
<div class="column">

2
bookwyrm/templates/user/shelf.html
View file

@ -86,7 +86,7 @@
{% for book in books %}
<tr class="book-preview">
<td>
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="small" %}</a>
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-small' %}</a>
</td>
<td>
<a href="{{ book.local_path }}">{{ book.title }}</a>

2
bookwyrm/templates/user/user.html
View file

@ -36,7 +36,7 @@
{% for book in shelf.books %}
<div class="control">
<a href="{{ book.local_path }}">
{% include 'snippets/book_cover.html' with book=book size="medium" %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-medium' %}
</a>
</div>
{% endfor %}