forked from mirrors/bookwyrm
2e944bceb9
The "for" value pointed to an ID for an input that didn't exist, which caused screenreaders to not read the value of the label when specififying readthrough dates. Removing the 'for' tags makes the screenreader read the label as expected since the label wraps the input, so we don't need a 'for'.
214 lines
8.8 KiB
HTML
214 lines
8.8 KiB
HTML
{% extends 'layout.html' %}
|
|
{% load fr_display %}
|
|
{% load humanize %}
|
|
{% block content %}
|
|
|
|
<div class="block">
|
|
<div class="level">
|
|
<h2 class="title level-left">
|
|
<span>{% include 'snippets/book_titleby.html' with book=book %}</span>
|
|
</h2>
|
|
|
|
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
|
|
<div class="level-right">
|
|
<a href="{{ book.id }}/edit">
|
|
<span class="icon icon-pencil">
|
|
<span class="is-sr-only">Edit Book</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-narrow">
|
|
{% include 'snippets/book_cover.html' with book=book size=large %}
|
|
{% include 'snippets/rate_action.html' with user=request.user book=book %}
|
|
{% include 'snippets/shelve_button.html' %}
|
|
|
|
{% if request.user.is_authenticated and not book.cover %}
|
|
<div class="box p-2">
|
|
<form name="add-cover" method="POST" action="/upload_cover/{{ book.id }}" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div class="field">
|
|
<label class="label" for="id_cover">Cover:</label>
|
|
<input type="file" name="cover" accept="image/*" class="" id="id_cover">
|
|
</div>
|
|
<div class="field">
|
|
<button class="button is-small" type="submit">Add cover</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<dl class="content">
|
|
{% for field in info_fields %}
|
|
{% if field.value %}
|
|
<dt>{{ field.name }}:</dt>
|
|
<dd>{{ field.value }}</dd>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="block">
|
|
<h3 class="field is-grouped">{% include 'snippets/stars.html' with rating=rating %} ({{ reviews|length }} review{{ reviews|length|pluralize }})</h3>
|
|
|
|
{% include 'snippets/book_description.html' %}
|
|
|
|
{% if book.parent_work.edition_set.count > 1 %}
|
|
<p><a href="/book/{{ book.parent_work.id }}/editions">{{ book.parent_work.edition_set.count }} editions</a></p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% for readthrough in readthroughs %}
|
|
<div class="content block">
|
|
<input class="toggle-control" type="radio" name="show-edit-readthrough" id="show-readthrough-{{ readthrough.id }}" checked>
|
|
<div class="toggle-content hidden">
|
|
<dl>
|
|
{% if readthrough.start_date %}
|
|
<dt>Started reading:</dt>
|
|
<dd>{{ readthrough.start_date | naturalday }}</dd>
|
|
{% endif %}
|
|
{% if readthrough.finish_date %}
|
|
<dt>Finished reading:</dt>
|
|
<dd>{{ readthrough.finish_date | naturalday }}</dd>
|
|
{% endif %}
|
|
</dl>
|
|
<div class="field is-grouped">
|
|
<label class="button is-small" for="edit-readthrough-{{ readthrough.id }}">
|
|
<span class="icon icon-pencil">
|
|
<span class="is-sr-only">Edit read-through dates</span>
|
|
</span>
|
|
</label>
|
|
<label class="button is-small" for="delete-readthrough-{{ readthrough.id }}">
|
|
<span class="icon icon-x">
|
|
<span class="is-sr-only">Delete this read-through</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<input class="toggle-control" type="radio" name="show-edit-readthrough" id="edit-readthrough-{{ readthrough.id }}">
|
|
<div class="toggle-content hidden">
|
|
<div class="box">
|
|
<form name="edit-readthrough" action="/edit-readthrough" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
|
<div class="field">
|
|
<label class="label">
|
|
Started reading
|
|
<input type="date" name="start_date" class="input" id="id_start_date-{{ readthrough.id }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
Finished reading
|
|
<input type="date" name="finish_date" class="input" id="id_finish_date-{{ readthrough.id }}" value="{{ readthrough.finish_date | date:"Y-m-d" }}">
|
|
</label>
|
|
</div>
|
|
<div class="field is-grouped">
|
|
<button class="button is-primary" type="submit">Save</button>
|
|
<label class="button" for="show-readthrough-{{ readthrough.id }}">Cancel</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<input class="toggle-control" type="checkbox" name="delete-readthrough-{{ readthrough.id }}" id="delete-readthrough-{{ readthrough.id }}">
|
|
<div class="modal toggle-content hidden">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Delete this read-though?</p>
|
|
<label class="delete" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
|
|
</header>
|
|
<footer class="modal-card-foot">
|
|
<form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
|
<button class="button is-danger" type="submit">
|
|
Delete
|
|
</button>
|
|
<label for="delete-readthrough-{{ readthrough.id }}" class="button">Cancel</button>
|
|
</form>
|
|
</footer>
|
|
</div>
|
|
<label class="modal-close is-large" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if request.user.is_authenticated %}
|
|
<div class="box">
|
|
{% include 'snippets/create_status.html' with book=book hide_cover=True %}
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Tags</h3>
|
|
<form name="tag" action="/tag/" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="book" value="{{ book.id }}">
|
|
<input class="input" type="text" name="name">
|
|
<button class="button" type="submit">Add tag</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="block">
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
{% for tag in tags %}
|
|
{% include 'snippets/tag.html' with book=book tag=tag user_tags=user_tags %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% if not reviews %}
|
|
<div class="block">
|
|
<p>No reviews yet!</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="block">
|
|
{% for review in reviews %}
|
|
<div class="block">
|
|
{% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div class="block columns">
|
|
{% for rating in ratings %}
|
|
<div class="column">
|
|
<div class="media">
|
|
<div class="media-left">{% include 'snippets/avatar.html' %}</div>
|
|
<div class="media-content">
|
|
<div>
|
|
{% include 'snippets/username.html' %}
|
|
</div>
|
|
<div class="field is-grouped mb-0">
|
|
<div>rated it</div>
|
|
{% include 'snippets/stars.html' with rating=rating.rating %}
|
|
</div>
|
|
<div>
|
|
<a href="{{ rating.remote_id }}">{{ rating.published_date | naturaltime }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|
|
|