moviewyrm/bookwyrm/templates/annual_summary/layout.html
2021-12-22 18:15:20 +01:00

248 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% 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 %}
{% with display_name=summary_user.display_name %}
{% if user == summary_user %}
<div class="columns">
{% with year=paginated_years|first %}
{% if year %}
<div class="column">
<a href="{% url 'annual-summary' summary_user.localname year %}">
<span class="icon icon-arrow-left" aria-hidden="true"></span>
{{ year }}
</a>
</div>
{% endif %}
{% endwith %}
{% with year=paginated_years|last %}
{% if year %}
<div class="column has-text-right">
<a href="{% url 'annual-summary' summary_user.localname year %}">
{{ year }}
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</a>
</div>
{% endif %}
{% endwith %}
</div>
{% endif %}
<h1 class="title is-1 is-serif has-text-centered">
📚✨
{% 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>
<details>
<summary>
<span role="heading" aria-level="2" class="title is-6 has-text-centered has-text-success-dark">
{% trans "Share this page" %}
</span>
</summary>
<div class="columns mt-3">
<div class="column is-three-fifths is-offset-one-fifth">
{% 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 %}
{% if user == summary_user %}
{% if year_key %}
<div class="columns mb-2">
<div class="column pb-0">
<p>{% trans "Sharing status: <strong>public with key</strong>" %}</p>
<p>{% trans "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">{% trans "Make page private" %}</button>
</form>
</div>
{% else %}
<div class="columns">
<div class="column pb-0">
<p>{% trans "Sharing status: <strong>private</strong>" %}</p>
<p>{% trans "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">{% trans "Make page public" %}</button>
</form>
</div>
{% endif %}
<p class="help">{% trans "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>
{% if not books %}
<p class="has-text-centered is-size-5">{% blocktrans %}Sadly {{ display_name }} didnt 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 }}, {{ display_name }} read {{ books_total }} books<br />for a total of {{ pages_total }} pages!{% endblocktrans %}
</h2>
<p class="subtitle is-5">{% trans "Thats 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 dont 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 "Their 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" %}
<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>
{% if ratings_total > 0 %}
<div class="columns">
<div class="column has-text-centered">
<h2 class="title is-3 is-serif">
{% blocktrans %}{{ display_name }} left {{ ratings_total }} ratings, <br />their 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 "Their 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 %}Their 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>
{% endif %}
<div class="columns">
<div class="column has-text-centered">
<h2 class="title is-3 is-serif">
{% blocktrans %}All the books {{ display_name }} 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 %}
{% endwith %}
{% endblock %}