moviewyrm/bookwyrm/templates/annual_summary/layout.html

247 lines
10 KiB
HTML
Raw Normal View History

2021-12-20 22:37:45 +00:00
{% extends 'layout.html' %}
{% load i18n %}
{% load static %}
{% block title %}{% blocktrans %}{{ year }} in the books{% endblocktrans %}{% endblock %}
2021-12-20 22:38:18 +00:00
{% block head_links %}
<link rel="stylesheet" href="{% static "css/vendor/dm_serif_display.css" %}">
{% endblock %}
2021-12-20 22:37:45 +00:00
{% block content %}
{% with display_name=summary_user.display_name %}
{% if user == summary_user %}
2021-12-21 10:43:09 +00:00
<div class="columns">
{% with year=paginated_years|first %}
{% if year %}
2021-12-21 10:43:09 +00:00
<div class="column">
<a href="{% url 'annual-summary' summary_user.localname year %}">
2021-12-21 10:43:09 +00:00
<span class="icon icon-arrow-left" aria-hidden="true"></span>
{{ year }}
2021-12-21 10:43:09 +00:00
</a>
</div>
{% endif %}
2021-12-21 10:43:09 +00:00
{% endwith %}
2021-12-21 10:52:33 +00:00
{% with year=paginated_years|last %}
2021-12-21 10:43:09 +00:00
{% if year %}
<div class="column has-text-right">
<a href="{% url 'annual-summary' summary_user.localname year %}">
{{ year }}
2021-12-21 10:43:09 +00:00
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</a>
</div>
{% endif %}
{% endwith %}
</div>
{% endif %}
2021-12-21 10:43:09 +00:00
<h1 class="title is-1 is-serif has-text-centered">
2021-12-21 12:50:05 +00:00
📚✨
{% blocktrans %}{{ year }} <em>in the books</em>{% endblocktrans %}
✨📚
</h1>
<p class="subtitle is-3 is-serif has-text-centered mb-5">
{% blocktrans %}<em>{{ display_name }}s</em> year of reading{% endblocktrans %}
</p>
2021-12-20 22:37:45 +00:00
2021-12-22 14:12:56 +00:00
<details>
<summary>
<h2 class="title is-6 has-text-centered has-text-success-dark">Share this page</h2>
</summary>
<div class="columns mt-3">
<div class="column is-three-fifths is-offset-one-fifth">
2021-12-22 14:13:42 +00:00
{% if year_key %}
<div class="horizontal-copy mb-5">
<textarea rows="1" readonly class="textarea is-small" aria-labelledby="embed-label" data-copytext data-copytext-label="{% trans 'Copy address' %}" data-copytext-success="{% trans 'Copied!' %}">{{ request.scheme|add:"://"|add:request.get_host|add:request.path }}?key={{ year_key }}</textarea>
</div>
{% endif %}
2021-12-22 14:12:56 +00:00
{% if user == summary_user %}
{% if year_key %}
<div class="columns mb-2">
<div class="column pb-0">
<p>Sharing status: <strong>public with key</strong></p>
<p>The page can be seen by anyone with the complete address.</p>
</div>
<form class="column pb-0 is-narrow" method="post" action="{% url "summary-revoke-key" %}" id="revoke-key">
{% csrf_token %}
<input type="hidden" name="year" value="{{ year }}" />
<button class="button is-danger is-outlined" type="submit">Make page private</button>
</form>
</div>
{% else %}
<div class="columns">
<div class="column pb-0">
<p>Sharing status: <strong>private</strong></p>
<p>The page is private, only you can see it.</p>
</div>
<form class="column pb-0 is-narrow" method="post" action="{% url "summary-add-key" %}" id="add-key">
{% csrf_token %}
<input type="hidden" name="year" value="{{ year }}" />
<button class="button is-primary is-outlined" type="submit">Make page public</button>
</form>
</div>
{% endif %}
<p class="help">When you make your page private, the old key wont give access to the page anymore. A new key will be created if the page is once again made public.</p>
{% endif %}
</div>
</div>
</details>
<div class="columns mt-1">
<div class="column is-one-fifth is-offset-two-fifths">
<hr />
</div>
</div>
2021-12-22 14:11:55 +00:00
{% if not books %}
<p class="has-text-centered is-size-5">{% blocktrans %}Sadly {{ display_name }} didnt finish any book in {{ year }}{% endblocktrans %}</p>
{% else %}
2021-12-20 22:37:45 +00:00
<div class="columns is-mobile">
<div class="column is-8 is-offset-2 has-text-centered">
2021-12-20 22:38:18 +00:00
<h2 class="title is-3 is-serif">
{% blocktrans %}In {{ year }}, {{ display_name }} read {{ books_total }} books<br />for a total of {{ pages_total }} pages!{% endblocktrans %}
2021-12-20 22:37:45 +00:00
</h2>
<p class="subtitle is-5">{% trans "Thats great!" %}</p>
2021-12-20 22:38:18 +00:00
<p class="title is-4 is-serif">
2021-12-20 22:37:45 +00:00
{% 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 dont have pages){% endblocktrans %}</p>
{% endif %}
</div>
</div>
2021-12-21 13:44:21 +00:00
{% if book_pages_lowest and book_pages_highest %}
2021-12-20 22:37:45 +00:00
<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 "Their shortest read this year…" %}
2021-12-20 22:38:18 +00:00
<p class="title is-4 is-serif is-italic">
2021-12-22 13:53:34 +00:00
<a href="{{ book_pages_lowest.local_path }}" class="has-text-success-dark">
2021-12-20 22:37:45 +00:00
{{ book_pages_lowest.title }}
</a>
</p>
{% if book_pages_lowest.authors.exists %}
<p class="subtitle is-5 mb-2">{% trans "by" %}
2021-12-22 13:53:34 +00:00
{% include 'snippets/authors.html' with book=book_pages_lowest link_class="has-text-success-dark" %}
2021-12-20 22:37:45 +00:00
</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" %}
2021-12-20 22:38:18 +00:00
<p class="title is-4 is-serif is-italic">
2021-12-22 13:53:34 +00:00
<a href="{{ book_pages_lowest.local_path }}" class="has-text-success-dark">
2021-12-20 22:37:45 +00:00
{{ book_pages_highest.title }}
</a>
</p>
{% if book_pages_highest.authors.exists %}
<p class="subtitle is-5 mb-2">{% trans "by" %}
2021-12-22 13:53:34 +00:00
{% include 'snippets/authors.html' with book=book_pages_highest link_class="has-text-success-dark" %}
2021-12-20 22:37:45 +00:00
</p>
{% endif %}
<p class="subtitle is-6">
{% with pages=book_pages_highest.pages %}
{% blocktrans %}<strong>{{ pages }}</strong> pages{% endblocktrans%}
{% endwith %}
</p>
</div>
</div>
2021-12-21 13:44:21 +00:00
{% endif %}
2021-12-20 22:37:45 +00:00
<div class="columns">
<div class="column is-one-fifth is-offset-two-fifths">
<hr />
</div>
</div>
{% if ratings_total > 0 %}
2021-12-20 22:37:45 +00:00
<div class="columns">
<div class="column has-text-centered">
2021-12-20 22:38:18 +00:00
<h2 class="title is-3 is-serif">
{% blocktrans %}{{ display_name }} left {{ ratings_total }} ratings, <br />their average rating is {{ rating_average }}{% endblocktrans %}
2021-12-20 22:37:45 +00:00
</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>
2021-12-21 10:43:45 +00:00
<div class="column is-4">
{% trans "Their best rated review" %}
2021-12-20 22:38:18 +00:00
<p class="title is-4 is-serif is-italic">
2021-12-22 13:53:34 +00:00
<a href="{{ book_rating_highest.book.local_path }}" class="has-text-success-dark">
2021-12-20 22:37:45 +00:00
{{ book_rating_highest.book.title }}
</a>
</p>
{% if book_rating_highest.book.authors.exists %}
<p class="subtitle is-5 mb-2">{% trans "by" %}
2021-12-22 13:53:34 +00:00
{% include 'snippets/authors.html' with book=book_rating_highest.book link_class="has-text-success-dark" %}
2021-12-20 22:37:45 +00:00
</p>
{% endif %}
<p class="subtitle is-6">
{% with rating=book_rating_highest.rating|floatformat %}
{% blocktrans %}Their rating: <strong>{{ rating }}</strong>{% endblocktrans%}
2021-12-20 22:37:45 +00:00
{% endwith %}
</p>
</div>
</div>
<div class="columns">
<div class="column is-one-fifth is-offset-two-fifths">
<hr />
</div>
</div>
{% endif %}
2021-12-20 22:37:45 +00:00
<div class="columns">
<div class="column has-text-centered">
2021-12-20 22:38:18 +00:00
<h2 class="title is-3 is-serif">
{% blocktrans %}All the books {{ display_name }} read in 2021{% endblocktrans %}
2021-12-20 22:37:45 +00:00
</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 %}
2021-12-22 13:53:34 +00:00
<a href="{{ book.local_path }}" class="has-text-centered is-big has-text-success-dark">
2021-12-20 22:37:45 +00:00
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' %}
2021-12-20 22:38:18 +00:00
<span class="book-title is-serif is-size-5">
2021-12-20 22:37:45 +00:00
{{ book.title }}
</span>
</a>
{% else %}
2021-12-22 13:53:34 +00:00
<a href="{{ book.local_path }}" class="has-text-centered has-text-success-dark">
2021-12-20 22:37:45 +00:00
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' %}
2021-12-20 22:38:18 +00:00
<span class="book-title is-serif is-size-6">
2021-12-20 22:37:45 +00:00
{{ book.title }}
</span>
</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endwith %}
2021-12-20 22:37:45 +00:00
{% endblock %}