yul/bookwyrm-mastodon
1
1
Fork 0
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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 %}