From 7f0b3184a1e7c2482c302d907345ac0b098a6083 Mon Sep 17 00:00:00 2001 From: Fabien Basmaison Date: Sat, 24 Apr 2021 12:48:55 +0200 Subject: [PATCH 01/25] cover: Use book-cover as component: - Avoid specifying context-dependent values in CSS for components. Those values can be defined by the context calling the component. - Use `
` 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. --- bookwyrm/static/css/bookwyrm.css | 26 ++++----- bookwyrm/templates/discover/large-book.html | 47 ++++++++++----- bookwyrm/templates/discover/small-book.html | 24 ++++++-- bookwyrm/templates/snippets/book_cover.html | 63 ++++++++++++++------- 4 files changed, 105 insertions(+), 55 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index b4abd6907..71947aea2 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -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 ******************************************************************************/ diff --git a/bookwyrm/templates/discover/large-book.html b/bookwyrm/templates/discover/large-book.html index 44b91b946..303d73183 100644 --- a/bookwyrm/templates/discover/large-book.html +++ b/bookwyrm/templates/discover/large-book.html @@ -1,19 +1,36 @@ + {% load bookwyrm_tags %} {% load i18n %} + {% if book %} -
-
- {% include 'snippets/book_cover.html' with book=book size="large" %} - {% include 'snippets/stars.html' with rating=book|rating:request.user %} -
-
-

{{ book.title }}

- {% if book.authors %} -

{% trans "by" %} {% include 'snippets/authors.html' with book=book %}

- {% endif %} - {% if book|book_description %} -
{{ book|book_description|to_markdown|safe|truncatewords_html:50 }}
- {% endif %} -
-
+ {% with book=book %} +
+
+ {% include 'snippets/book_cover.html' with size="large" %} + + {% include 'snippets/stars.html' with rating=book|rating:request.user %} +
+ +
+

+ {{ book.title }} +

+ + {% if book.authors %} +

+ {% trans "by" %} + {% include 'snippets/authors.html' %} +

+ {% endif %} + + {% if book|book_description %} +
+ {{ book|book_description|to_markdown|safe|truncatewords_html:50 }} +
+ {% endif %} +
+
+ {% endwith %} {% endif %} diff --git a/bookwyrm/templates/discover/small-book.html b/bookwyrm/templates/discover/small-book.html index 6df277466..f80a2690c 100644 --- a/bookwyrm/templates/discover/small-book.html +++ b/bookwyrm/templates/discover/small-book.html @@ -1,12 +1,24 @@ + {% load bookwyrm_tags %} {% load i18n %} + {% if book %} -{% include 'snippets/book_cover.html' with book=book %} -{% include 'snippets/stars.html' with rating=book|rating:request.user %} + {% with book=book %} + {% include 'snippets/book_cover.html' with size="small" %} -

{{ book.title }}

-{% if book.authors %} -

{% trans "by" %} {% include 'snippets/authors.html' with book=book %}

-{% endif %} + {% include 'snippets/stars.html' with rating=book|rating:request.user %} +

+ {{ book.title }} +

+ + {% if book.authors %} +

+ {% trans "by" %} + {% include 'snippets/authors.html' %} +

+ {% endif %} + {% endwith %} {% endif %} diff --git a/bookwyrm/templates/snippets/book_cover.html b/bookwyrm/templates/snippets/book_cover.html index ce47819e8..f26974d2d 100644 --- a/bookwyrm/templates/snippets/book_cover.html +++ b/bookwyrm/templates/snippets/book_cover.html @@ -3,27 +3,48 @@ {% load bookwyrm_tags %} {% load i18n %} -
- {% if book.cover %} - {{ book.alt_text }} - {% else %} -
- {% trans +
+
{% endspaceless %} From 9ea91d8e7c4b4a26d27c2023948e9240106a5b77 Mon Sep 17 00:00:00 2001 From: Fabien Basmaison Date: Sat, 24 Apr 2021 12:56:38 +0200 Subject: [PATCH 02/25] cover: Search layout: Reduce padding around covers. --- bookwyrm/templates/search_results.html | 2 +- .../snippets/search_result_text.html | 47 ++++++++++--------- 2 files changed, 27 insertions(+), 22 deletions(-) diff --git a/bookwyrm/templates/search_results.html b/bookwyrm/templates/search_results.html index 4c9c23dae..cb1fae391 100644 --- a/bookwyrm/templates/search_results.html +++ b/bookwyrm/templates/search_results.html @@ -49,7 +49,7 @@