Merge pull request #2003 from bookwyrm-social/modal-button-pattern

Consistent positioning of success buttons

bookwyrm/templates/author/sync_modal.html

@@ -19,8 +19,10 @@
 {% endblock %}
 
 {% block modal-footer %}
-<button class="button is-primary" type="submit">{% trans "Confirm" %}</button>
+<div class="buttons is-right is-flex-grow-1">
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button class="button is-primary" type="submit">{% trans "Confirm" %}</button>
+</div>
 {% endblock %}
 
 {% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/book/cover_add_modal.html

@@ -28,8 +28,10 @@
 {% endblock %}
 
 {% block modal-footer %}
-<button class="button is-primary" type="submit">{% trans "Add" %}</button>
+<div class="buttons is-right is-flex-grow-1">
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button class="button is-primary" type="submit">{% trans "Add" %}</button>
+    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+</div>
 {% endblock %}
 
 {% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/book/file_links/add_link_modal.html

@@ -55,8 +55,10 @@
 {% endblock %}
 
 {% block modal-footer %}
-<button class="button is-primary" type="submit">{% trans "Save" %}</button>
+<div class="buttons is-right is-flex-grow-1">
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
-
+    <button class="button is-primary" type="submit">{% trans "Save" %}</button>
+</div>
 {% endblock %}
+
 {% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/book/file_links/verification_modal.html

@@ -17,13 +17,13 @@ Is that where you'd like to go?
 
 
 {% block modal-footer %}
-<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" class="button is-primary">{% trans "Continue" %}</a>
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
-
 {% if request.user.is_authenticated %}
-<div class="has-text-right is-flex-grow-1">
+<div class="is-flex-grow-1">
     <a href="{% url 'report-link' link.added_by.id link.id %}">{% trans "Report spam" %}</a>
 </div>
+
+<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" class="button is-primary">{% trans "Continue" %}</a>
 {% endif %}
 
 {% endblock %}

bookwyrm/templates/book/sync_modal.html

@@ -19,8 +19,10 @@
 {% endblock %}
 
 {% block modal-footer %}
-<button class="button is-primary" type="submit">{% trans "Confirm" %}</button>
+<div class="buttons is-right is-flex-grow-1">
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button class="button is-primary" type="submit">{% trans "Confirm" %}</button>
+</div>
 {% endblock %}
 
 {% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/groups/create_form.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block header %}
-{% trans "Create Group" %}
+{% trans "Create group" %}
 {% endblock %}
 
 {% block form %}

bookwyrm/templates/groups/delete_group_modal.html

@@ -8,13 +8,15 @@
 {% endblock %}
 
 {% block modal-footer %}
-<form name="delete-group-{{ group.id }}" action="{% url 'delete-group' group.id %}" method="POST">
+<form name="delete-group-{{ group.id }}" action="{% url 'delete-group' group.id %}" method="POST" class="is-flex-grow-1">
     {% csrf_token %}
     <input type="hidden" name="id" value="{{ group.id }}">
-    <button class="button is-danger" type="submit">
+    <div class="buttons is-right is-flex-grow-1">
-        {% trans "Delete" %}
+        <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
-    </button>
+        <button class="button is-danger" type="submit">
-    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+            {% trans "Delete" %}
+        </button>
+    </div>
 </form>
 {% endblock %}
 

bookwyrm/templates/groups/form.html

@@ -16,18 +16,21 @@
 </div>
 <div class="is-flex">
     {% if group.id %}
-    <div class="is-flex-grow-1">
+    <div>
         <button type="button" data-modal-open="delete_group" class="button is-danger">
             {% trans "Delete group" %}
         </button>
     </div>
     {% endif %}
-    <div class="field has-addons">
+
-        <div class="control">
+    <div class="is-flex is-flex-grow-1 is-justify-content-flex-end">
-            {% include 'snippets/privacy_select_no_followers.html' with current=group.privacy %}
+        <div class="field has-addons">
-        </div>
+            <div class="control">
-        <div class="control">
+                {% include 'snippets/privacy_select_no_followers.html' with current=group.privacy %}
-            <button type="submit" class="button is-primary">{% trans "Save" %}</button>
+            </div>
+            <div class="control">
+                <button type="submit" class="button is-primary">{% trans "Save" %}</button>
+            </div>
         </div>
     </div>
 </div>

bookwyrm/templates/lists/add_item_modal.html

@@ -32,14 +32,16 @@
 {% endblock %}
 
 {% block modal-footer %}
-<button type="submit" class="button is-link">
+<div class="buttons is-right is-flex-grow-1">
-    {% if list.curation == 'open' or request.user == list.user or list.group|is_member:request.user %}
+    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
-        {% trans "Add" %}
+    <button type="submit" class="button is-link">
-    {% else %}
+        {% if list.curation == 'open' or request.user == list.user or list.group|is_member:request.user %}
-        {% trans "Suggest" %}
+            {% trans "Add" %}
-    {% endif %}
+        {% else %}
-</button>
+            {% trans "Suggest" %}
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+        {% endif %}
+    </button>
+</div>
 {% endblock %}
 
 {% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/lists/delete_list_modal.html

@@ -8,15 +8,17 @@
 {% endblock %}
 
 {% block modal-footer %}
-<form name="delete-list-{{ list.id }}" action="{% url 'delete-list' list.id %}" method="POST">
+<form name="delete-list-{{ list.id }}" action="{% url 'delete-list' list.id %}" method="POST" class="is-flex-grow-1">
     {% csrf_token %}
     <input type="hidden" name="id" value="{{ list.id }}">
-    <button class="button is-danger" type="submit">
+    <div class="buttons is-right is-flex-grow-1">
-        {% trans "Delete" %}
+        <button type="button" class="button" data-modal-close>
-    </button>
+            {% trans "Cancel" %}
-    <button type="button" class="button" data-modal-close>
+        </button>
-        {% trans "Cancel" %}
+        <button class="button is-danger" type="submit">
-    </button>
+            {% trans "Delete" %}
+        </button>
+    </div>
 </form>
 {% endblock %}
 

bookwyrm/templates/lists/form.html

@@ -114,7 +114,7 @@
         </fieldset>
     </div>
 </div>
-<div class="is-flex">
+<div class="is-flex is-justify-content-end">
     {% if list.id %}
     <div class="is-flex-grow-1">
         <button type="button" data-modal-open="delete_list" class="button is-danger">

bookwyrm/templates/readthrough/delete_readthrough_modal.html

@@ -14,12 +14,20 @@
 {% endblock %}
 
 {% block modal-footer %}
-<form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
+<form
+    name="delete-readthrough-{{ readthrough.id }}"
+    action="/delete-readthrough"
+    method="POST"
+    class="is-flex-grow-1"
+>
     {% csrf_token %}
     <input type="hidden" name="id" value="{{ readthrough.id }}">
-    <button class="button is-danger" type="submit">
+
-        {% trans "Delete" %}
+    <div class="buttons is-right">
-    </button>
+        <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
-    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+        <button class="button is-danger" type="submit">
+            {% trans "Delete" %}
+        </button>
+    </div>
 </form>
 {% endblock %}

bookwyrm/templates/readthrough/readthrough_modal.html

@@ -69,8 +69,10 @@
 {% endblock %}
 
 {% block modal-footer %}
-<button class="button is-primary" type="submit">{% trans "Save" %}</button>
+<div class="buttons is-right is-flex-grow-1">
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button class="button is-primary" type="submit">{% trans "Save" %}</button>
+</div>
 {% endblock %}
 
 {% block modal-form-close %}

bookwyrm/templates/settings/link_domains/edit_domain_modal.html

@@ -18,8 +18,10 @@
 {% endblock %}
 
 {% block modal-footer %}
-<button type="submit" class="button is-primary">{% trans "Set" %}</button>
+<div class="buttons is-right is-flex-grow-1">
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button type="submit" class="button is-primary">{% trans "Set" %}</button>
+</div>
 {% endblock %}
 
 {% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/shelf/create_shelf_form.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block header %}
-{% trans "Create Shelf" %}
+{% trans "Create shelf" %}
 {% endblock %}
 
 {% block form %}

bookwyrm/templates/shelf/form.html

@@ -17,7 +17,7 @@
     <label class="label" for="id_description_{{ uuid }}">{% trans "Description:" %}</label>
     <textarea name="description" cols="40" rows="5" maxlength="500" class="textarea" id="id_description_{{ uuid }}">{{ form.description.value|default:'' }}</textarea>
 </div>
-<div class="field has-addons">
+<div class="field has-addons is-justify-content-end">
     <div class="control">
         {% include 'snippets/privacy_select.html' with current=privacy %}
     </div>

bookwyrm/templates/snippets/register_form.html

@@ -53,12 +53,12 @@
             id="id_password_register"
             aria-describedby="desc_password_register"
         >
-        
+
         {% include 'snippets/form_errors.html' with errors_list=register_form.password.errors id="desc_password_register" %}
     </div>
 </div>
 
-<div class="field is-grouped">
+<div class="field">
     <div class="control">
         <button class="button is-primary" type="submit">
             {% trans "Sign Up" %}

bookwyrm/templates/snippets/report_modal.html

@@ -48,10 +48,10 @@
 
 
 {% block modal-footer %}
-
+<div class="buttons is-right is-flex-grow-1">
-<button class="button is-success" type="submit">{% trans "Submit" %}</button>
+    <button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
-<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+    <button class="button is-success" type="submit">{% trans "Submit" %}</button>
-
+</div>
 {% endblock %}
 
 {% block modal-form-close %}</form>{% endblock %}

bookwyrm/views/books/editions.py

@@ -58,8 +58,12 @@ class Editions(View):
             )
 
         paginated = Paginator(editions, PAGE_LENGTH)
+        page = paginated.get_page(request.GET.get("page"))
         data = {
-            "editions": paginated.get_page(request.GET.get("page")),
+            "editions": page,
+            "page_range": paginated.get_elided_page_range(
+                page.number, on_each_side=2, on_ends=1
+            ),
             "work": work,
             "languages": languages,
             "formats": set(