Merge pull request #1691 from joachimesque/2021-in-the-books
Feature: Create annual summary page
This commit is contained in:
GitHub
commit
c85f881f97
18 changed files with 672 additions and 8 deletions
184
bookwyrm/templates/annual_summary/layout.html
Normal file
184
bookwyrm/templates/annual_summary/layout.html
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
|
||||
{% block title %}{% blocktrans %}{{ year }} in the books{% endblocktrans %}{% endblock %}
|
||||
|
||||
{% block head_links %}
|
||||
<link rel="stylesheet" href="{% static "css/vendor/dm_serif_display.css" %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="columns">
|
||||
{% with year=paginated_years|first %}
|
||||
<div class="column">
|
||||
<a href="{% url 'annual-summary' year %}">
|
||||
<span class="icon icon-arrow-left" aria-hidden="true"></span>
|
||||
{% blocktrans %}{{ year }} in the books{% endblocktrans %}
|
||||
</a>
|
||||
</div>
|
||||
{% endwith %}
|
||||
|
||||
{% with year=paginated_years|last %}
|
||||
{% if year %}
|
||||
<div class="column has-text-right">
|
||||
<a href="{% url 'annual-summary' year %}">
|
||||
{% blocktrans %}{{ year }} in the books{% endblocktrans %}
|
||||
<span class="icon icon-arrow-right" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<h1 class="title is-1 is-serif has-text-centered mb-5">
|
||||
📚✨
|
||||
{% blocktrans %}{{ year }} <em>in the books</em>{% endblocktrans %}
|
||||
✨📚
|
||||
</h1>
|
||||
|
||||
{% if not books %}
|
||||
<p class="has-text-centered is-size-5">{% blocktrans %}Sadly you didn't finish any book in {{ year }}{% endblocktrans %}</p>
|
||||
{% else %}
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-8 is-offset-2 has-text-centered">
|
||||
<h2 class="title is-3 is-serif">
|
||||
{% blocktrans %}In {{ year }}, you read {{ books_total }} books<br />for a total of {{ pages_total }} pages!{% endblocktrans %}
|
||||
</h2>
|
||||
<p class="subtitle is-5">{% trans "That’s great!" %}</p>
|
||||
|
||||
<p class="title is-4 is-serif">
|
||||
{% blocktrans %}That makes an average of {{ pages_average }} pages per book.{% endblocktrans %}
|
||||
</p>
|
||||
|
||||
{% if no_page_number %}
|
||||
<p class="subtitle is-6">{% blocktrans %}({{ no_page_number }} books don’t have pages){% endblocktrans %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if book_pages_lowest and book_pages_highest %}
|
||||
<div class="columns is-mobile is-align-items-center mt-5">
|
||||
<div class="column is-2 is-offset-1">
|
||||
<a href="{{ book_pages_lowest.local_path }}">{% include 'snippets/book_cover.html' with book=book_pages_lowest cover_class='is-w-auto-tablet is-h-l-mobile' %}</a>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
{% trans "Your shortest read this year" %}
|
||||
<p class="title is-4 is-serif is-italic">
|
||||
<a href="{{ book_pages_lowest.local_path }}" class="has-text-success-dark">
|
||||
{{ book_pages_lowest.title }}
|
||||
</a>
|
||||
</p>
|
||||
{% if book_pages_lowest.authors.exists %}
|
||||
<p class="subtitle is-5 mb-2">{% trans "by" %}
|
||||
{% include 'snippets/authors.html' with book=book_pages_lowest link_class="has-text-success-dark" %}
|
||||
</p>
|
||||
{% endif %}
|
||||
<p class="subtitle is-6">
|
||||
{% with pages=book_pages_lowest.pages %}
|
||||
{% blocktrans %}<strong>{{ pages }}</strong> pages{% endblocktrans%}
|
||||
{% endwith %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<a href="{{ book_pages_highest.local_path }}">{% include 'snippets/book_cover.html' with book=book_pages_highest cover_class='is-w-auto-tablet is-h-l-mobile' %}</a>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
{% trans "and the longest read" %}
|
||||
<p class="title is-4 is-serif is-italic">
|
||||
<a href="{{ book_pages_lowest.local_path }}" class="has-text-success-dark">
|
||||
{{ book_pages_highest.title }}
|
||||
</a>
|
||||
</p>
|
||||
{% if book_pages_highest.authors.exists %}
|
||||
<p class="subtitle is-5 mb-2">{% trans "by" %}
|
||||
{% include 'snippets/authors.html' with book=book_pages_highest link_class="has-text-success-dark" %}
|
||||
</p>
|
||||
{% endif %}
|
||||
<p class="subtitle is-6">
|
||||
{% with pages=book_pages_highest.pages %}
|
||||
{% blocktrans %}<strong>{{ pages }}</strong> pages{% endblocktrans%}
|
||||
{% endwith %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth is-offset-two-fifths">
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column has-text-centered">
|
||||
<h2 class="title is-3 is-serif">
|
||||
{% blocktrans %}You left {{ ratings_total }} ratings, <br />your average rating is {{ rating_average }}{% endblocktrans %}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-align-items-center">
|
||||
<div class="column is-3 is-offset-3">
|
||||
<a href="{{ book_rating_highest.book.local_path }}">{% include 'snippets/book_cover.html' with book=book_rating_highest.book cover_class='is-w-auto-tablet is-h-l-mobile' %}</a>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
{% trans "Your best rated review" %}
|
||||
<p class="title is-4 is-serif is-italic">
|
||||
<a href="{{ book_rating_highest.book.local_path }}" class="has-text-success-dark">
|
||||
{{ book_rating_highest.book.title }}
|
||||
</a>
|
||||
</p>
|
||||
{% if book_rating_highest.book.authors.exists %}
|
||||
<p class="subtitle is-5 mb-2">{% trans "by" %}
|
||||
{% include 'snippets/authors.html' with book=book_rating_highest.book link_class="has-text-success-dark" %}
|
||||
</p>
|
||||
{% endif %}
|
||||
<p class="subtitle is-6">
|
||||
{% with rating=book_rating_highest.rating|floatformat %}
|
||||
{% blocktrans %}Your rating: <strong>{{ rating }}</strong>{% endblocktrans%}
|
||||
{% endwith %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth is-offset-two-fifths">
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column has-text-centered">
|
||||
<h2 class="title is-3 is-serif">
|
||||
{% blocktrans %}All the books you read in 2021{% endblocktrans %}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-10 is-offset-1">
|
||||
<div class="books-grid">
|
||||
{% for book in books %}
|
||||
{% if book.id in best_ratings_books_ids %}
|
||||
<a href="{{ book.local_path }}" class="has-text-centered is-big has-text-success-dark">
|
||||
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' %}
|
||||
<span class="book-title is-serif is-size-5">
|
||||
{{ book.title }}
|
||||
</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ book.local_path }}" class="has-text-centered has-text-success-dark">
|
||||
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' %}
|
||||
<span class="book-title is-serif is-size-6">
|
||||
{{ book.title }}
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
@ -64,14 +64,20 @@
|
|||
{{ allowed_status_types|json_script:"unread-notifications-wrapper" }}
|
||||
</a>
|
||||
|
||||
{% if request.user.show_goal and not goal and tab.key == 'home' %}
|
||||
{% now 'Y' as year %}
|
||||
<section class="block">
|
||||
{% include 'feed/goal_card.html' with year=year %}
|
||||
<hr>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if request.user.show_goal and not goal and tab.key == 'home' %}
|
||||
{% now 'Y' as year %}
|
||||
<section class="block">
|
||||
{% include 'feed/goal_card.html' with year=year %}
|
||||
<hr>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if annual_summary_year and tab.key == 'home' %}
|
||||
<section class="block">
|
||||
{% include 'feed/summary_card.html' with year=annual_summary_year %}
|
||||
<hr>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{# activity feed #}
|
||||
|
|
|
|||
22
bookwyrm/templates/feed/summary_card.html
Normal file
22
bookwyrm/templates/feed/summary_card.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{% extends 'components/card.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block card-header %}
|
||||
<h3 class="card-header-title has-background-success-dark has-text-white">
|
||||
<span class="icon is-size-3 mr-2" aria-hidden="true">📚</span>
|
||||
<span class="icon is-size-3 mr-2" aria-hidden="true">✨</span>
|
||||
{% blocktrans %}{{ year }} in the books{% endblocktrans %}
|
||||
</h3>
|
||||
{% endblock %}
|
||||
|
||||
{% block card-content %}
|
||||
<p class="mb-3">
|
||||
{% blocktrans %}The end of the year is the best moment to take stock of all the books read during the last 12 months. How many pages have you read? Which book is your best-rated of the year? We compiled these stats, and more!{% endblocktrans %}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="{% url 'annual-summary' year %}" class="button is-success has-background-success-dark">
|
||||
{% blocktrans %}Discover your stats for {{ year }}!{% endblocktrans %}
|
||||
</a>
|
||||
</p>
|
||||
{% endblock %}
|
||||
|
|
@ -28,6 +28,8 @@
|
|||
{% include 'snippets/opengraph_images.html' %}
|
||||
{% endblock %}
|
||||
<meta name="twitter:image:alt" content="BookWyrm Logo">
|
||||
|
||||
{% block head_links %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" aria-label="main navigation">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
{% for author in book.authors.all|slice:limit %}
|
||||
<a
|
||||
href="{{ author.local_path }}"
|
||||
class="author"
|
||||
class="author {{ link_class }}"
|
||||
itemprop="author"
|
||||
itemscope
|
||||
itemtype="https://schema.org/Thing"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue