rafaelcaricio/moviewyrm
1
0
Fork 0
forked from mirrors/bookwyrm
Code Issues 4 Pull requests Projects Releases Wiki Activity

Uses snippet for toggle buttons

Browse source
This commit is contained in:
Mouse Reeve 2021-01-14 13:02:50 -08:00
parent e57c4f4bcd
commit aa564b26c8
13 changed files with 45 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
bookwyrm/templates/book.html
View file

@ -95,14 +95,14 @@
{% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %} {% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %}
<div> <div>
<input class="toggle-control" type="radio" name="add-description" id="hide-description" checked> <input class="toggle-control" type="radio" name="add-description" id="hide-description-{{ book.id }}" checked>
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<label class="button" for="add-description" tabindex="0" role="button">Add description</label> {% include 'snippets/toggle/toggle_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id %}
</div> </div>
</div> </div>
<div> <div>
<input class="toggle-control" type="radio" name="add-description" id="add-description"> <input class="toggle-control" type="radio" name="add-description" id="add-description-{{ book.id }}" data-hover-target="id_description">
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<div class="box"> <div class="box">
<form name="add-description" method="POST" action="/add-description/{{ book.id }}"> <form name="add-description" method="POST" action="/add-description/{{ book.id }}">
@ -113,7 +113,7 @@
</p> </p>
<div class="field"> <div class="field">
<button class="button is-primary" type="submit">Save</button> <button class="button is-primary" type="submit">Save</button>
<label class="button" for="hide-description" tabindex="0" role="button">Cancel</label> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-description" controls_uid=book.id %}
</div> </div>
</form> </form>
</div> </div>
@ -155,7 +155,7 @@
<div> <div>
<input type="radio" class="toggle-control" name="add-readthrough-form" id="hide-create-readthrough" checked> <input type="radio" class="toggle-control" name="add-readthrough-form" id="hide-create-readthrough" checked>
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<label class="button" for="add-readthrough" class="button" role="button" tabindex="0">Add read dates</label> {% include 'snippets/toggle/toggle_button.html' with text="Add read dates" controls_text="add-readthrough" %}
</div> </div>
</div> </div>
<div> <div>
@ -165,7 +165,7 @@
{% include 'snippets/readthrough_form.html' with readthrough=None %} {% include 'snippets/readthrough_form.html' with readthrough=None %}
<div class="field is-grouped"> <div class="field is-grouped">
<button class="button is-primary" type="submit">Create</button> <button class="button is-primary" type="submit">Create</button>
<label class="button" for="hide-create-readthrough" role="button" tabindex="0">Cancel</label> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-create-readthrough" %}
</div> </div>
</form> </form>
</div> </div>

8
bookwyrm/templates/search_results.html
View file

@ -30,9 +30,7 @@
<input class="toggle-control" type="radio" name="more-results" id="fewer-results" checked> <input class="toggle-control" type="radio" name="more-results" id="fewer-results" checked>
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<label class="button is-small" for="more-results"> {% include 'snippets/toggle/toggle_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
<div role="button" tabindex="0">Show results from other catalogues</div>
</label>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -64,9 +62,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% if local_results.results %} {% if local_results.results %}
<label class="button is-small" for="fewer-results"> {% include 'snippets/toggle/toggle_button.html' with text="Hide results from other catalogues" small=True controls_text="fewer-results" %}
<div role="button" tabindex="0">Hide results from other catalogues</div>
</label>
{% endif %} {% endif %}
</div> </div>
</div> </div>

12
bookwyrm/templates/snippets/content_warning_field.html
View file

@ -2,18 +2,18 @@
{% with 0|uuid as uuid %} {% with 0|uuid as uuid %}
<div class="control"> <div class="control">
<div> <div>
<input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}> <input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %} data-hover-target="id_content_warning_{{ uuid }}">
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<label class="button is-small" role="button" tabindex="0" for="include-spoilers-{{ uuid }}">Add spoilers/content warning</label> <label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</label>
<input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
{% include 'snippets/toggle/toggle_button.html' with controls_text="hide-spoilers" controls_uid=uuid text="Remove spoilers/content warning" small=True %}
</div> </div>
</div> </div>
<div> <div>
<input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %}> <input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<label class="button is-small" role="button" tabindex="0" for="hide-spoilers-{{ uuid }}">Remove spoilers/content warning</label> {% include 'snippets/toggle/toggle_button.html' with controls_text="include-spoilers" controls_uid=uuid text="Add spoilers/content warning" small=True %}
<label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</label>
<input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
</div> </div>
</div> </div>
</div> </div>

3
bookwyrm/templates/snippets/create_status_form.html
View file

@ -27,14 +27,13 @@
</fieldset> </fieldset>
{% endif %} {% endif %}
{% include 'snippets/content_warning_field.html' %}
{% if type == 'quote' %} {% if type == 'quote' %}
<textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea> <textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
{% else %} {% else %}
<textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea> <textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
{% endif %} {% endif %}
{% include 'snippets/content_warning_field.html' %}
</div> </div>
{% if type == 'quote' %} {% if type == 'quote' %}
<div class="control"> <div class="control">

2
bookwyrm/templates/snippets/finish_reading_modal.html
View file

@ -37,7 +37,7 @@
</div> </div>
<div class="column"> <div class="column">
<button type="submit" class="button is-success">Save</button> <button type="submit" class="button is-success">Save</button>
<label for="finish-reading-{{ uuid }}" class="button" role="button">Cancel</button> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
</div> </div>
</div> </div>
</footer> </footer>

16
bookwyrm/templates/snippets/readthrough.html
View file

@ -17,16 +17,8 @@
{% endif %} {% endif %}
</dl> </dl>
<div class="field is-grouped"> <div class="field is-grouped">
<label class="button is-small" for="edit-readthrough-{{ readthrough.id }}" role="button" tabindex="0"> {% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
<span class="icon icon-pencil"> {% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
<span class="is-sr-only">Edit read-through dates</span>
</span>
</label>
<label class="button is-small" for="delete-readthrough-{{ readthrough.id }}" role="button" tabindex="0">
<span class="icon icon-x">
<span class="is-sr-only">Delete this read-through</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>
@ -39,7 +31,7 @@
{% include 'snippets/readthrough_form.html' with readthrough=readthrough %} {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
<div class="field is-grouped"> <div class="field is-grouped">
<button class="button is-primary" type="submit">Save</button> <button class="button is-primary" type="submit">Save</button>
<label class="button" for="show-readthrough-{{ readthrough.id }}" role="button" tabindex="0">Cancel</label> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="show-readthrough" controls_uid=readthrough.id %}
</div> </div>
</form> </form>
</div> </div>
@ -62,7 +54,7 @@
<button class="button is-danger is-light" type="submit"> <button class="button is-danger is-light" type="submit">
Delete Delete
</button> </button>
<label for="delete-readthrough-{{ readthrough.id }}" class="button" role="button" tabindex="0">Cancel</button> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
</form> </form>
</footer> </footer>
</div> </div>

5
bookwyrm/templates/snippets/reply_form.html
View file

@ -1,16 +1,14 @@
{% load bookwyrm_tags %} {% load bookwyrm_tags %}
{% with status.id|uuid as uuid %}
<form class="is-flex-grow-1" name="reply" action="/reply" method="post" onsubmit="return reply(event)"> <form class="is-flex-grow-1" name="reply" action="/reply" method="post" onsubmit="return reply(event)">
<div class="columns"> <div class="columns">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="reply_parent" value="{{ status.id }}"> <input type="hidden" name="reply_parent" value="{{ status.id }}">
<input type="hidden" name="user" value="{{ request.user.id }}"> <input type="hidden" name="user" value="{{ request.user.id }}">
<div class="column"> <div class="column">
{% include 'snippets/content_warning_field.html' with parent_status=status %}
<label for="id_content_{{ status.id }}-{{ uuid }}" class="is-sr-only">Reply</label> <label for="id_content_{{ status.id }}-{{ uuid }}" class="is-sr-only">Reply</label>
<div class="field"> <div class="field">
<textarea class="textarea" name="content" placeholder="Leave a comment..." id="id_content_{{ status.id }}-{{ uuid }}" required="true"></textarea> <textarea class="textarea" name="content" placeholder="Leave a comment..." id="id_content_{{ status.id }}-{{ uuid }}" required="true"></textarea>
{% include 'snippets/content_warning_field.html' with parent_status=status %}
</div> </div>
</div> </div>
<div class="column is-narrow"> <div class="column is-narrow">
@ -25,4 +23,3 @@
</div> </div>
</div> </div>
</form> </form>
{% endwith %}

16
bookwyrm/templates/snippets/shelve_button.html
View file

@ -13,15 +13,9 @@
<span>Read</span> <span class="icon icon-check"></span> <span>Read</span> <span class="icon icon-check"></span>
</button> </button>
{% elif active_shelf.shelf.identifier == 'reading' %} {% elif active_shelf.shelf.identifier == 'reading' %}
<label class="button is-small" for="finish-reading-{{ uuid }}" role="button" tabindex="0"> {% include 'snippets/toggle/toggle_button.html' with small=True text="I'm done!" controls_text="finish-reading" controls_uid=uuid %}
I'm done!
</label>
{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
{% elif active_shelf.shelf.identifier == 'to-read' %} {% elif active_shelf.shelf.identifier == 'to-read' %}
<label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0"> {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
Start reading
</label>
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
{% else %} {% else %}
<form name="shelve" action="/shelve/" method="post"> <form name="shelve" action="/shelve/" method="post">
{% csrf_token %} {% csrf_token %}
@ -46,9 +40,7 @@
<li role="menuitem"> <li role="menuitem">
{% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %} {% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
<div class="dropdown-item pt-0 pb-0"> <div class="dropdown-item pt-0 pb-0">
<label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0"> {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
Start reading
</label>
</div> </div>
{% else %} {% else %}
<form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post"> <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
@ -67,5 +59,7 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
{% endwith %} {% endwith %}
{% endif %} {% endif %}

2
bookwyrm/templates/snippets/start_reading_modal.html
View file

@ -28,7 +28,7 @@
</div> </div>
<div class="column"> <div class="column">
<button class="button is-success" type="submit">Save</button> <button class="button is-success" type="submit">Save</button>
<label for="start-reading-{{ uuid }}" class="button" role="button" tabindex="0">Cancel</button> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
</div> </div>
</div> </div>
</footer> </footer>

18
bookwyrm/templates/snippets/status_body.html
View file

@ -21,13 +21,7 @@
<div class="card-footer has-background-white-bis"> <div class="card-footer has-background-white-bis">
<div class="card-footer-item"> <div class="card-footer-item">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<label class="button is-small" for="show-comment-{{ status.id }}"> {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text="Reply" icon='comment' small=True %}
<div role="button" tabindex="0">
<span class="icon icon-comment">
<span class="is-sr-only">Reply</span>
</span>
</div>
</label>
{% include 'snippets/boost_button.html' with status=status %} {% include 'snippets/boost_button.html' with status=status %}
{% include 'snippets/fav_button.html' with status=status %} {% include 'snippets/fav_button.html' with status=status %}
@ -57,17 +51,14 @@
</div> </div>
{% if status.user == request.user %} {% if status.user == request.user %}
<div class="card-footer-item"> <div class="card-footer-item">
<label class="button is-small" for="more-info-{{ status.id }}"> {% include 'snippets/toggle/toggle_button.html' with controls_text="more-info" controls_uid=status.id text="More options" icon="dots-three" small=True %}
<div class="icon icon-dots-three">
<span class="is-sr-only">More options</span>
</div>
</label>
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}"> {% with status.id|uuid as uuid %}
<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-hover-target="id_content_{{ status.id }}-{{ uuid }}">
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<div class="card-footer"> <div class="card-footer">
<div class="card-footer-item"> <div class="card-footer-item">
@ -75,6 +66,7 @@
</div> </div>
</div> </div>
</div> </div>
{% endwith %}
{% endif %} {% endif %}
{% if status.user == request.user %} {% if status.user == request.user %}

4
bookwyrm/templates/snippets/status_content.html
View file

@ -14,7 +14,7 @@
<p>{{ status.content_warning }}</p> <p>{{ status.content_warning }}</p>
<input class="toggle-control" type="radio" name="toggle-status-cw-{{ status.id }}" id="hide-status-cw-{{ status.id }}" checked> <input class="toggle-control" type="radio" name="toggle-status-cw-{{ status.id }}" id="hide-status-cw-{{ status.id }}" checked>
<div class="toggle-content hidden"> <div class="toggle-content hidden">
<label class="button is-small" for="show-status-cw-{{ status.id }}" tabindex="0" role="button">Show More</label> {% include 'snippets/toggle/toggle_button.html' with text="Show More" small=True controls_text="show-status-cw" controls_uid=status.id %}
</div> </div>
</div> </div>
@ -22,7 +22,7 @@
{% endif %} {% endif %}
<div{% if status.content_warning %} class="toggle-content hidden"{% endif %}> <div{% if status.content_warning %} class="toggle-content hidden"{% endif %}>
{% if status.content_warning %} {% if status.content_warning %}
<label class="button is-small" for="hide-status-cw-{{ status.id }}" tabindex="0" role="button">Show Less</label> {% include 'snippets/toggle/toggle_button.html' with text="Show Less" small=True controls_text="hide-status-cw" controls_uid=status.id %}
{% endif %} {% endif %}
{% if status.quote %} {% if status.quote %}

9
bookwyrm/templates/snippets/toggle/toggle_button.html Normal file
View file

@ -0,0 +1,9 @@
<label class="{% if class %}{{ class }}{% else %}button{% endif %}{% if small %} is-small{% endif %}" for="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" tabindex="0" role="button">
{% if icon %}
<span class="icon icon-{{ icon }}">
<span class="is-sr-only">{{ text }}</span>
</span>
{% else %}
{{ text }}
{% endif %}
</label>

4
bookwyrm/templates/snippets/trimmed_text.html
View file

@ -7,13 +7,13 @@
<div> <div>
<input type="radio" name="show-hide-{{ uuid }}" id="show-{{ uuid }}" class="toggle-control" checked> <input type="radio" name="show-hide-{{ uuid }}" id="show-{{ uuid }}" class="toggle-control" checked>
<blockquote class="content toggle-content hidden"><span dir="auto">{{ trimmed | to_markdown | safe }}</span> <blockquote class="content toggle-content hidden"><span dir="auto">{{ trimmed | to_markdown | safe }}</span>
<label class="button is-small" for="hide-{{ uuid }}"><div role="button" tabindex="0">show more</div></label> {% include 'snippets/toggle/toggle_button.html' with text="show more" controls_text="hide" controls_uid=uuid class="has-text-link is-clickable" %}
</blockquote> </blockquote>
</div> </div>
<div> <div>
<input type="radio" name="show-hide-{{ uuid }}" id="hide-{{ uuid }}" class="toggle-control"> <input type="radio" name="show-hide-{{ uuid }}" id="hide-{{ uuid }}" class="toggle-control">
<blockquote class="content toggle-content hidden"><span dir="auto">{{ full | to_markdown | safe }}</span> <blockquote class="content toggle-content hidden"><span dir="auto">{{ full | to_markdown | safe }}</span>
<label class="button is-small" for="show-{{ uuid }}"><div role="button" tabindex="0">show less</div></label> {% include 'snippets/toggle/toggle_button.html' with text="show less" controls_text="show" controls_uid=uuid class="has-text-link is-clickable" %}
</blockquote> </blockquote>
</div> </div>
{% else %} {% else %}