Merge pull request #1735 from bookwyrm-social/lists-markup

Cleans up html on list and list curate page

bookwyrm/templates/components/new_modal.html

@@ -0,0 +1,31 @@
+{% load i18n %}
+
+<div class="modal" id="{{ id }}">
+    <div class="modal-background" data-modal-close></div>
+    <div class="modal-card is-thin" role="dialog" aria-modal="true" tabindex="-1">
+        <header class="modal-card-head">
+            <h2 class="modal-card-title mb-0">
+                {% block modal-title %}{% endblock %}
+            </h2>
+            <button
+                type="button"
+                class="delete"
+                aria-label="{% trans 'Close' %}"
+                data-modal-close
+            ></button>
+        </header>
+
+        <section class="modal-card-body">
+            {% block modal-body %}{% endblock %}
+        </section>
+        <footer class="modal-card-foot">
+            {% block modal-footer %}{% endblock %}
+        </footer>
+    </div>
+    <button
+        type="button"
+        class="modal-close is-large"
+        aria-label="{% trans 'Close' %}"
+        data-modal-close
+    ></button>
+</div>

bookwyrm/templates/lists/curate.html

@@ -1,72 +1,74 @@
 {% extends 'lists/layout.html' %}
 {% load i18n %}
+
+{% block breadcrumbs %}
+<nav class="breadcrumb subtitle" aria-label="breadcrumbs">
+    <ul>
+        <li><a href="{% url 'lists' %}">{% trans "Lists" %}</a></li>
+        <li><a href="{% url 'list' list.id %}">{{ list.name|truncatechars:30 }}</a></li>
+        <li class="is-active">
+            <a href="#" aria-current="page">
+                {% trans "Curate" %}
+            </a>
+        </li>
+    </ul>
+</nav>
+{% endblock %}
+
 {% block panel %}
-
 <section class="block">
-    <div class="columns is-mobile is-multiline is-align-items-baseline">
-        <div class="column is-narrow">
-            <h2 class="title is-4">{% trans "Pending Books" %}</h2>
-        </div>
-
-        <p class="column is-narrow"><a href="{% url 'list' list.id %}">{% trans "Go to list" %}</a></p>
-    </div>
+    <h2 class="title is-4">{% trans "Pending Books" %}</h2>
 
     {% if not pending.exists %}
-        <p>{% trans "You're all set!" %}</p>
+        <p><em>{% trans "You're all set!" %}</em></p>
     {% else %}
 
-    <dl>
+    <div class="columns">
         {% for item in pending %}
-            {% with book=item.book %}
-                <div
-                    class="
-                        columns is-gapless
-                        is-vcentered is-justify-content-space-between
-                        mb-6
-                    "
-                >
-                    <dt class="column mr-auto">
-                        <div class="columns is-mobile is-gapless is-vcentered">
-                            <a
-                                class="column is-cover"
-                                href="{{ book.local_path }}"
-                                aria-hidden="true"
-                            >
-                                {% include 'snippets/book_cover.html' with cover_class='is-w-xs-mobile is-w-s is-h-xs-mobile is-h-s' size_mobile='xsmall' size='small' %}
+        {% with book=item.book %}
+            <div class="column">
+                <div class="columns is-mobile">
+                    <a
+                        class="column is-cover"
+                        href="{{ book.local_path }}"
+                        aria-hidden="true"
+                    >
+                        {% include 'snippets/book_cover.html' with cover_class='is-w-xs-mobile is-w-s is-h-xs-mobile is-h-s' size_mobile='xsmall' size='small' %}
+                    </a>
+
+                    <div class="column ml-3">
+                        {% include 'snippets/book_titleby.html' %}
+
+                        <p>
+                            {% trans "Suggested by" %}
+
+                            <a href="{{ item.user.local_path }}">
+                                {{ item.user.display_name }}
                             </a>
-
-                            <div class="column ml-3">
-                                {% include 'snippets/book_titleby.html' %}
-                            </div>
-                        </div>
-                    </dt>
-
-                    <dd class="column is-4-tablet mx-3-tablet my-3-mobile">
-                        {% trans "Suggested by" %}
-
-                        <a href="{{ item.user.local_path }}">
-                            {{ item.user.display_name }}
-                        </a>
-                    </dd>
-
-                    <dd class="column is-narrow field has-addons">
-                        <form class="control" method="POST" action="{% url 'list-curate' list.id %}">
-                            {% csrf_token %}
-                            <input type="hidden" name="item" value="{{ item.id }}">
-                            <input type="hidden" name="approved" value="true">
-                            <button type="submit" class="button">{% trans "Approve" %}</button>
-                        </form>
-                        <form class="control" method="POST" action="{% url 'list-curate' list.id %}">
-                            {% csrf_token %}
-                            <input type="hidden" name="item" value="{{ item.id }}">
-                            <input type="hidden" name="approved" value="false">
-                            <button type="submit" class="button is-danger is-light">{% trans "Discard" %}</button>
-                        </form>
-                    </dd>
+                        </p>
+                    </div>
                 </div>
-            {% endwith %}
+            </div>
+
+            <div class="column is-narrow">
+                <div class="field has-addons">
+                    <form class="control" method="POST" action="{% url 'list-curate' list.id %}">
+                        {% csrf_token %}
+                        <input type="hidden" name="item" value="{{ item.id }}">
+                        <input type="hidden" name="approved" value="true">
+                        <button type="submit" class="button">{% trans "Approve" %}</button>
+                    </form>
+                    <form class="control" method="POST" action="{% url 'list-curate' list.id %}">
+                        {% csrf_token %}
+                        <input type="hidden" name="item" value="{{ item.id }}">
+                        <input type="hidden" name="approved" value="false">
+                        <button type="submit" class="button is-danger is-light">{% trans "Discard" %}</button>
+                    </form>
+                </div>
+            </div>
+        {% endwith %}
         {% endfor %}
-    </dl>
+    </div>
     {% endif %}
 </section>
 {% endblock %}

bookwyrm/templates/lists/delete_list_modal.html

@@ -1,4 +1,4 @@
-{% extends 'components/modal.html' %}
+{% extends 'components/new_modal.html' %}
 {% load i18n %}
 
 {% block modal-title %}{% trans "Delete this list?" %}{% endblock %}
@@ -14,8 +14,9 @@
     <button class="button is-danger" type="submit">
         {% trans "Delete" %}
     </button>
-    {% trans "Cancel" as button_text %}
-    {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete_list" controls_uid=list.id %}
+    <button type="button" class="button" data-modal-close>
+        {% trans "Cancel" %}
+    </button>
 </form>
 {% endblock %}
 

bookwyrm/templates/lists/edit_form.html

@@ -9,5 +9,5 @@
 <form name="edit-list" method="post" action="{% url 'list' list.id %}">
     {% include 'lists/form.html' %}
 </form>
-{% include "lists/delete_list_modal.html" with controls_text="delete_list" controls_uid=list.id %}
+{% include "lists/delete_list_modal.html" with id="delete_list" %}
 {% endblock %}

bookwyrm/templates/lists/form.html

@@ -114,21 +114,20 @@
         </fieldset>
     </div>
 </div>
-<div class="columns is-mobile">
-    <div class="column">
-        <div class="field has-addons">
-            <div class="control">
-                {% include 'snippets/privacy_select.html' with current=list.privacy %}
-            </div>
-            <div class="control">
-                <button type="submit" class="button is-primary">{% trans "Save" %}</button>
-            </div>
-        </div>
-    </div>
+<div class="is-flex">
     {% if list.id %}
-    <div class="column is-narrow">
-        {% trans "Delete list" as button_text %}
-        {% include 'snippets/toggle/toggle_button.html' with class="is-danger" text=button_text icon_with_text="x" controls_text="delete_list" controls_uid=list.id focus="modal_title_delete_list" %}
+    <div class="is-flex-grow-1">
+        <button type="button" data-modal-open="delete_list" class="button is-danger">
+            {% trans "Delete list" %}
+        </button>
     </div>
     {% endif %}
+    <div class="field has-addons">
+        <div class="control">
+            {% include 'snippets/privacy_select.html' with current=list.privacy %}
+        </div>
+        <div class="control">
+            <button type="submit" class="button is-primary">{% trans "Save" %}</button>
+        </div>
+    </div>
 </div>

bookwyrm/templates/lists/layout.html

@@ -11,6 +11,7 @@
             {% include 'lists/created_text.html' with list=list %}
         </p>
     </div>
+
     <div class="column is-narrow is-flex">
         {% if request.user == list.user %}
             {% trans "Edit List" as button_text %}
@@ -20,6 +21,8 @@
     </div>
 </header>
 
+{% block breadcrumbs %}{% endblock %}
+
 <div class="block content">
     {% include 'snippets/trimmed_text.html' with full=list.description %}
 </div>

bookwyrm/templates/lists/list.html

@@ -4,6 +4,19 @@
 {% load bookwyrm_group_tags %}
 {% load markdown %}
 
+{% block breadcrumbs %}
+<nav class="breadcrumb subtitle" aria-label="breadcrumbs">
+    <ul>
+        <li><a href="{% url 'lists' %}">{% trans "Lists" %}</a></li>
+        <li class="is-active">
+            <a href="#" aria-current="page">
+                {{ list.name|truncatechars:30 }}
+            </a>
+        </li>
+    </ul>
+</nav>
+{% endblock %}
+
 {% block panel %}
 {% if request.user == list.user and pending_count %}
 <div class="block content">

bookwyrm/tests/views/test_list.py

@@ -347,9 +347,12 @@ class ListViews(TestCase):
         """there are so many views, this just makes sure it LOADS"""
         view = views.Curate.as_view()
         with patch("bookwyrm.models.activitypub_mixin.broadcast_task.apply_async"):
-            models.List.objects.create(name="Public list", user=self.local_user)
-            models.List.objects.create(
-                name="Private list", privacy="direct", user=self.local_user
+            models.ListItem.objects.create(
+                user=self.local_user,
+                book_list=self.list,
+                book=self.book,
+                approved=False,
+                order=1,
             )
         request = self.factory.get("")
         request.user = self.local_user

bookwyrm/views/list.py

@@ -264,10 +264,10 @@ class EmbedList(View):
         return TemplateResponse(request, "lists/embed-list.html", data)
 
 
+@method_decorator(login_required, name="dispatch")
 class Curate(View):
     """approve or discard list suggestsions"""
 
-    @method_decorator(login_required, name="dispatch")
     def get(self, request, list_id):
         """display a pending list"""
         book_list = get_object_or_404(models.List, id=list_id)
@@ -280,8 +280,6 @@ class Curate(View):
         }
         return TemplateResponse(request, "lists/curate.html", data)
 
-    @method_decorator(login_required, name="dispatch")
-    # pylint: disable=unused-argument
     def post(self, request, list_id):
         """edit a book_list"""
         book_list = get_object_or_404(models.List, id=list_id)