Merge pull request #330 from mouse-reeve/wave-evaluator

Various small WAVE suggestions

bookwyrm/static/css/fonts/icomoon.svg

@@ -31,6 +31,7 @@
 <glyph unicode="&#xe915;" glyph-name="local" horiz-adv-x="1097" d="M338.857 438.857c-59.429-1.714-113.143-27.429-151.429-73.143h-76.571c-57.143 0-110.857 27.429-110.857 90.857 0 46.286-1.714 201.714 70.857 201.714 12 0 71.429-48.571 148.571-48.571 26.286 0 51.429 4.571 76 13.143-1.714-12.571-2.857-25.143-2.857-37.714 0-52 16.571-103.429 46.286-146.286zM950.857 74.857c0-92.571-61.143-148-152.571-148h-499.429c-91.429 0-152.571 55.429-152.571 148 0 129.143 30.286 327.429 197.714 327.429 19.429 0 90.286-79.429 204.571-79.429s185.143 79.429 204.571 79.429c167.429 0 197.714-198.286 197.714-327.429zM365.714 804.571c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM768 585.143c0-121.143-98.286-219.429-219.429-219.429s-219.429 98.286-219.429 219.429 98.286 219.429 219.429 219.429 219.429-98.286 219.429-219.429zM1097.143 456.571c0-63.429-53.714-90.857-110.857-90.857h-76.571c-38.286 45.714-92 71.429-151.429 73.143 29.714 42.857 46.286 94.286 46.286 146.286 0 12.571-1.143 25.143-2.857 37.714 24.571-8.571 49.714-13.143 76-13.143 77.143 0 136.571 48.571 148.571 48.571 72.571 0 70.857-155.429 70.857-201.714zM1024 804.571c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286z" />
 <glyph unicode="&#xe916;" glyph-name="dots-three" d="M512.051 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64zM153.651 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.483 112.589 112.64s-50.381 112.64-112.589 112.64zM870.451 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64z" />
 <glyph unicode="&#xe917;" glyph-name="check" d="M424.653 102.502c-22.272 0-43.366 10.394-56.883 28.314l-182.938 241.715c-23.808 31.386-17.613 76.083 13.824 99.891 31.488 23.91 76.186 17.613 99.994-13.824l120.371-158.925 302.643 485.99c20.838 33.382 64.87 43.622 98.355 22.784 33.434-20.787 43.725-64.819 22.835-98.304l-357.581-573.952c-12.39-20.019-33.843-32.512-57.344-33.587-1.126-0.102-2.15-0.102-3.277-0.102z" />
+<glyph unicode="&#xe918;" glyph-name="dots-three-vertical" d="M512.051 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64zM512.051 706.56c62.208 0 112.589 50.483 112.589 112.64s-50.381 112.64-112.589 112.64c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64zM512.051 215.040c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64z" />
 <glyph unicode="&#xe986;" glyph-name="search" d="M992.262 88.604l-242.552 206.294c-25.074 22.566-51.89 32.926-73.552 31.926 57.256 67.068 91.842 154.078 91.842 249.176 0 212.078-171.922 384-384 384-212.076 0-384-171.922-384-384s171.922-384 384-384c95.098 0 182.108 34.586 249.176 91.844-1-21.662 9.36-48.478 31.926-73.552l206.294-242.552c35.322-39.246 93.022-42.554 128.22-7.356s31.892 92.898-7.354 128.22zM384 320c-141.384 0-256 114.616-256 256s114.616 256 256 256 256-114.616 256-256-114.614-256-256-256z" />
 <glyph unicode="&#xe9d7;" glyph-name="star-empty" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538zM512 206.502l-223.462-117.48 42.676 248.83-180.786 176.222 249.84 36.304 111.732 226.396 111.736-226.396 249.836-36.304-180.788-176.222 42.678-248.83-223.462 117.48z" />
 <glyph unicode="&#xe9d8;" glyph-name="star-half" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538zM512 206.502l-0.942-0.496 0.942 570.768 111.736-226.396 249.836-36.304-180.788-176.222 42.678-248.83-223.462 117.48z" />

bookwyrm/static/css/icons.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?aeb2zb');
+  src:  url('fonts/icomoon.eot?jhaogg');
-  src:  url('fonts/icomoon.eot?aeb2zb#iefix') format('embedded-opentype'),
+  src:  url('fonts/icomoon.eot?jhaogg#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?aeb2zb') format('truetype'),
+    url('fonts/icomoon.ttf?jhaogg') format('truetype'),
-    url('fonts/icomoon.woff?aeb2zb') format('woff'),
+    url('fonts/icomoon.woff?jhaogg') format('woff'),
-    url('fonts/icomoon.svg?aeb2zb#icomoon') format('svg');
+    url('fonts/icomoon.svg?jhaogg#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-dots-three-vertical:before {
+  content: "\e918";
+}
 .icon-check:before {
   content: "\e917";
 }

bookwyrm/static/js/shared.js

@@ -50,6 +50,10 @@ function tabChange(e, nested) {
     target.className = 'is-active';
 }
 
+function toggleMenu(el) {
+    el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') == 'false');
+}
+
 function ajaxPost(form) {
     fetch(form.action, {
         method : "POST",

bookwyrm/templates/author.html

@@ -2,7 +2,7 @@
 {% load fr_display %}
 {% block content %}
 <div class="block">
-    <h2 class="title">{{ author.display_name }}</h2>
+    <h1 class="title">{{ author.display_name }}</h1>
 
     {% if author.bio %}
     <p>

bookwyrm/templates/book.html

@@ -5,9 +5,9 @@
 
 <div class="block">
     <div class="level">
-        <h2 class="title level-left">
+        <h1 class="title level-left">
             <span>{% include 'snippets/book_titleby.html' with book=book %}</span>
-        </h2>
+        </h1>
 
         {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
         <div class="level-right">
@@ -132,7 +132,7 @@
 			    <form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
 				{% csrf_token %}
 				<input type="hidden" name="id" value="{{ readthrough.id }}">
-				<button class="button is-danger" type="submit">
+				<button class="button is-danger is-light" type="submit">
 				    Delete
 				</button>
 				<label for="delete-readthrough-{{ readthrough.id }}" class="button">Cancel</button>

bookwyrm/templates/edit_book.html

@@ -3,9 +3,9 @@
 {% block content %}
 <div class="block">
     <div class="level">
-        <h2 class="title level-left">
+        <h1 class="title level-left">
             Edit "{{ book.title }}"
-        </h2>
+        </h1>
         <div class="level-right">
             <a href="/book/{{ book.id }}">
                 <span class="edit-link icon icon-close">
@@ -14,23 +14,18 @@
             </a>
         </div>
     </div>
-    <div class="columns">
+    <div>
-        <div class="column is-narrow">
+        <p>Added: {{ book.created_date | naturaltime }}</p>
-            {% include 'snippets/book_cover.html' with book=book size="small" %}
+        <p>Updated: {{ book.updated_date | naturaltime }}</p>
-        </div>
-        <div class="column is-narrow">
-            <p>Added: {{ book.created_date | naturaltime }}</p>
-            <p>Updated: {{ book.updated_date | naturaltime }}</p>
-        </div>
     </div>
 </div>
 
 <form class="block" name="edit-book" action="/edit_book/{{ book.id }}" method="post" enctype="multipart/form-data">
     {% csrf_token %}
     <div class="block">
-        <h3 class="title is-4">Data sync</h3>
+        <h2 class="title is-4">Data sync
-        <h4 class="subtitle is-5">If sync is enabled, any changes will be over-written</h4>
+            <p class="subtitle is-6">If sync is enabled, any changes will be over-written</p>
-        </h3>
+        </h2>
         <div class="columns">
             <div class="column is-narrow">
                 <label class="checkbox" for="id_sync"><input class="checkbox" type="checkbox" name="sync" id="id_sync"> Sync</label>
@@ -43,7 +38,7 @@
 
     <div class="columns">
         <div class="block column">
-            <h3 class="title is-4">Book Identifiers</h3>
+            <h2 class="title is-4">Book Identifiers</h2>
             <p class="fields is-grouped"><label class="label"for="id_isbn_13">ISBN 13:</label> {{ form.isbn_13 }} </p>
             <p class="fields is-grouped"><label class="label"for="id_isbn_10">ISBN 10:</label> {{ form.isbn_10 }} </p>
             <p class="fields is-grouped"><label class="label"for="id_openlibrary_key">Openlibrary key:</label> {{ form.openlibrary_key }} </p>
@@ -52,13 +47,20 @@
         </div>
 
         <div class="column">
-            <div class="block">
+            <div class="columns">
-                <h3 class="title is-4">Cover</h3>
+                <div class="column is-narrow">
-                <p>{{ form.cover }} </p>
+                    {% include 'snippets/book_cover.html' with book=book size="small" %}
+                </div>
+                <div class="column is-narrow">
+                    <div class="block">
+                        <h2 class="title is-4">Cover</h2>
+                        <p>{{ form.cover }} </p>
+                    </div>
+                </div>
             </div>
 
             <div class="block">
-                <h3 class="title is-4">Physical Properties</h3>
+                <h2 class="title is-4">Physical Properties</h2>
                 <p class="fields is-grouped"><label class="label"for="id_physical_format">Format:</label> {{ form.physical_format }} </p>
                 <p class="fields is-grouped"><label class="label"for="id_pages">Pages:</label> {{ form.pages }} </p>
             </div>
@@ -66,7 +68,7 @@
     </div>
 
     <div class="block">
-        <h3 class="title is-4">Metadata</h3>
+        <h2 class="title is-4">Metadata</h2>
         <p class="fields is-grouped"><label class="label"for="id_title">Title:</label> {{ form.title }} </p>
         <p class="fields is-grouped"><label class="label"for="id_sort_title">Sort title:</label> {{ form.sort_title }} </p>
         <p class="fields is-grouped"><label class="label"for="id_subtitle">Subtitle:</label> {{ form.subtitle }} </p>
@@ -78,7 +80,7 @@
     </div>
     <div class="block">
         <button class="button is-primary" type="submit">Save</button>
-        <a class="button is-danger is-light" href="/book/{{ book.id }}">Cancel</a>
+        <a class="button" href="/book/{{ book.id }}">Cancel</a>
     </div>
 </form>
 

bookwyrm/templates/edit_user.html

@@ -2,7 +2,7 @@
 {% block content %}
 <div class="block columns">
     <div class="column is-half">
-        <h2 class="title">Profile</h2>
+        <h1 class="title">Profile</h1>
         {% if form.non_field_errors %}
         <p class="notification is-danger">{{ form.non_field_errors }}</p>
         {% endif %}

bookwyrm/templates/editions.html

@@ -2,7 +2,7 @@
 {% load fr_display %}
 {% block content %}
 <div class="block">
-    <h2 class="title">Editions of <a href="/book/{{ work.id }}">"{{ work.title }}"</a></h2>
+    <h1 class="title">Editions of <a href="/book/{{ work.id }}">"{{ work.title }}"</a></h1>
 
     {% include 'snippets/book_tiles.html' with books=editions %}
 </div>

bookwyrm/templates/error.html

@@ -2,7 +2,7 @@
 {% block content %}
 
 <div class="block">
-    <h2 class="title">Server Error</h2>
+    <h1 class="title">Server Error</h1>
     <p>Something went wrong! Sorry about that.</p>
 </div>
 

bookwyrm/templates/import.html

@@ -2,25 +2,21 @@
 {% load humanize %}
 {% block content %}
 <div class="block">
-    <h2 class="title">Import Books from GoodReads</h2>
+    <h1 class="title">Import Books from GoodReads</h1>
     <form name="import" action="/import_data/" method="post" enctype="multipart/form-data">
         {% csrf_token %}
         <div class="field">
             {{ import_form.as_p }}
         </div>
         <div class="field">
-            <label class="label" for="include_reviews"><input type="checkbox" name="include_reviews" checked> Include reviews</label>
+            <label class="label">
+                <input type="checkbox" name="include_reviews" checked> Include reviews
+            </label>
         </div>
         <div class="field">
-            <label class="label" for="privacy">Privacy setting for imported reviews</label>
+            <label class="label">Privacy setting for imported reviews
-            <div class="select">
+                {% include 'snippets/privacy_select.html' with no_label=True %}
-                <select name="privacy">
+            </label>
-                    <option value="public" selected>Public</option>
-                    <option value="unlisted">Unlisted</option>
-                    <option value="followers">Followers only</option>
-                    <option value="direct">Private</option>
-                </select>
-            </div>
         </div>
         <button class="button is-primary" type="submit">Import</button>
     </form>

bookwyrm/templates/invite.html

@@ -4,7 +4,7 @@
 <div class="columns">
     <div class="column">
         <div class="block login">
-            <h2 class="title">Create an Account</h2>
+            <h1 class="title">Create an Account</h1>
             <div>
                 <form name="register" method="post" action="/user-register">
                     <input type=hidden name="invite_code" value="{{ invite.code }}">

bookwyrm/templates/layout.html

@@ -36,10 +36,8 @@
             </div>
         </form>
 
-        <label for="main-nav" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="mainNav">
+        <label for="main-nav" role="button" class="navbar-item" aria-label="menu" aria-expanded="false" data-target="mainNav" onclick="toggleMenu(this)">
-            <span aria-hidden="true"></span>
+            <div class="icon icon-dots-three-vertical"><span class="is-sr-only">Main navigation menu</div>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
         </label>
     </div>
 

bookwyrm/templates/manage_invites.html

@@ -2,7 +2,7 @@
 {% load humanize %}
 {% block content %}
 <div class="block">
-    <h2 class="title">Invites</h2>
+    <h1 class="title">Invites</h1>
     <table class="table is-striped">
         <tr>
             <th>Link</th>

bookwyrm/templates/notfound.html

@@ -2,7 +2,7 @@
 {% block content %}
 
 <div class="block">
-    <h2 class="title">Not Found</h2>
+    <h1 class="title">Not Found</h1>
     <p>The page your requested doesn't seem to exist!</p>
 </div>
 

bookwyrm/templates/notifications.html

@@ -2,11 +2,11 @@
 {% load humanize %}l
 {% block content %}
 <div class="block">
-    <h2 class="title">Notifications</h2>
+    <h1 class="title">Notifications</h1>
 
     <form name="clear" action="/clear-notifications" method="POST">
         {% csrf_token %}
-        <button class="button is-danger" type="submit" class="secondary">Delete notifications</button>
+        <button class="button is-danger is-light" type="submit" class="secondary">Delete notifications</button>
     </form>
 </div>
 

bookwyrm/templates/password_reset.html

@@ -4,7 +4,7 @@
 <div class="columns">
     <div class="column">
         <div class="block">
-            <h2 class="title">Reset Password</h2>
+            <h1 class="title">Reset Password</h1>
             {% for error in errors %}
             <p class="is-danger">{{ error }}</p>
             {% endfor %}

bookwyrm/templates/password_reset_request.html

@@ -4,7 +4,7 @@
 <div class="columns is-centered">
     <div class="column is-half">
         <div class="block">
-            <h2 class="title">Reset Password</h2>
+            <h1 class="title">Reset Password</h1>
             {% if message %}<p>{{ message }}</p>{% endif %}
             <p>A link to reset your password will be sent to your email address</p>
             <form name="reset-password" method="post" action="/reset-password-request">

bookwyrm/templates/snippets/create_status_form.html

@@ -9,21 +9,29 @@
     </div>
     {% endif %}
     <div class="control">
-        <label class="label" for="id_content_{{ book.id }}_{{ type }}">{{ type|title }}:</label>
+        <label class="label" for="id_{% if type == 'quote' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">{{ type|title }}:</label>
 
         {% if type == 'review' %}
-        <span class="is-sr-only">Rating</span>
+        <fieldset>
-        <div class="field is-grouped stars form-rate-stars">
+            <legend class="is-sr-only">Rating</legend>
-            <input class="hidden" type="radio" name="rating" value="" checked>
+            <div class="field is-grouped stars form-rate-stars">
-            {% for i in '12345'|make_list %}
+                <label class="is-sr-only">No rating
-                <input class="is-sr-only" id="book{{book.id}}-star-{{ forloop.counter }}" type="radio" name="rating" value="{{ forloop.counter }}">
+                    <input class="is-sr-only" type="radio" name="rating" value="" checked>
-                <label class="icon icon-star-empty" for="book{{book.id}}-star-{{ forloop.counter }}">
-                    <span class="is-sr-only">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
                 </label>
-            {% endfor %}
+                {% for i in '12345'|make_list %}
-        </div>
+                    <input class="is-sr-only" id="book{{book.id}}-star-{{ forloop.counter }}" type="radio" name="rating" value="{{ forloop.counter }}">
+                    <label class="icon icon-star-empty" for="book{{book.id}}-star-{{ forloop.counter }}">
+                        <span class="is-sr-only">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
+                    </label>
+                {% endfor %}
+            </div>
+        </fieldset>
+        {% endif %}
+        {% if type == 'quote' %}
+        <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 %}
-        <textarea name="{% if type == 'quote' %}quote{% else %}content{% endif %}" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
 
     </div>
     {% if type == 'quote' %}

bookwyrm/templates/snippets/follow_button.html

@@ -19,6 +19,6 @@ Follow request already sent.
 <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 }}">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
-    <button class="button is-small is-danger" type="submit">Unfollow</button>
+    <button class="button is-small is-danger is-light" type="submit">Unfollow</button>
 </form>
 {% endif %}

bookwyrm/templates/snippets/follow_request_buttons.html

@@ -8,6 +8,6 @@
 <form action="/delete_follow_request/" method="POST">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
-    <button class="button is-danger is-small" type="submit" class="warning">Delete</button>
+    <button class="button is-danger is-light is-small" type="submit" class="warning">Delete</button>
 </form>
 {% endif %}

bookwyrm/templates/snippets/privacy_select.html

@@ -1,9 +1,15 @@
+{% load fr_display %}
 <div class="select">
-    <select name="privacy">
+    {% with 0|uuid as uuid %}
+    {% if not no_label %}
+    <label class="is-sr-only" for="privacy-{{ uuid }}">Post privacy</label>
+    {% endif %}
+    <select name="privacy" id="privacy-{{ uuid }}">
         <option value="public" selected>Public</option>
         <option value="unlisted">Unlisted</option>
         <option value="followers">Followers only</option>
         <option value="direct">Private</option>
     </select>
+    {% endwith %}
 </div>
 

bookwyrm/templates/snippets/shelf_selector.html

@@ -23,7 +23,7 @@
                     {% csrf_token %}
                     <input type="hidden" name="book" value="{{ book.id }}">
                     <input type="hidden" name="shelf" value="{{ current.id }}">
-                    <button class="button is-small is-danger" type="submit">Unshelve</button>
+                    <button class="button is-small is-danger is-light" type="submit">Unshelve</button>
                 </form>
             </li>
         </ul>

bookwyrm/templates/snippets/status_body.html

@@ -97,7 +97,7 @@
                     <form name="delete-{{status.id}}" action="/delete-status" method="post">
                         {% csrf_token %}
                         <input type="hidden" name="status" value="{{ status.id }}">
-                        <button class="button is-danger" type="submit">
+                        <button class="button is-danger is-light" type="submit">
                             Delete post
                         </button>
                     </form>

bookwyrm/templates/tag.html

@@ -3,7 +3,7 @@
 {% block content %}
 
 <div class="block">
-    <h2 class="title">Books tagged "{{ tag.name }}"</h2>
+    <h1 class="title">Books tagged "{{ tag.name }}"</h1>
     {% include 'snippets/book_tiles.html' with books=books.all %}
 </div>