Move progress updates into modal

This commit is contained in:
Mouse Reeve
2021-03-20 17:18:18 -07:00
parent 9b51ed40c8
commit 942c4a6664
9 changed files with 101 additions and 42 deletions

View File

@ -13,7 +13,15 @@
{% endif %}
<div class="control">
{% if type != 'reply' and type != 'direct' %}
<label class="label" for="id_{% if type == 'quotation' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">{{ type|title }}:</label>
<label class="label" for="id_{% if type == 'quotation' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">
{% if type == 'comment' %}
{% trans "Comment:" %}
{% elif type == 'quotation' %}
{% trans "Quote:" %}
{% elif type == 'review' %}
{% trans "Review:" %}
{% endif %}
</label>
{% endif %}
{% if type == 'review' %}
@ -45,6 +53,35 @@
{% include 'snippets/content_warning_field.html' with parent_status=status %}
<textarea name="content" class="textarea is-small" id="id_content_quote-{{ book.id }}"></textarea>
</div>
{% elif type == 'comment' %}
<div class="control">
{% active_shelf book as active_shelf %}
{% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %}
{% with readthrough=book.latest_readthrough %}
<div class="field">
<label class="label" for="progress">{% trans "Progress:" %}</label>
<div class="field has-addons mb-0">
<div class="control">
<input
aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}"
class="input" type="number" min="0"
name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
</div>
<div class="control select">
<select name="progress_mode" aria-label="Progress mode">
<option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
<option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
</select>
</div>
</div>
{% if readthrough.progress_mode == 'PG' and book.pages %}
<p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
{% endif %}
</div>
{% endwith %}
{% endif %}
</div>
{% endif %}
<input type="checkbox" class="hidden" name="sensitive" id="id_show_spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true">
{# bottom bar #}

View File

@ -1,28 +0,0 @@
{% load i18n %}
<form class="field is-grouped is-small" action="/edit-readthrough" method="POST">
{% csrf_token %}
<input type="hidden" name="id" value="{{ readthrough.id }}"/>
<div class="field">
<label class="label is-align-self-center mb-0 pr-2" for="progress">{% trans "Progress:" %}</label>
<div class="field has-addons mb-0">
<div class="control">
<input
aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}"
class="input is-small" type="number" min="0"
name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
</div>
<div class="control select is-small">
<select name="progress_mode" aria-label="Progress mode">
<option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
<option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
</select>
</div>
<div class="control">
<button class="button is-small px-2 is-primary" type="submit">{% trans "Save" %}</button>
</div>
</div>
{% if readthrough.progress_mode == 'PG' and book.pages %}
<p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
{% endif %}
</div>
</form>

View File

@ -0,0 +1,42 @@
{% extends 'components/modal.html' %}
{% load i18n %}
{% block modal-title %}
{% trans "Update progress" %}
{% endblock %}
{% block modal-form-open %}
<form action="{% url 'edit-readthrough' %}" method="POST">
{% endblock %}
{% block modal-body %}
{% csrf_token %}
<input type="hidden" name="id" value="{{ readthrough.id }}"/>
<div class="field">
<label class="label is-align-self-center mb-0 pr-2" for="progress">{% trans "Progress:" %}</label>
<div class="field has-addons mb-0">
<div class="control">
<input
aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}"
class="input" type="number" min="0"
name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
</div>
<div class="control select">
<select name="progress_mode" aria-label="Progress mode">
<option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
<option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
</select>
</div>
</div>
{% if readthrough.progress_mode == 'PG' and book.pages %}
<p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
{% endif %}
</div>
{% endblock %}
{% block modal-footer %}
<button class="button is-success" type="submit">{% trans "Save" %}</button>
{% trans "Cancel" as button_text %}
{% include 'snippets/toggle/toggle_button.html' with text=button_text %}
{% endblock %}
{% block modal-form-close %}</form>{% endblock %}

View File

@ -3,7 +3,7 @@
{% with book.id|uuid as uuid %}
{% active_shelf book as active_shelf %}
<div class="field has-addons">
<div class="field has-addons mb-0">
{% if switch_mode and active_shelf.book != book %}
<div class="control">
{% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %}
@ -23,5 +23,7 @@
{% latest_read_through book request.user as readthrough %}
{% include 'snippets/shelve_button/finish_reading_modal.html' with book=active_shelf.book controls_text="finish-reading" controls_uid=uuid readthrough=readthrough %}
{% include 'snippets/shelve_button/progress_update_modal.html' with book=shelf_book.book controls_text="progress-update" controls_uid=uuid readthrough=readthrough %}
{% endwith %}
{% endif %}

View File

@ -27,3 +27,11 @@
</div>
{% if dropdown %}</li>{% endif %}
{% endfor %}
{% if dropdown %}
<li role="menuitem">
<div class="dropdown-item pt-0 pb-0">
{% trans "Update progress" as button_text %}
{% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="progress-update" controls_uid=button_uuid focus="modal-title-progress-update" %}
</div>
</li>
{% endif %}