Make the switching work, wows

Layout's all wonky now, but hey
This commit is contained in:
Joel Bradshaw 2021-01-17 03:14:26 -08:00
parent 2d157137aa
commit a4796cf5c5

View file

@ -1,25 +1,40 @@
<form class="field is-grouped is-small pl-2" action="/edit-readthrough" method="POST"> <form class="field is-grouped is-small pl-2" action="/edit-readthrough" method="POST">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="id" value="{{ readthrough.id }}"/> <input type="hidden" name="id" value="{{ readthrough.id }}"/>
<div>
<input class="toggle-control" type="radio" name="progress-mode" id="progress-mode-page" {% if readthrough.progress_mode == 'PG' %}checked{% endif %}>
<div class="toggle-content hidden" role="tabpanel" id="progress-mode-page-panel">
<div class="control"> <div class="control">
{% if readthrough.progress_mode == 'PG' %} <label for="progress-mode-percent">on page</label>
on page
{% else %}
currently at
{% endif %}
</div> </div>
<div class="control"> <div class="control">
<input <input
aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Perent read{% endif%}" aria-label="Current page"
class="input is-small" type="text" class="input is-small" type="text"
name="progress" size="3" value="{{ readthrough.progress|default:"" }}"> name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
</div>
{% if book.pages %}
<div class="control">
of {{ book.pages }}
</div>
{% endif %}
</div>
</div>
<div>
<input class="toggle-control" type="radio" name="progress-mode" id="progress-mode-percent" {% if readthrough.progress_mode == 'PCT' %}checked{% endif %}>
<div class="toggle-content hidden" role="tabpanel" id="progress-mode-percent-panel">
<div class="control">
<label for="progress-mode-page">currently at</label>
</div> </div>
<div class="control"> <div class="control">
{% if readthrough.progress_mode == 'PG' and book.pages %} <input
of {{ book.pages }} aria-label="Percent read"
{% else %} class="input is-small" type="text"
name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
% %
{% endif %} </div>
</div>
</div> </div>
<div class="control"> <div class="control">
<button class="button is-small px-2" type="submit">Go</button> <button class="button is-small px-2" type="submit">Go</button>