Uses javascript show/hide for reading progress updates

This commit is contained in:
Mouse Reeve 2021-01-22 12:51:23 -08:00
parent 806b781f15
commit 69c5bf71ed

View file

@ -1,43 +1,19 @@
{% load humanize %}
<div class="content block">
<div id="hide-edit-readthrough-{{ readthrough.id }}">
<dl class="mb-1">
{% if readthrough.start_date %}
<div class="is-flex">
<dt>Started reading:</dt>
<dd>{{ readthrough.start_date | naturalday }}</dd>
</div>
{% endif %}
{% if readthrough.finish_date %}
<div class="is-flex">
<dt>Finished reading:</dt>
<dd>{{ readthrough.finish_date | naturalday }}</dd>
</div>
{% elif readthrough.progress %}
<div class="is-flex">
<dt>Progress:</dt>
{% if readthrough.progress_mode == 'PG' %}
<dd>on page {{ readthrough.progress }} of {{ book.pages }}</dd>
{% else %}
<dd>{{ readthrough.progress }}%</dd>
{% endif %}
</div>
{% endif %}
</dl>
<div class="field has-addons">
<div class="control">
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id focus="edit-readthrough" %}
</div>
<div class="control">
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id focus="modal-title-delete-readthrough" %}
</div>
</div>
{% if show_progress %}
<div class="columns">
<div class="column">
Progress Updates:
</dl>
<ul>
{% if readthrough.finish_date %}
<li>{{ readthrough.start_date | naturalday }}: finished</li>
{% endif %}
{% if readthrough.progress %}
<li>{% if readthrough.progress_mode == 'PG' %}on page {{ readthrough.progress }}{% if book.pages %} of {{ book.pages }}{% endif %}
{% else %}{{ readthrough.progress }}%{% endif %}
{% include 'snippets/toggle/toggle_button.html' with text="Show all updates" controls_text="updates" controls_uid=readthrough.id class="is-small" %}
<ul id="updates-{{ readthrough.id }}" class="hidden">
{% for progress_update in readthrough.progress_updates %}
<li>
<form name="delete-update" action="/delete-progressupdate" method="POST">
@ -50,18 +26,30 @@
{% endif %}
<input type="hidden" name="id" value="{{ progress_update.id }}"/>
<button type="submit" class="button is-small" for="delete-progressupdate-{{ progress_update.id }}" role="button" tabindex="0">
<span class="icon icon-x">
<span class="icon icon-x" title="Delete this progress update">
<span class="is-sr-only">Delete this progress update</span>
</span>
</button>
</form>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
<li>{{ readthrough.start_date | naturalday }}: started</li>
</ul>
{% elif readthrough.progress_updates|length %}
<a href="?showprogress">Show {{ readthrough.progress_updates|length }} Progress Updates</a>
{% endif %}
</div>
<div class="column is-narrow">
<div class="field has-addons">
<div class="control">
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id focus="edit-readthrough" %}
</div>
<div class="control">
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id focus="modal-title-delete-readthrough" %}
</div>
</div>
</div>
</div>
</div>
</div>