From 953dff90bb7c2aefda2d1a0f181f8123ddf0b3b2 Mon Sep 17 00:00:00 2001 From: Fabien Basmaison Date: Sun, 25 Apr 2021 15:37:46 +0200 Subject: [PATCH] cover: tweak styles: - `optimizeQuality` > `smooth` (CSS language evolution) - Use `auto` instead of a fixed width. - Add exceptions for heights and apply them to some previously modified templates. - Remove `is-large` exception. - Widen the content column on list curation. --- bookwyrm/static/css/bookwyrm.css | 88 ++++++++----------- bookwyrm/templates/book/book.html | 7 +- bookwyrm/templates/book/edit_book.html | 2 +- bookwyrm/templates/book/editions.html | 2 +- bookwyrm/templates/discover/large-book.html | 2 +- bookwyrm/templates/discover/small-book.html | 2 +- bookwyrm/templates/feed/feed_layout.html | 2 +- bookwyrm/templates/import_status.html | 2 +- bookwyrm/templates/lists/curate.html | 4 +- bookwyrm/templates/lists/list_items.html | 4 +- bookwyrm/templates/snippets/book_cover.html | 3 - .../snippets/status/generated_status.html | 2 +- bookwyrm/templates/user/shelf.html | 2 +- bookwyrm/templates/user/user.html | 2 +- 14 files changed, 55 insertions(+), 69 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 281bc7ed..a1e55ce9 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -98,7 +98,7 @@ body { * * \e9d9: filled star * \e9d7: empty star; - ******************************************************************************/ + * -------------------------------------------------------------------------- */ .form-rate-stars { width: max-content; @@ -125,76 +125,45 @@ body { /** Book covers * - * The book cover takes the full width of its ancestor’s layout. + * - take the full width of their ancestor’s layout. + * - take whatever height they need. + * + * When assigning a height, add the `has-height` class. ******************************************************************************/ .cover-container { position: relative; + overflow: hidden; } -.cover-container.is-small { - height: 100px; -} - -.cover-container.is-medium { - height: 150px; -} - -/* -.cover-container.is-large { - height: max-content; - max-width: 330px; -} - -.cover-container.is-large img { - max-height: 500px; - height: auto; -} - -@media only screen and (max-width: 768px) { - .cover-container { - height: 200px; - width: max-content; - } - - .cover-container.is-medium { - height: 100px; - } -} -*/ - +/* Book cover + -------------------------------------------------------------------------- */ .book-cover { display: block; - width: 100%; + width: auto; /* Useful when stretching under-sized images. */ image-rendering: optimizeQuality; + image-rendering: smooth; } +/* `height: inherit` makes sure the height computed is not approximative, + without specifying a fixed height. */ [class~="has-height"] .book-cover { - width: auto; - height: 100%; + height: inherit; + max-height: 100%; } +/* Cover caption + -------------------------------------------------------------------------- */ .no-cover .cover_caption { position: absolute; - padding: 1em; + padding: .25em; color: white; top: 0; left: 0; + font-size: 0.75em; } -/* -.cover-container.is-medium .no-cover div { - font-size: 0.9em; - padding: 0.3em; -} - -.cover-container.is-small .no-cover div { - font-size: 0.7em; - padding: 0.1em; -} -*/ - /** Avatars ******************************************************************************/ @@ -267,3 +236,24 @@ body { opacity: 0.5; cursor: not-allowed; } + +/* Dimensions + ******************************************************************************/ + +.is-h-small { + height: 100px !important; +} + +.is-h-medium { + height: 150px !important; +} + +@media only screen and (max-width: 768px) { + .is-h-small-mobile { + height: 100px !important; + } + + .is-h-medium-mobile { + height: 150px; + } +} diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html index 28850673..34558f8d 100644 --- a/bookwyrm/templates/book/book.html +++ b/bookwyrm/templates/book/book.html @@ -48,10 +48,9 @@
-
- {% include 'snippets/book_cover.html' with book=book cover_class='is-large' %} - {% include 'snippets/rate_action.html' with user=request.user book=book %} -
+ {% include 'snippets/book_cover.html' with book=book cover_class='has-height is-h-medium-mobile' %} + {% include 'snippets/rate_action.html' with user=request.user book=book %} +
{% include 'snippets/shelve_button/shelve_button.html' %}
diff --git a/bookwyrm/templates/book/edit_book.html b/bookwyrm/templates/book/edit_book.html index 7f8644b4..0cb1a9b1 100644 --- a/bookwyrm/templates/book/edit_book.html +++ b/bookwyrm/templates/book/edit_book.html @@ -170,7 +170,7 @@

{% trans "Cover" %}

- {% include 'snippets/book_cover.html' with book=book cover_class='is-small' %} + {% include 'snippets/book_cover.html' with book=book cover_class='is-h-small' %}
diff --git a/bookwyrm/templates/book/editions.html b/bookwyrm/templates/book/editions.html index 4ec39218..3eb66eae 100644 --- a/bookwyrm/templates/book/editions.html +++ b/bookwyrm/templates/book/editions.html @@ -16,7 +16,7 @@
- {% include 'snippets/book_cover.html' with book=book cover_class='is-medium' %} + {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
diff --git a/bookwyrm/templates/discover/large-book.html b/bookwyrm/templates/discover/large-book.html index 408e20c0..c7b39ebb 100644 --- a/bookwyrm/templates/discover/large-book.html +++ b/bookwyrm/templates/discover/large-book.html @@ -8,7 +8,7 @@
{% include 'snippets/book_cover.html' with cover_class='is-large' %} + >{% include 'snippets/book_cover.html' %} {% include 'snippets/stars.html' with rating=book|rating:request.user %}
diff --git a/bookwyrm/templates/discover/small-book.html b/bookwyrm/templates/discover/small-book.html index 048e5a71..c1f5f165 100644 --- a/bookwyrm/templates/discover/small-book.html +++ b/bookwyrm/templates/discover/small-book.html @@ -6,7 +6,7 @@ {% with book=book %} {% include 'snippets/book_cover.html' with cover_class='is-small' %} + >{% include 'snippets/book_cover.html' with cover_class='is-h-small' %} {% include 'snippets/stars.html' with rating=book|rating:request.user %} diff --git a/bookwyrm/templates/feed/feed_layout.html b/bookwyrm/templates/feed/feed_layout.html index 15e84a59..669c2aaa 100644 --- a/bookwyrm/templates/feed/feed_layout.html +++ b/bookwyrm/templates/feed/feed_layout.html @@ -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-medium' %} + {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %} {% endfor %} diff --git a/bookwyrm/templates/import_status.html b/bookwyrm/templates/import_status.html index d85bb7fb..05c811d2 100644 --- a/bookwyrm/templates/import_status.html +++ b/bookwyrm/templates/import_status.html @@ -125,7 +125,7 @@ {% if item.book %} - {% include 'snippets/book_cover.html' with book=item.book cover_class='is-small' %} + {% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-small' %} {% endif %} diff --git a/bookwyrm/templates/lists/curate.html b/bookwyrm/templates/lists/curate.html index fa6a8fb9..529f51c3 100644 --- a/bookwyrm/templates/lists/curate.html +++ b/bookwyrm/templates/lists/curate.html @@ -32,10 +32,10 @@ href="{{ book.local_path }}" aria-hidden="true" > - {% include 'snippets/book_cover.html' with cover_class='is-small' %} + {% include 'snippets/book_cover.html' %} -
+
{% include 'snippets/book_titleby.html' %}
diff --git a/bookwyrm/templates/lists/list_items.html b/bookwyrm/templates/lists/list_items.html index ddc2fff0..db6b6d60 100644 --- a/bookwyrm/templates/lists/list_items.html +++ b/bookwyrm/templates/lists/list_items.html @@ -11,10 +11,10 @@ {% with list_books=list.listitem_set.all|slice:5 %} {% if list_books %} -
+
{% for book in list_books %} - {% include 'snippets/book_cover.html' with book=book.book cover_class='is-small' aria='show' %} + {% include 'snippets/book_cover.html' with book=book.book cover_class='has-height is-h-small' aria='show' %} {% endfor %}
diff --git a/bookwyrm/templates/snippets/book_cover.html b/bookwyrm/templates/snippets/book_cover.html index b994343e..8967ff57 100644 --- a/bookwyrm/templates/snippets/book_cover.html +++ b/bookwyrm/templates/snippets/book_cover.html @@ -6,9 +6,6 @@
diff --git a/bookwyrm/templates/user/shelf.html b/bookwyrm/templates/user/shelf.html index d9f264ea..39498a43 100644 --- a/bookwyrm/templates/user/shelf.html +++ b/bookwyrm/templates/user/shelf.html @@ -86,7 +86,7 @@ {% for book in books %} - {% include 'snippets/book_cover.html' with book=book cover_class='is-small' %} + {% include 'snippets/book_cover.html' with book=book cover_class='is-h-small' %} {{ book.title }} diff --git a/bookwyrm/templates/user/user.html b/bookwyrm/templates/user/user.html index 9b0c6991..80dac213 100644 --- a/bookwyrm/templates/user/user.html +++ b/bookwyrm/templates/user/user.html @@ -36,7 +36,7 @@ {% for book in shelf.books %}
- {% include 'snippets/book_cover.html' with book=book cover_class='is-medium' %} + {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
{% endfor %}