Merge branch 'main' into progress_update

bookwyrm/templates/snippets/boost_button.html

@@ -1,18 +1,18 @@
 {% load bookwyrm_tags %}
 
 {% with status.id|uuid as uuid %}
-<form name="boost" action="/boost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
+<form name="boost" action="/boost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small" type="submit" {% if not status.boostable %}disabled{% endif %}>
-        <span class="icon icon-boost">
+        <span class="icon icon-boost" title="Boost status">
             <span class="is-sr-only">Boost status</span>
         </span>
     </button>
 </form>
-<form name="unboost" action="/unboost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
+<form name="unboost" action="/unboost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small is-success" type="submit">
-        <span class="icon icon-boost">
+        <span class="icon icon-boost" title="Un-boost status">
             <span class="is-sr-only">Un-boost status</span>
         </span>
     </button>

bookwyrm/templates/snippets/content_warning_field.html

@@ -2,18 +2,18 @@
 {% with 0|uuid as uuid %}
 <div class="control">
     <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">
-            <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>
-        <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">
-            <label class="button is-small" role="button" tabindex="0" for="hide-spoilers-{{ uuid }}">Remove 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="include-spoilers" controls_uid=uuid text="Add spoilers/content warning" small=True %}
         </div>
     </div>
 </div>

bookwyrm/templates/snippets/create_status.html

@@ -5,21 +5,21 @@
     <ul role="tablist">
         <li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
             <label for="review-{{ book.id }}">
-                <div onclick="tabChange(event)" role="tab" aria-selected="true" tabindex="0">
+                <div class="tab-change" role="tab" aria-selected="true" tabindex="0">
                     <a>Review</a>
                 </div>
             </label>
         </li>
         <li data-id="tab-comment-{{ book.id }}" data-category="tab-option-{{ book.id }}">
             <label for="comment-{{ book.id}}">
-                <div onclick="tabChange(event)" role="tab" tabindex="0">
+                <div class="tab-change" role="tab" tabindex="0">
                     <a>Comment</a>
                 </div>
             </label>
         </li>
         <li data-id="tab-quotation-{{ book.id }}" data-category="tab-option-{{ book.id }}">
             <label for="quote-{{ book.id }}">
-                <div onclick="tabChange(event)" role="tab" tabindex="0">
+                <div class="tab-change" role="tab" tabindex="0">
                     <a>Quote</a>
                 </div>
             </label>
@@ -39,5 +39,5 @@
 
 <div>
     <input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="quote-{{ book.id }}">
-    {% include 'snippets/create_status_form.html' with type="quote" placeholder="An excerpt from '"|add:book.title|add:"'" %}
+    {% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
 </div>

bookwyrm/templates/snippets/create_status_form.html

@@ -1,4 +1,4 @@
-<form class="toggle-content hidden tab-option-{{ book.id }}" name="{{ type }}" action="/{{ type }}" method="post" id="tab-{{ type }}-{{ book.id }}">
+<form class="toggle-content hidden tab-option-{{ book.id }}" name="{{ type }}" action="/post/{{ type }}" method="post" id="tab-{{ type }}-{{ book.id }}">
     {% csrf_token %}
     <input type="hidden" name="book" value="{{ book.id }}">
     <input type="hidden" name="user" value="{{ request.user.id }}">
@@ -9,7 +9,8 @@
     </div>
     {% endif %}
     <div class="control">
-        <label class="label" for="id_{% if type == 'quote' %}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 }}">{{ type|title }}:</label>
+        {% include 'snippets/content_warning_field.html' %}
 
         {% if type == 'review' %}
         <fieldset>
@@ -27,16 +28,13 @@
         </fieldset>
         {% endif %}
 
-        {% include 'snippets/content_warning_field.html' %}
-
-        {% if type == 'quote' %}
+        {% if type == 'quotation' %}
         <textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% else %}
         <textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% endif %}
-
     </div>
-    {% if type == 'quote' %}
+    {% if type == 'quotation' %}
     <div class="control">
         <label class="label" for="id_content_{{ book.id }}_quote">Comment:</label>
         <textarea name="content" class="textarea is-small" id="id_content_{{ book.id }}_quote"></textarea>

bookwyrm/templates/snippets/discover/small-book.html

@@ -1,7 +1,9 @@
 {% load bookwyrm_tags %}
 {% if book %}
 {% include 'snippets/book_cover.html' with book=book %}
+{% if ratings %}
 {% include 'snippets/stars.html' with rating=ratings|dict_key:book.id %}
+{% endif %}
 
 <h3 class="title is-6"><a href="/book/{{ book.id }}">{{ book.title }}</a></h3>
 {% if book.authors %}

bookwyrm/templates/snippets/fav_button.html

@@ -1,17 +1,17 @@
 {% load bookwyrm_tags %}
 {% with status.id|uuid as uuid %}
-<form name="favorite" action="/favorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
+<form name="favorite" action="/favorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small" type="submit">
-        <span class="icon icon-heart">
+        <span class="icon icon-heart" title="Like status">
             <span class="is-sr-only">Like status</span>
         </span>
     </button>
 </form>
-<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
+<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-success is-small" type="submit">
-        <span class="icon icon-heart">
+        <span class="icon icon-heart" title="Un-like status">
             <span class="is-sr-only">Un-like status</span>
         </span>
     </button>

bookwyrm/templates/snippets/finish_reading_modal.html

@@ -6,7 +6,7 @@
         <div class="modal-card">
             <header class="modal-card-head">
                 <p class="modal-card-title">Finish "{{ book.title }}"</p>
-                <label class="delete" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
+                {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %}
             </header>
             {% active_read_through book user as readthrough %}
             <form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
@@ -29,15 +29,15 @@
                 <footer class="modal-card-foot">
                     <div class="columns">
                         <div class="column field">
-                            <label for="post-status">
-                                <input type="checkbox" name="post-status" class="checkbox" checked>
+                            <label for="post_status-{{ uuid }}">
+                                <input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
                                 Post to feed
                             </label>
                             {% include 'snippets/privacy_select.html' %}
                         </div>
                         <div class="column">
                             <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>
                 </footer>

bookwyrm/templates/snippets/follow_button.html

@@ -7,7 +7,7 @@ Follow request already sent.
 
 {% else %}
 
-<form action="/follow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
+<form action="/follow/" method="POST" class="interaction follow-{{ user.id }} {% if request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
     {% if user.manually_approves_followers %}
@@ -16,7 +16,7 @@ Follow request already sent.
         <button class="button is-small is-link" type="submit">Follow</button>
     {% endif %}
 </form>
-<form action="/unfollow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
+<form action="/unfollow/" method="POST" class="interaction follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
     <button class="button is-small is-danger is-light" type="submit">Unfollow</button>

bookwyrm/templates/snippets/goal_form.html

@@ -0,0 +1,34 @@
+<form method="post" name="goal" action="{{ request.user.local_path }}/goal/{{ year }}">
+    {% csrf_token %}
+    <input type="hidden" name="year" value="{% if goal %}{{ goal.year }}{% else %}{{ year }}{% endif %}">
+    <input type="hidden" name="user" value="{{ request.user.id }}">
+
+    <div class="columns">
+        <div class="column">
+            <label class="label" for="id_goal">Reading goal:</label>
+            <div class="field has-addons">
+                <div class="control">
+                    <input type="number" class="input" name="goal" id="id_goal" value="{% if goal %}{{ goal.goal }}{% else %}12{% endif %}">
+                </div>
+                <p class="button is-static" aria-hidden="true">books</p>
+            </div>
+        </div>
+
+        <div class="column">
+            <label class="label"><p class="mb-2">Goal privacy:</p>
+                {% include 'snippets/privacy_select.html' with no_label=True current=goal.privacy %}
+            </label>
+        </div>
+    </div>
+    <label for="post_status" class="label">
+        <input type="checkbox" name="post-status" id="post_status" class="checkbox" checked>
+        Post to feed
+    </label>
+
+    <p>
+        <button type="submit" class="button is-link">Set goal</button>
+        {% if goal %}
+        {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-edit-goal" %}
+        {% endif %}
+    </p>
+</form>

bookwyrm/templates/snippets/goal_progress.html

@@ -0,0 +1,10 @@
+<p>
+    {% if goal.progress_percent >= 100 %}
+        Success!
+    {% elif goal.progress_percent %}
+        {{ goal.progress_percent }}% complete!
+    {% endif %}
+    {% if goal.user == request.user %}You've{% else %}{{ goal.user.display_name }} has{% endif %} read {% if request.path != goal.local_path %}<a href="{{ goal.local_path }}">{% endif %}{{ goal.book_count }} of {{ goal.goal }} books{% if request.path != goal.local_path %}</a>{% endif %}.
+</p>
+<progress class="progress is-large" value="{{ goal.book_count }}" max="{{ goal.goal }}" aria-hidden="true">{{ goal.progress_percent }}%</progress>
+

bookwyrm/templates/snippets/pagination.html

@@ -0,0 +1,19 @@
+<nav class="pagination" role="navigation" aria-label="pagination">
+    {% if page.has_previous %}
+    <p class="pagination-previous">
+        <a href="{{ path }}?page={{ page.previous_page_number }}{{ anchor }}">
+            <span class="icon icon-arrow-left"></span>
+            Previous
+        </a>
+    </p>
+    {% endif %}
+
+    {% if page.has_next %}
+    <p class="pagination-next">
+    <a href="{{ path }}?page={{ page.next_page_number }}{{ anchor }}">
+            Next
+            <span class="icon icon-arrow-right"></span>
+        </a>
+    </p>
+    {% endif %}
+</nav>

bookwyrm/templates/snippets/privacy-icons.html

@@ -1,17 +1,17 @@
 {% if item.privacy == 'public' %}
-<span class="icon icon-globe">
+<span class="icon icon-globe" title="Public post">
     <span class="is-sr-only">Public post</span>
 </span>
 {% elif item.privacy == 'unlisted' %}
-<span class="icon icon-unlock">
+<span class="icon icon-unlock" title="Unlisted post">
     <span class="is-sr-only">Unlisted post</span>
 </span>
 {% elif item.privacy == 'followers' %}
-<span class="icon icon-lock">
+<span class="icon icon-lock" title="Followers-only post">
     <span class="is-sr-only">Followers-only post</span>
 </span>
 {% else %}
-<span class="icon icon-envelope">
+<span class="icon icon-envelope" title="Private post">
     <span class="is-sr-only">Private post</span>
 </span>
 {% endif %}

bookwyrm/templates/snippets/readthrough.html

@@ -26,16 +26,8 @@
             {% endif %}
         </dl>
         <div class="field is-grouped">
-            <label class="button is-small" for="edit-readthrough-{{ readthrough.id }}" role="button" tabindex="0">
-                <span class="icon icon-pencil">
-                    <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>
+            {% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
+            {% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
         </div>
         {% if show_progress %}
         Progress Updates:
@@ -78,7 +70,7 @@
                 {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
                 <div class="field is-grouped">
                     <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>
             </form>
         </div>
@@ -101,7 +93,7 @@
                     <button class="button is-danger is-light" type="submit">
                         Delete
                     </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>
             </footer>
         </div>

bookwyrm/templates/snippets/reply_form.html

@@ -1,12 +1,10 @@
 {% 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)">
-    <div class="columns">
+<form class="is-flex-grow-1" name="reply" action="/post/reply" method="post">
+    <div class="columns is-align-items-flex-end">
         {% csrf_token %}
         <input type="hidden" name="reply_parent" value="{{ status.id }}">
         <input type="hidden" name="user" value="{{ request.user.id }}">
         <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>
             <div class="field">
@@ -25,4 +23,3 @@
         </div>
     </div>
 </form>
-{% endwith %}

bookwyrm/templates/snippets/shelf_selector.html

@@ -1,6 +1,6 @@
 <div class="dropdown">
     <div class="dropdown-trigger">
-        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
+        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
             <div class="button">
                 <span>Change shelf</span>
                 <span class="icon icon-arrow-down" aria-hidden="true"></span>

bookwyrm/templates/snippets/shelve_button.html

@@ -13,15 +13,9 @@
         <span>Read</span> <span class="icon icon-check"></span>
     </button>
     {% elif active_shelf.shelf.identifier == 'reading' %}
-    <label class="button is-small" for="finish-reading-{{ uuid }}" role="button" tabindex="0">
-        I'm done!
-    </label>
-    {% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
+    {% include 'snippets/toggle/toggle_button.html' with small=True text="I'm done!" controls_text="finish-reading" controls_uid=uuid %}
     {% elif active_shelf.shelf.identifier == 'to-read' %}
-    <label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
-        Start reading
-    </label>
-    {% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
+    {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
     {% else %}
     <form name="shelve" action="/shelve/" method="post">
         {% csrf_token %}
@@ -33,7 +27,7 @@
 
     <div class="dropdown">
         <div class="dropdown-trigger">
-            <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
+            <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
                 <div class="button is-small">
                     <span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
                 </div>
@@ -46,10 +40,7 @@
                 <li role="menuitem">
                     {% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
                     <div class="dropdown-item pt-0 pb-0">
-                        <label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
-                            Start reading
-                        </label>
-                        {% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
+                        {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
                     </div>
                     {% else %}
                     <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
@@ -68,5 +59,7 @@
     </div>
     {% endif %}
 </div>
+{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
+{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
 {% endwith %}
 {% endif %}

bookwyrm/templates/snippets/start_reading_modal.html

@@ -5,7 +5,7 @@
         <div class="modal-card">
             <header class="modal-card-head">
                 <p class="modal-card-title">Start "{{ book.title }}"</p>
-                <label class="delete" for="start-reading-{{ uuid }}" aria-label="close" role="button" tabindex="0"></label>
+                {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %}
             </header>
             <form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
                 <section class="modal-card-body">
@@ -20,15 +20,15 @@
                 <footer class="modal-card-foot">
                     <div class="columns">
                         <div class="column field">
-                            <label for="post-status">
-                                <input type="checkbox" name="post-status" class="checkbox" checked>
+                            <label for="post_status_start-{{ uuid }}">
+                                <input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
                                 Post to feed
                             </label>
                             {% include 'snippets/privacy_select.html' %}
                         </div>
                         <div class="column">
                             <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>
                 </footer>

bookwyrm/templates/snippets/status_body.html

@@ -21,27 +21,21 @@
         <div class="card-footer has-background-white-bis">
             <div class="card-footer-item">
                 {% if request.user.is_authenticated %}
-                <label class="button is-small" for="show-comment-{{ status.id }}">
-                    <div role="button" tabindex="0">
-                        <span class="icon icon-comment">
-                            <span class="is-sr-only">Reply</span>
-                        </span>
-                    </div>
-                </label>
+                {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text="Reply" icon='comment' small=True %}
                 {% include 'snippets/boost_button.html' with status=status %}
                 {% include 'snippets/fav_button.html' with status=status %}
 
                 {% else %}
                 <a href="/login">
-                    <span class="icon icon-comment">
+                    <span class="icon icon-comment" title="Reply">
                         <span class="is-sr-only">Reply</span>
                     </span>
 
-                    <span class="icon icon-boost">
+                    <span class="icon icon-boost" title="Boost status">
                         <span class="is-sr-only">Boost status</span>
                     </span>
 
-                    <span class="icon icon-heart">
+                    <span class="icon icon-heart" title="Like status">
                         <span class="is-sr-only">Like status</span>
                     </span>
                 </a>
@@ -57,17 +51,14 @@
             </div>
             {% if status.user == request.user %}
             <div class="card-footer-item">
-                <label class="button is-small" for="more-info-{{ status.id }}">
-                    <div class="icon icon-dots-three">
-                        <span class="is-sr-only">More options</span>
-                    </div>
-                </label>
+                {% include 'snippets/toggle/toggle_button.html' with controls_text="more-info" controls_uid=status.id text="More options" icon="dots-three" small=True %}
             </div>
             {% endif %}
         </div>
 
         {% 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="card-footer">
                 <div class="card-footer-item">
@@ -75,6 +66,7 @@
                 </div>
             </div>
         </div>
+        {% endwith %}
         {% endif %}
 
         {% if status.user == request.user %}

bookwyrm/templates/snippets/status_content.html

@@ -14,7 +14,7 @@
         <p>{{ status.content_warning }}</p>
         <input class="toggle-control" type="radio" name="toggle-status-cw-{{ status.id }}" id="hide-status-cw-{{ status.id }}" checked>
         <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>
 
@@ -22,7 +22,7 @@
     {% endif %}
     <div{% if status.content_warning %} class="toggle-content hidden"{% endif %}>
         {% 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 %}
 
         {% if status.quote %}

bookwyrm/templates/snippets/toggle/toggle_button.html

@@ -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 label %} aria-label="{{ label }}"{% endif %}>
+    {% if icon %}
+    <span class="icon icon-{{ icon }}" title="{{ text }}">
+        <span class="is-sr-only">{{ text }}</span>
+    </span>
+    {% else %}
+    {{ text }}
+    {% endif %}
+</label>

bookwyrm/templates/snippets/trimmed_text.html

@@ -7,13 +7,13 @@
 <div>
     <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>
-        <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>
 </div>
 <div>
     <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>
-        <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>
 </div>
 {% else %}