Using toggle button snippets on shelf page

This commit is contained in:
Mouse Reeve 2021-01-14 14:00:05 -08:00
parent e2d341b147
commit aa7320ffe0

View file

@ -33,39 +33,35 @@
<div class="column is-narrow"> <div class="column is-narrow">
<input type="radio" id="create-shelf-form-hide" name="create-shelf-form" class="toggle-control" checked> <input type="radio" id="create-shelf-form-hide" name="create-shelf-form" class="toggle-control" checked>
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<label for="create-shelf-form-show"> {% include 'snippets/toggle/toggle_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form-show" %}
<div role="button" tabindex="0">
<span class="icon icon-plus">
<span class="is-sr-only">Create new shelf</span>
</span>
</div>
</label>
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control"> <div>
<div class="toggle-content hidden"> <input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control">
<div class="box mb-5"> <div class="toggle-content hidden">
<h2 class="title is-4">Create new shelf</h2> <div class="box mb-5">
<form name="create-shelf" action="/create-shelf/" method="post"> <h2 class="title is-4">Create new shelf</h2>
{% csrf_token %} <form name="create-shelf" action="/create-shelf/" method="post">
<input type="hidden" name="user" value="{{ request.user.id }}"> {% csrf_token %}
<div class="field"> <input type="hidden" name="user" value="{{ request.user.id }}">
<label class="label" for="id_name_create">Name:</label> <div class="field">
<input type="text" name="name" maxlength="100" class="input" required="true" id="id_name_create"> <label class="label" for="id_name_create">Name:</label>
</div> <input type="text" name="name" maxlength="100" class="input" required="true" id="id_name_create">
</div>
<label class="label"> <label class="label">
<p>Shelf privacy:</p> <p>Shelf privacy:</p>
{% include 'snippets/privacy_select.html' with no_label=True %} {% include 'snippets/privacy_select.html' with no_label=True %}
</label> </label>
<div class="field is-grouped"> <div class="field is-grouped">
<button class="button is-primary" type="submit">Create shelf</button> <button class="button is-primary" type="submit">Create shelf</button>
<label role="button" class="button" for="create-shelf-form-hide" tabindex="0">Cancel<label> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="create-shelf-form-hide" %}
</div> </div>
</form> </form>
</div>
</div> </div>
</div> </div>
@ -82,13 +78,7 @@
<div class="column is-narrow"> <div class="column is-narrow">
<input type="radio" id="edit-shelf-form-hide" name="edit-shelf-form" class="toggle-control" checked> <input type="radio" id="edit-shelf-form-hide" name="edit-shelf-form" class="toggle-control" checked>
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<label for="edit-shelf-form-show"> {% include 'snippets/toggle/toggle_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form-show" %}
<div role="button" tabindex="0">
<span class="icon icon-pencil">
<span class="is-sr-only">Edit shelf</span>
</span>
</div>
</label>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -116,7 +106,7 @@
</label> </label>
<div class="field is-grouped"> <div class="field is-grouped">
<button class="button is-primary" type="submit">Update shelf</button> <button class="button is-primary" type="submit">Update shelf</button>
<label role="button" class="button" for="edit-shelf-form-hide" tabindex="0">Cancel<label> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="edit-shelf-form-hide" %}
</div> </div>
</form> </form>
</div> </div>