From 5cd5a6107fa8df5c52823180db5fac3aadadfc2b Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Tue, 18 May 2021 10:45:51 -0700
Subject: [PATCH] Show text with buttons in most places

---
 bookwyrm/templates/author/author.html         |   5 +-
 bookwyrm/templates/book/book.html             |   7 +-
 bookwyrm/templates/goal.html                  |   2 +-
 bookwyrm/templates/lists/list_layout.html     |   2 +-
 bookwyrm/templates/lists/lists.html           |   2 +-
 .../templates/settings/federated_server.html  | 108 +++++++++---------
 bookwyrm/templates/settings/federation.html   |   5 +-
 .../snippets/create_status_form.html          |   2 +-
 .../snippets/filters_panel/filters_panel.html |   4 +-
 bookwyrm/templates/user/lists.html            |   2 +-
 bookwyrm/templates/user/shelf/shelf.html      |   4 +-
 bookwyrm/templates/user/user.html             |  10 +-
 12 files changed, 77 insertions(+), 76 deletions(-)

diff --git a/bookwyrm/templates/author/author.html b/bookwyrm/templates/author/author.html
index 56e9ce548..67f8792c9 100644
--- a/bookwyrm/templates/author/author.html
+++ b/bookwyrm/templates/author/author.html
@@ -14,9 +14,8 @@
         {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
         <div class="column is-narrow">
             <a href="{{ author.local_path }}/edit">
-                <span class="icon icon-pencil" title="{% trans 'Edit Author' %}">
-                    <span class="is-sr-only">{% trans "Edit Author" %}</span>
-                </span>
+                <span class="icon icon-pencil" title="{% trans 'Edit Author' %}" aria-hidden="True"></span>
+                <span>{% trans "Edit Author" %}</span>
             </a>
         </div>
         {% endif %}
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index 0aa648360..a82c00f69 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -38,9 +38,8 @@
         {% if user_authenticated and can_edit_book %}
         <div class="column is-narrow">
             <a href="{{ book.id }}/edit">
-                <span class="icon icon-pencil" title="{% trans "Edit Book" %}">
-                    <span class="is-sr-only">{% trans "Edit Book" %}</span>
-                </span>
+                <span class="icon icon-pencil" title="{% trans "Edit Book" %}" aria-hidden=True></span>
+                <span>{% trans "Edit Book" %}</span>
             </a>
         </div>
         {% endif %}
@@ -163,7 +162,7 @@
                     </div>
                     <div class="column is-narrow">
                         {% trans "Add read dates" as button_text %}
-                        {% include 'snippets/toggle/open_button.html' with text=button_text icon="plus" class="is-small" controls_text="add-readthrough" focus="add-readthrough-focus" %}
+                        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" class="is-small" controls_text="add-readthrough" focus="add-readthrough-focus" %}
                     </div>
                 </header>
                 <section class="is-hidden box" id="add-readthrough">
diff --git a/bookwyrm/templates/goal.html b/bookwyrm/templates/goal.html
index 22aba08e4..134f419fc 100644
--- a/bookwyrm/templates/goal.html
+++ b/bookwyrm/templates/goal.html
@@ -9,7 +9,7 @@
     {% if is_self and goal %}
     <div class="column is-narrow">
         {% trans "Edit Goal" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with text=button_text icon="pencil" controls_text="show-edit-goal" focus="edit-form-header" %}
+        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="show-edit-goal" focus="edit-form-header" %}
     </div>
     {% endif %}
 </div>
diff --git a/bookwyrm/templates/lists/list_layout.html b/bookwyrm/templates/lists/list_layout.html
index de7665e81..993587ca2 100644
--- a/bookwyrm/templates/lists/list_layout.html
+++ b/bookwyrm/templates/lists/list_layout.html
@@ -15,7 +15,7 @@
     {% if request.user == list.user %}
     <div class="column is-narrow">
         {% trans "Edit List" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with text=button_text icon="pencil" controls_text="edit-list" focus="edit-list-header" %}
+        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit-list" focus="edit-list-header" %}
     </div>
     {% endif %}
 </header>
diff --git a/bookwyrm/templates/lists/lists.html b/bookwyrm/templates/lists/lists.html
index d4b0a7c29..e39d5fde3 100644
--- a/bookwyrm/templates/lists/lists.html
+++ b/bookwyrm/templates/lists/lists.html
@@ -18,7 +18,7 @@
     {% if request.user.is_authenticated %}
     <div class="column is-narrow">
         {% trans "Create List" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with controls_text="create-list" icon="plus" text=button_text focus="create-list-header" %}
+        {% include 'snippets/toggle/open_button.html' with controls_text="create-list" icon_with_text="plus" text=button_text focus="create-list-header" %}
     </div>
     {% endif %}
 </header>
diff --git a/bookwyrm/templates/settings/federated_server.html b/bookwyrm/templates/settings/federated_server.html
index b300a92d7..9e00f92b7 100644
--- a/bookwyrm/templates/settings/federated_server.html
+++ b/bookwyrm/templates/settings/federated_server.html
@@ -15,60 +15,64 @@
 
 {% block panel %}
 <div class="columns">
-    <section class="column is-half content">
+    <section class="column is-half is-flex is-flex-direction-column">
         <h2 class="title is-4">{% trans "Details" %}</h2>
-        <dl>
-            <div class="is-flex">
-                <dt>{% trans "Software:" %}</dt>
-                <dd>{{ server.application_type }}</dd>
-            </div>
-            <div class="is-flex">
-                <dt>{% trans "Version:" %}</dt>
-                <dd>{{ server.application_version }}</dd>
-            </div>
-            <div class="is-flex">
-                <dt>{% trans "Status:" %}</dt>
-                <dd>{{ server.status }}</dd>
-            </div>
-        </dl>
+        <div class="box is-flex-grow-1 content">
+            <dl>
+                <div class="is-flex">
+                    <dt>{% trans "Software:" %}</dt>
+                    <dd>{{ server.application_type }}</dd>
+                </div>
+                <div class="is-flex">
+                    <dt>{% trans "Version:" %}</dt>
+                    <dd>{{ server.application_version }}</dd>
+                </div>
+                <div class="is-flex">
+                    <dt>{% trans "Status:" %}</dt>
+                    <dd>{{ server.status }}</dd>
+                </div>
+            </dl>
+        </div>
     </section>
 
-    <section class="column is-half content">
+    <section class="column is-half is-flex is-flex-direction-column">
         <h2 class="title is-4">{% trans "Activity" %}</h2>
-        <dl>
-            <div class="is-flex">
-                <dt>{% trans "Users:" %}</dt>
-                <dd>
-                    {{ users.count }}
-                    {% if server.user_set.count %}(<a href="{% url 'settings-users' %}?server={{ server.server_name }}">{% trans "View all" %}</a>){% endif %}
-                </dd>
-            </div>
-            <div class="is-flex">
-                <dt>{% trans "Reports:" %}</dt>
-                <dd>
-                    {{ reports.count }}
-                    {% if reports.count %}(<a href="{% url 'settings-reports' %}?server={{ server.server_name }}">{% trans "View all" %}</a>){% endif %}
-                </dd>
-            </div>
-            <div class="is-flex">
-                <dt>{% trans "Followed by us:" %}</dt>
-                <dd>
-                    {{ followed_by_us.count }}
-                </dd>
-            </div>
-            <div class="is-flex">
-                <dt>{% trans "Followed by them:" %}</dt>
-                <dd>
-                    {{ followed_by_them.count }}
-                </dd>
-            </div>
-            <div class="is-flex">
-                <dt>{% trans "Blocked by us:" %}</dt>
-                <dd>
-                    {{ blocked_by_us.count }}
-                </dd>
-            </div>
-        </dl>
+        <div class="box is-flex-grow-1 content">
+            <dl>
+                <div class="is-flex">
+                    <dt>{% trans "Users:" %}</dt>
+                    <dd>
+                        {{ users.count }}
+                        {% if server.user_set.count %}(<a href="{% url 'settings-users' %}?server={{ server.server_name }}">{% trans "View all" %}</a>){% endif %}
+                    </dd>
+                </div>
+                <div class="is-flex">
+                    <dt>{% trans "Reports:" %}</dt>
+                    <dd>
+                        {{ reports.count }}
+                        {% if reports.count %}(<a href="{% url 'settings-reports' %}?server={{ server.server_name }}">{% trans "View all" %}</a>){% endif %}
+                    </dd>
+                </div>
+                <div class="is-flex">
+                    <dt>{% trans "Followed by us:" %}</dt>
+                    <dd>
+                        {{ followed_by_us.count }}
+                    </dd>
+                </div>
+                <div class="is-flex">
+                    <dt>{% trans "Followed by them:" %}</dt>
+                    <dd>
+                        {{ followed_by_them.count }}
+                    </dd>
+                </div>
+                <div class="is-flex">
+                    <dt>{% trans "Blocked by us:" %}</dt>
+                    <dd>
+                        {{ blocked_by_us.count }}
+                    </dd>
+                </div>
+            </dl>
+        </div>
     </section>
 </div>
 
@@ -79,11 +83,11 @@
         </div>
         <div class="column is-narrow">
             {% trans "Edit" as button_text %}
-            {% include 'snippets/toggle/open_button.html' with text=button_text icon="pencil" controls_text="edit-notes" %}
+            {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit-notes" %}
         </div>
     </header>
     {% if server.notes %}
-    <p id="hide-edit-notes">{{ server.notes|to_markdown|safe }}</p>
+    <div class="box" id="hide-edit-notes">{{ server.notes|to_markdown|safe }}</div>
     {% endif %}
     <form class="box is-hidden" method="POST" action="{% url 'settings-federated-server' server.id %}" id="edit-notes">
         {% csrf_token %}
diff --git a/bookwyrm/templates/settings/federation.html b/bookwyrm/templates/settings/federation.html
index 9eb0f8b12..bf1986725 100644
--- a/bookwyrm/templates/settings/federation.html
+++ b/bookwyrm/templates/settings/federation.html
@@ -6,9 +6,8 @@
 
 {% block edit-button %}
 <a href="{% url 'settings-import-blocklist' %}">
-    <span class="icon icon-plus" title="{% trans 'Add server' %}">
-        <span class="is-sr-only">{% trans "Add server" %}</span>
-    </span>
+    <span class="icon icon-plus" title="{% trans 'Add server' %}" aria-hidden="True"></span>
+    <span>{% trans "Add server" %}</span>
 </a>
 {% endblock %}
 
diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html
index 5fd918981..c4e5045e2 100644
--- a/bookwyrm/templates/snippets/create_status_form.html
+++ b/bookwyrm/templates/snippets/create_status_form.html
@@ -103,7 +103,7 @@
 
     {# bottom bar #}
     <input type="checkbox" class="is-hidden" name="sensitive" id="id_show_spoilers-{{ uuid }}" {% if draft.content_warning or status.content_warning %}checked{% endif %} aria-hidden="true">
-    
+
     <div class="columns mt-1">
         <div class="field has-addons column">
             <div class="control">
diff --git a/bookwyrm/templates/snippets/filters_panel/filters_panel.html b/bookwyrm/templates/snippets/filters_panel/filters_panel.html
index d9cf28524..bc600ba27 100644
--- a/bookwyrm/templates/snippets/filters_panel/filters_panel.html
+++ b/bookwyrm/templates/snippets/filters_panel/filters_panel.html
@@ -5,9 +5,9 @@
 
         <span class="column is-narrow pb-0">
             {% trans "Show filters" as text %}
-            {% include 'snippets/toggle/open_button.html' with text=text controls_text="filters" icon="arrow-down" class="is-small" focus="filters" %}
+            {% include 'snippets/toggle/open_button.html' with text=text controls_text="filters" icon_with_text="arrow-down" class="is-small" focus="filters" %}
             {% trans "Hide filters" as text %}
-            {% include 'snippets/toggle/close_button.html' with text=text controls_text="filters" icon="x" class="is-small" %}
+            {% include 'snippets/toggle/close_button.html' with text=text controls_text="filters" icon_with_text="arrow-up" class="is-small" %}
         </span>
     </h2>
 
diff --git a/bookwyrm/templates/user/lists.html b/bookwyrm/templates/user/lists.html
index 398c6455c..b2dcb8bb7 100644
--- a/bookwyrm/templates/user/lists.html
+++ b/bookwyrm/templates/user/lists.html
@@ -15,7 +15,7 @@
     {% if is_self %}
     <div class="column is-narrow">
         {% trans "Create list" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with controls_text="create-list" icon="plus" text=button_text %}
+        {% include 'snippets/toggle/open_button.html' with controls_text="create-list" icon_with_text="plus" text=button_text %}
     </div>
     {% endif %}
 </div>
diff --git a/bookwyrm/templates/user/shelf/shelf.html b/bookwyrm/templates/user/shelf/shelf.html
index 9e7ae4f73..79a27529a 100644
--- a/bookwyrm/templates/user/shelf/shelf.html
+++ b/bookwyrm/templates/user/shelf/shelf.html
@@ -36,7 +36,7 @@
     {% if is_self %}
     <div class="column is-narrow">
         {% trans "Create shelf" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with text=button_text icon="plus" controls_text="create-shelf-form" focus="create-shelf-form-header" %}
+        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" controls_text="create-shelf-form" focus="create-shelf-form-header" %}
     </div>
     {% endif %}
 </div>
@@ -59,7 +59,7 @@
     {% if is_self and shelf.id %}
     <div class="column is-narrow">
         {% trans "Edit shelf" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with text=button_text icon="pencil" controls_text="edit-shelf-form" focus="edit-shelf-form-header" %}
+        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit-shelf-form" focus="edit-shelf-form-header" %}
     </div>
     {% endif %}
 </div>
diff --git a/bookwyrm/templates/user/user.html b/bookwyrm/templates/user/user.html
index 5afe168a2..d2e9be3e2 100644
--- a/bookwyrm/templates/user/user.html
+++ b/bookwyrm/templates/user/user.html
@@ -12,9 +12,8 @@
     {% if is_self %}
     <div class="column is-narrow">
         <a href="{% url 'prefs-profile' %}">
-            <span class="icon icon-pencil" title="Edit profile">
-                <span class="is-sr-only">{% trans "Edit profile" %}</span>
-            </span>
+            <span class="icon icon-pencil" title="Edit profile" aria-hidden="true"></span>
+            <span>{% trans "Edit profile" %}</span>
         </a>
     </div>
     {% endif %}
@@ -59,8 +58,9 @@
     <div class="columns is-mobile">
         <h2 class="title column">{% trans "User Activity" %}</h2>
         <div class="column is-narrow">
-            <a class="icon icon-rss" target="_blank" href="{{ user.local_path }}/rss">
-                <span class="is-sr-only">{% trans "RSS feed" %}</span>
+            <a target="_blank" href="{{ user.local_path }}/rss">
+                <span class="icon icon-rss" aria-hidden="true"></span>
+                <span>{% trans "RSS feed" %}</span>
             </a>
         </div>
     </div>