Uses toggle button snippet for content warning

This commit is contained in:
Mouse Reeve
2021-01-17 08:50:47 -08:00
parent afdf5fc8ec
commit f7e3cbda84
7 changed files with 19 additions and 22 deletions

View File

@ -1,4 +1,4 @@
<div class="control{% if not parent_status.content_warning %} hidden{% endif %}" id="spoilers-{{ uuid }}">
<label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoiler alert:</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 %}>
<label class="is-sr-only" for="id_content_warning-{{ uuid }}">Spoiler alert:</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>

View File

@ -44,16 +44,12 @@
<textarea name="content" class="textarea is-small" id="id_content_{{ book.id }}_quote"></textarea>
</div>
{% endif %}
<input type="checkbox" class="hidden" name="sensitive" id="show-spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true">
<input type="checkbox" class="hidden" name="sensitive" id="id_show_spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true">
{# bottom bar #}
<div class="columns pt-1">
<div class="field has-addons column">
<div class="control">
<button type="button" class="button toggle-control" for="show-spoilers-{{ uuid }}" data-controls="spoilers-{{ uuid }}" data-hover-target="id_content_warning_{{ uuid }}" aria-pressed="{% if status.content_warning %}true{% else %}false{% endif %}" data-controls-checkbox="show-spoilers-{{ uuid }}">
<span class="icon icon-warning is-size-4" title="include spoiler alert">
<span class="is-sr-only">include spoiler alert</span>
</span>
</button>
{% include 'snippets/toggle/toggle_button.html' with text="Include spoiler alert" icon="warning is-size-4" controls_text="spoilers" controls_uid=uuid focus="id_content_warning" checkbox="id_show_spoilers" class="toggle-button" pressed=status.content_warning %}
</div>
<div class="control">
{% include 'snippets/privacy_select.html' %}

View File

@ -57,7 +57,7 @@
{% block card-bonus %}
{% if request.user.is_authenticated %}
{% 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 }}_reply">
<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-focus-target="id_content_{{ status.id }}{{ uuid }}_reply">
<section class="toggle-content hidden">
<div class="card-footer">
<div class="card-footer-item">

View File

@ -1,10 +1,11 @@
<button
type="button"
class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% else %}toggle-button{% endif %}"
class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
{% if hover %}data-hover-target="{{ hover }}"{% endif %}
{% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
{% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
{% if label %}aria-label="label"{% endif %}
aria-pressed="false"
aria-pressed="{% if pressed %}true{% else %}false{% endif %}"
>
{% if icon %}