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

cover: Use book-cover as component:

Browse source 
- Avoid specifying context-dependent values in CSS for components. Those values can be defined by the context calling the component.
- Use `<figure>` with optional caption.
- Reduce redundant markup.
- Allow more variables to be passed to the book-cover (image path and class for the container).
- Hide the book cover to screen readers.
This commit is contained in:
Fabien Basmaison 2021-04-24 12:48:55 +02:00
parent 359061f507
commit 7f0b3184a1
4 changed files with 105 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
bookwyrm/static/css/bookwyrm.css
View file

@ -117,14 +117,14 @@ body {
}
/** Book covers
*
* The book cover takes the full width of its ancestor’s layout.
******************************************************************************/
.cover-container {
height: 250px;
width: max-content;
max-width: 250px;
position: relative;
}
/*
.cover-container.is-large {
height: max-content;
max-width: 330px;
@ -153,26 +153,25 @@ body {
height: 100px;
}
}
*/
.book-cover {
height: 100%;
object-fit: scale-down;
display: block;
width: 100%;
/* Usweful when stretching under-sized images. */
image-rendering: optimizeQuality;
}
.no-cover {
position: relative;
white-space: normal;
}
.no-cover div {
.no-cover .cover_caption {
position: absolute;
padding: 1em;
color: white;
top: 0;
left: 0;
text-align: center;
}
/*
.cover-container.is-medium .no-cover div {
font-size: 0.9em;
padding: 0.3em;
@ -182,6 +181,7 @@ body {
font-size: 0.7em;
padding: 0.1em;
}
*/
/** Avatars
******************************************************************************/

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

@ -1,19 +1,36 @@
{% load bookwyrm_tags %}
{% load i18n %}
{% if book %}
<div class="columns">
<div class="column is-narrow">
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="large" %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}
</div>
<div class="column">
<h3 class="title is-5"><a href="/book/{{ book.id }}">{{ book.title }}</a></h3>
{% if book.authors %}
<p class="subtitle is-5">{% trans "by" %} {% include 'snippets/authors.html' with book=book %}</p>
{% endif %}
{% if book|book_description %}
<blockquote class="content">{{ book|book_description|to_markdown|safe|truncatewords_html:50 }}</blockquote>
{% endif %}
</div>
</div>
{% with book=book %}
<div class="columns">
<div class="column">
<a
href="{{ book.local_path }}"
>{% include 'snippets/book_cover.html' with size="large" %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}
</div>
<div class="column">
<h3 class="title is-5">
<a href="/book/{{ book.id }}">{{ book.title }}</a>
</h3>
{% if book.authors %}
<p class="subtitle is-5">
{% trans "by" %}
{% include 'snippets/authors.html' %}
</p>
{% endif %}
{% if book|book_description %}
<blockquote class="content">
{{ book|book_description|to_markdown|safe|truncatewords_html:50 }}
</blockquote>
{% endif %}
</div>
</div>
{% endwith %}
{% endif %}

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

@ -1,12 +1,24 @@
{% load bookwyrm_tags %}
{% load i18n %}
{% if book %}
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}
{% with book=book %}
<a
href="{{ book.local_path }}"
>{% include 'snippets/book_cover.html' with size="small" %}</a>
<h3 class="title is-6"><a href="/book/{{ book.id }}">{{ book.title }}</a></h3>
{% if book.authors %}
<p class="subtitle is-6">{% trans "by" %} {% include 'snippets/authors.html' with book=book %}</p>
{% endif %}
{% include 'snippets/stars.html' with rating=book|rating:request.user %}
<h3 class="title is-6">
<a href="/book/{{ book.id }}">{{ book.title }}</a>
</h3>
{% if book.authors %}
<p class="subtitle is-6">
{% trans "by" %}
{% include 'snippets/authors.html' %}
</p>
{% endif %}
{% endwith %}
{% endif %}

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

@ -3,27 +3,48 @@
{% load bookwyrm_tags %}
{% load i18n %}
<div class="cover-container is-{{ size }}">
{% if book.cover %}
<img
class="book-cover"
src="/images/{{ book.cover }}"
alt="{{ book.alt_text }}"
title="{{ book.alt_text }}"
itemprop="thumbnailUrl"
>
{% else %}
<div class="no-cover book-cover">
<img
class="book-cover"
src="/static/images/no_cover.jpg"
alt="{% trans "No cover" %}"
>
<figure
class="
cover-container
is-flex
is-align-items-center
<div>
<p>{{ book.alt_text }}</p>
</div>
</div>
{% if not book.cover %}
no-cover
{% endif %}
{% if size %}
is-{{ size }}
{% endif %}
{% if container_class %}
{{ container_class }}
{% endif %}
"
aria-hidden="true"
>
<img
class="book-cover"
{% if book.cover %}
src="{% if img_path is None %}/images/{% else %}{{ img_path }}{% endif %}{{ book.cover }}"
itemprop="thumbnailUrl"
{% if book.alt_text %}
alt="{{ book.alt_text }}"
title="{{ book.alt_text }}"
{% endif %}
{% else %}
src="/static/images/no_cover.jpg"
alt="{% trans "No cover" %}"
{% endif %}
>
{% if not book.cover and book.alt_text %}
<figcaption class="cover_caption">
<p>{{ book.alt_text }}</p>
</figcaption>
{% endif %}
</div>
</figure>
{% endspaceless %}