zedfrigg/bookwyrm
1
0
Fork 0
Code Activity

cover: Change the logic again:

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

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

@ -48,7 +48,7 @@
<div class="columns">
<div class="column is-one-fifth">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium-mobile' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-m-mobile' %}
{% include 'snippets/rate_action.html' with user=request.user book=book %}
<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 cover_class='is-h-small' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-s' %}
</div>
<div class="column is-narrow">
<div class="block">

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

@ -14,11 +14,11 @@
<div class="block">
{% for book in editions %}
<div class="columns is-gapless mb-6">
<div class="column is-2 is-flex align-r-tablet">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
<div class="column is-cover">
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-m is-h-m align to-l-mobile' %}
</div>
<div class="column is-flex-grow-1 my-3-mobile mx-3-tablet">
<div class="column my-3-mobile ml-3-tablet mr-auto">
<h2 class="title is-5 mb-1">
<a href="/book/{{ book.id }}" class="has-text-black">
{{ book.title }}
@ -26,7 +26,7 @@
</h2>
{% with book=book %}
<div class="columns is-multiline is-gapless">
<div class="columns is-multiline is-gapless ml-3-tablet">
<div class="column is-half">
{% include 'book/publisher_info.html' %}
</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 cover_class='is-h-small' %}</a>
>{% include 'snippets/book_cover.html' with cover_class='is-h-s' %}</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 cover_class='is-h-medium' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-m' %}
</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 cover_class='is-h-small' %}
{% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-s' %}
</a>
{% endif %}
</td>

10
bookwyrm/templates/lists/curate.html
View file

@ -25,23 +25,23 @@
mb-6
"
>
<dt class="column is-5-tablet is-6-desktop">
<dt class="column mr-auto">
<div class="columns is-mobile is-gapless is-vcentered">
<a
class="column"
class="column is-cover"
href="{{ book.local_path }}"
aria-hidden="true"
>
{% include 'snippets/book_cover.html' %}
{% include 'snippets/book_cover.html' with cover_class='is-w-xs-mobile is-w-s is-h-xs-mobile is-h-s' %}
</a>
<div class="column is-10-mobile is-10-tablet ml-3">
<div class="column ml-3">
{% include 'snippets/book_titleby.html' %}
</div>
</div>
</dt>
<dd class="column is-3-tablet is-3-desktop my-3">
<dd class="column is-4-tablet mx-3-tablet my-3-mobile">
{% trans "Suggested by" %}
<a href="{{ item.user.local_path }}">

16
bookwyrm/templates/lists/list.html
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' %}">

4
bookwyrm/templates/lists/list_items.html
View file

@ -13,8 +13,8 @@
{% if list_books %}
<div class="card-image columns is-mobile is-gapless is-clipped">
{% 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-min-w-none is-h-small' aria='show' %}
<a class="column is-cover" href="{{ book.book.local_path }}">
{% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-s' aria='show' %}
</a>
{% endfor %}
</div>

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

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

39
bookwyrm/templates/snippets/status/content_status.html
View file

@ -10,27 +10,30 @@
{% endif %}
>
<div class="columns">
<div class="columns is-gapless">
{% if not hide_book %}
{% with book=status.book|default:status.mention_books.first %}
{% if book %}
<div class="column is-narrow">
<div class="columns is-mobile">
<div class="column is-narrow">
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}
{% include 'snippets/shelve_button/shelve_button.html' with book=book %}
</div>
<div class="column is-hidden-tablet">
<p>{{ book|book_description|to_markdown|default:""|safe|truncatewords_html:15 }}</p>
</div>
</div>
</div>
{% endif %}
{% endwith %}
{% with book=status.book|default:status.mention_books.first %}
{% if book %}
<div class="column is-cover">
<div class="columns is-mobile is-gapless">
<div class="column is-cover">
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-h-xs is-h-l-tablet' %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}
{% include 'snippets/shelve_button/shelve_button.html' with book=book %}
</div>
<div class="column ml-3-mobile is-hidden-tablet">
<p>{{ book|book_description|to_markdown|default:""|safe|truncatewords_html:15 }}</p>
</div>
</div>
</div>
{% endif %}
{% endwith %}
{% endif %}
<article class="column">
<article class="column ml-3-tablet my-3-mobile">
{% if status_type == 'Review' %}
<header class="mb-2">
<h3

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

@ -4,20 +4,25 @@
{% load i18n %}
{% if not hide_book %}
{% with book=status.book|default:status.mention_books.first %}
<div class="columns is-mobile">
<div class="column is-narrow">
<div>
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-h-small' %}</a>
{% with book=status.book|default:status.mention_books.first %}
<div class="columns is-mobile is-gapless">
<a class="column is-cover is-narrow" href="{{ book.local_path }}">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-xs is-h-s-tablet' %}
</a>
<div class="column ml-3">
<h3 class="title is-6 mb-1">
{% include 'snippets/book_titleby.html' with book=book %}
</h3>
<p>
{{ book|book_description|to_markdown|default:""|safe|truncatewords_html:20 }}
</p>
{% include 'snippets/shelve_button/shelve_button.html' with book=book %}
</div>
</div>
</div>
<div class="column">
<h3 class="title is-6 mb-1">{% include 'snippets/book_titleby.html' with book=book %}</h3>
<p>{{ book|book_description|to_markdown|default:""|safe|truncatewords_html:20 }}</p>
{% include 'snippets/shelve_button/shelve_button.html' with book=book %}
</div>
</div>
{% endwith %}
{% endwith %}
{% endif %}
{% endspaceless %}

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 cover_class='is-h-medium' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-m' %}
</a>
</div>
{% endfor %}