Move progress updates into modal

bookwyrm/models/readthrough.py

@@ -7,6 +7,7 @@ from .base_model import BookWyrmModel
 
 
 class ProgressMode(models.TextChoices):
+    """ types of prgress available """
     PAGE = "PG", "page"
     PERCENT = "PCT", "percent"
 
@@ -32,10 +33,12 @@ class ReadThrough(BookWyrmModel):
         super().save(*args, **kwargs)
 
     def create_update(self):
+        """ add update to the readthrough """
         if self.progress:
             return self.progressupdate_set.create(
                 user=self.user, progress=self.progress, mode=self.progress_mode
             )
+        return None
 
 
 class ProgressUpdate(BookWyrmModel):

bookwyrm/static/css/format.css

@@ -14,9 +14,6 @@ html {
 .card {
     overflow: visible;
 }
-.card-header-title {
-    overflow: hidden;
-}
 
 /* --- SHELVING --- */
 .shelf-option:disabled > *::after {

bookwyrm/templates/feed/feed_layout.html

@@ -47,20 +47,18 @@
             {% for book in shelf.books %}
             <div class="suggested-tabs card" role="tabpanel" id="book-{{ book.id }}"{% if shelf_counter != 1 or not forloop.first %} hidden{% endif %} aria-labelledby="tab-book-{{ book.id }}">
                 <div class="card-header">
-                    <p class="card-header-title">
+                    <div class="card-header-title">
-                        <span>{% include 'snippets/book_titleby.html' with book=book %}</span>
+                        <div>
-                    </p>
+                            <p class="mb-2">{% include 'snippets/book_titleby.html' with book=book %}</p>
+                            {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
+                        </div>
+                    </div>
                     <div class="card-header-icon is-hidden-tablet">
                         {% trans "Close" as button_text %}
                         {% include 'snippets/toggle/toggle_button.html' with label=button_text controls_text="book" controls_uid=book.id class="delete" nonbutton=True pressed=True %}
                     </div>
                 </div>
                 <div class="card-content">
-                {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
-                {% active_shelf book as active_shelf %}
-                {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %}
-                {% include 'snippets/progress_update.html' with readthrough=book.latest_readthrough %}
-                {% endif %}
                 {% include 'snippets/create_status.html' with book=book %}
                 </div>
             </div>

bookwyrm/templates/snippets/create_status_form.html

@@ -13,7 +13,15 @@
     {% endif %}
     <div class="control">
         {% if type != 'reply' and type != 'direct'  %}
-        <label class="label" for="id_{% if type == 'quotation' %}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 }}">
+            {% if type == 'comment' %}
+            {% trans "Comment:" %}
+            {% elif type == 'quotation' %}
+            {% trans "Quote:" %}
+            {% elif type == 'review' %}
+            {% trans "Review:" %}
+            {% endif %}
+        </label>
         {% endif %}
 
         {% if type == 'review' %}
@@ -45,6 +53,35 @@
         {% include 'snippets/content_warning_field.html' with parent_status=status %}
         <textarea name="content" class="textarea is-small" id="id_content_quote-{{ book.id }}"></textarea>
     </div>
+    {% elif type == 'comment' %}
+    <div class="control">
+        {% active_shelf book as active_shelf %}
+        {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %}
+
+        {% with readthrough=book.latest_readthrough %}
+        <div class="field">
+            <label class="label" for="progress">{% trans "Progress:" %}</label>
+            <div class="field has-addons mb-0">
+                <div class="control">
+                    <input
+                     aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}"
+                     class="input" type="number" min="0"
+                     name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
+                </div>
+                <div class="control select">
+                    <select name="progress_mode" aria-label="Progress mode">
+                        <option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
+                        <option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
+                    </select>
+                </div>
+            </div>
+            {% if readthrough.progress_mode == 'PG' and book.pages %}
+            <p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
+            {% endif %}
+        </div>
+        {% endwith %}
+        {% endif %}
+    </div>
     {% endif %}
     <input type="checkbox" class="hidden" name="sensitive" id="id_show_spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true">
     {# bottom bar #}

bookwyrm/templates/snippets/progress_update.html

@@ -1,28 +0,0 @@
-{% load i18n %}
-<form class="field is-grouped is-small" action="/edit-readthrough" method="POST">
-    {% csrf_token %}
-    <input type="hidden" name="id" value="{{ readthrough.id }}"/>
-    <div class="field">
-        <label class="label is-align-self-center mb-0 pr-2" for="progress">{% trans "Progress:" %}</label>
-        <div class="field has-addons mb-0">
-            <div class="control">
-                <input
-                 aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}"
-                 class="input is-small" type="number" min="0"
-                 name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
-            </div>
-            <div class="control select is-small">
-                <select name="progress_mode" aria-label="Progress mode">
-                    <option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
-                    <option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
-                </select>
-            </div>
-            <div class="control">
-                <button class="button is-small px-2 is-primary" type="submit">{% trans "Save" %}</button>
-            </div>
-        </div>
-        {% if readthrough.progress_mode == 'PG' and book.pages %}
-        <p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
-        {% endif %}
-    </div>
-</form>

bookwyrm/templates/snippets/shelve_button/progress_update_modal.html

@@ -0,0 +1,42 @@
+{% extends 'components/modal.html' %}
+{% load i18n %}
+
+{% block modal-title %}
+{% trans "Update progress" %}
+{% endblock %}
+
+{% block modal-form-open %}
+<form action="{% url 'edit-readthrough' %}" method="POST">
+{% endblock %}
+
+{% block modal-body %}
+{% csrf_token %}
+<input type="hidden" name="id" value="{{ readthrough.id }}"/>
+<div class="field">
+    <label class="label is-align-self-center mb-0 pr-2" for="progress">{% trans "Progress:" %}</label>
+    <div class="field has-addons mb-0">
+        <div class="control">
+            <input
+             aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}"
+             class="input" type="number" min="0"
+             name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
+        </div>
+        <div class="control select">
+            <select name="progress_mode" aria-label="Progress mode">
+                <option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
+                <option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
+            </select>
+        </div>
+    </div>
+    {% if readthrough.progress_mode == 'PG' and book.pages %}
+    <p class="help">{% blocktrans with pages=book.pages %}of {{ pages }} pages{% endblocktrans %}</p>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block modal-footer %}
+<button class="button is-success" type="submit">{% trans "Save" %}</button>
+{% trans "Cancel" as button_text %}
+{% include 'snippets/toggle/toggle_button.html' with text=button_text %}
+{% endblock %}
+{% block modal-form-close %}</form>{% endblock %}

bookwyrm/templates/snippets/shelve_button/shelve_button.html

@@ -3,7 +3,7 @@
 
 {% with book.id|uuid as uuid %}
 {% active_shelf book as active_shelf %}
-<div class="field has-addons">
+<div class="field has-addons mb-0">
     {% if switch_mode and active_shelf.book != book %}
     <div class="control">
         {% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %}
@@ -23,5 +23,7 @@
 {% latest_read_through book request.user as readthrough %}
 {% include 'snippets/shelve_button/finish_reading_modal.html' with book=active_shelf.book controls_text="finish-reading" controls_uid=uuid readthrough=readthrough %}
 
+{% include 'snippets/shelve_button/progress_update_modal.html' with book=shelf_book.book controls_text="progress-update" controls_uid=uuid readthrough=readthrough %}
+
 {% endwith %}
 {% endif %}

bookwyrm/templates/snippets/shelve_button/shelve_button_options.html

@@ -27,3 +27,11 @@
     </div>
 {% if dropdown %}</li>{% endif %}
 {% endfor %}
+{% if dropdown %}
+<li role="menuitem">
+    <div class="dropdown-item pt-0 pb-0">
+        {% trans "Update progress" as button_text %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="progress-update" controls_uid=button_uuid focus="modal-title-progress-update" %}
+    </div>
+</li>
+{% endif %}

bookwyrm/urls.py

@@ -183,7 +183,7 @@ urlpatterns = [
     re_path(r"^shelve/?$", views.shelve),
     re_path(r"^unshelve/?$", views.unshelve),
     # reading progress
-    re_path(r"^edit-readthrough/?$", views.edit_readthrough),
+    re_path(r"^edit-readthrough/?$", views.edit_readthrough, name="edit-readthrough"),
     re_path(r"^delete-readthrough/?$", views.delete_readthrough),
     re_path(r"^create-readthrough/?$", views.create_readthrough),
     re_path(r"^delete-progressupdate/?$", views.delete_progressupdate),