From f01b7fbd1516262b1c6eaf9c1cc57f459840ca7f Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 21 Apr 2021 18:34:04 +0200
Subject: [PATCH] Design and a11y fixes on Create Status forms

- Use `field` CSS class to better respect Bulma styles
- Fix buggy `id` on content field, causing a11y problems
- Fix progress control & select styles
- Various small style fixes
---
 .../snippets/create_status_form.html          | 58 ++++++++++++-------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html
index 57e36d963..a74230ad1 100644
--- a/bookwyrm/templates/snippets/create_status_form.html
+++ b/bookwyrm/templates/snippets/create_status_form.html
@@ -6,14 +6,16 @@
     <input type="hidden" name="user" value="{{ request.user.id }}">
     <input type="hidden" name="reply_parent" value="{% firstof draft.reply_parent.id reply_parent.id %}">
     {% if type == 'review' %}
-    <div class="control">
+    <div class="field">
         <label class="label" for="id_name_{{ book.id }}_{{ type }}">{% trans "Title" %}:</label>
-        <input type="text" name="name" maxlength="255" class="input" required="" id="id_name_{{ book.id }}_{{ type }}" placeholder="My {{ type }} of '{{ book.title }}'" value="{% firstof draft.name ''%}">
+        <div class="control">
+            <input type="text" name="name" maxlength="255" class="input" required="" id="id_name_{{ book.id }}_{{ type }}" placeholder="My {{ type }} of '{{ book.title }}'" value="{% firstof draft.name ''%}">
+        </div>
     </div>
     {% endif %}
-    <div class="control">
+    <div class="field">
         {% if type != 'reply' and type != 'direct'  %}
-        <label class="label" for="id_{% if type == 'quotation' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">
+        <label class="label{% if type == 'review' %} mb-0{% endif %}" for="id_{% if type == 'quotation' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">
             {% if type == 'comment' %}
             {% trans "Comment:" %}
             {% elif type == 'quotation' %}
@@ -25,28 +27,37 @@
         {% endif %}
 
         {% if type == 'review' %}
-        <fieldset>
+        <fieldset class="mb-1">
             <legend class="is-sr-only">{% trans "Rating" %}</legend>
 
             {% include 'snippets/form_rate_stars.html' with book=book type=type|default:'summary' default_rating=draft.rating %}
         </fieldset>
         {% endif %}
 
-        {% if type == 'quotation' %}
-        <textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required>{{ draft.quote|default:'' }}</textarea>
-        {% else %}
-        {% include 'snippets/content_warning_field.html' with parent_status=status %}
-        <textarea name="content" class="textarea" id="id_content_{{ type }}-{{ book.id }}{{reply_parent.id}}" placeholder="{{ placeholder }}" {% if type == 'reply' %} aria-label="Reply"{% endif %} required>{% if reply_parent %}{{ reply_parent|mentions:request.user }}{% endif %}{% if mentions %}@{{ mentions|username }} {% endif %}{{ draft.content|default:'' }}</textarea>
-        {% endif %}
+        <div class="control">
+            {% if type == 'quotation' %}
+            <textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required>{{ draft.quote|default:'' }}</textarea>
+            {% elif type == 'reply' %}
+            {% include 'snippets/content_warning_field.html' with parent_status=status %}
+            <textarea name="content" class="textarea" id="id_content_{{ type }}-{{ book.id }}{{reply_parent.id}}" placeholder="{{ placeholder }}" aria-label="{% trans 'Reply' %}" required>{% if reply_parent %}{{ reply_parent|mentions:request.user }}{% endif %}{% if mentions %}@{{ mentions|username }} {% endif %}{{ draft.content|default:'' }}</textarea>
+            {% else %}
+            {% include 'snippets/content_warning_field.html' with parent_status=status %}
+            <textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required>{{ draft.content|default:'' }}</textarea>
+            {% endif %}
+        </div>
     </div>
+
+    {# Supplemental fields #}
     {% if type == 'quotation' %}
-    <div class="control">
+    <div class="field">
         <label class="label" for="id_content_quote-{{ book.id }}">{% trans "Comment" %}:</label>
         {% include 'snippets/content_warning_field.html' with parent_status=status %}
-        <textarea name="content" class="textarea is-small" id="id_content_quote-{{ book.id }}">{{ draft.content|default:'' }}</textarea>
+        <div class="control">
+            <textarea name="content" class="textarea" rows="3" id="id_content_quote-{{ book.id }}">{{ draft.content|default:'' }}</textarea>
+        </div>
     </div>
     {% elif type == 'comment' %}
-    <div class="control">
+    <div>
         {% active_shelf book as active_shelf %}
         {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %}
 
@@ -58,11 +69,13 @@
                 <div class="control">
                     <input aria-label="{% if draft.progress_mode == 'PG' or readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}" class="input" type="number" min="0" name="progress" size="3" value="{% firstof draft.progress readthrough.progress '' %}" id="progress-{{ uuid }}">
                 </div>
-                <div class="control select">
-                    <select name="progress_mode" aria-label="Progress mode">
-                        <option value="PG" {% if draft.progress_mode == 'PG' or readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
-                        <option value="PCT" {% if draft.progress_mode == 'PCT' or readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
-                    </select>
+                <div class="control">
+                    <div class="select">
+                        <select name="progress_mode" aria-label="Progress mode">
+                            <option value="PG" {% if draft.progress_mode == 'PG' or readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
+                            <option value="PCT" {% if draft.progress_mode == 'PCT' or readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
+                        </select>
+                    </div>
                 </div>
             </div>
             {% if readthrough.progress_mode == 'PG' and book.pages %}
@@ -73,9 +86,12 @@
         {% endif %}
     </div>
     {% endif %}
-    <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">
+
+
     {# bottom bar #}
-    <div class="columns pt-1">
+    <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">
                 {% trans "Include spoiler alert" as button_text %}