From ea08b302c9f1cb8ae5f9080d013b4291875d7e35 Mon Sep 17 00:00:00 2001
From: Hugh Rundle <hugh@hughrundle.net>
Date: Mon, 3 Jan 2022 10:09:52 +1100
Subject: [PATCH] improve group page layout

- move 'Add list' button down to the group lists
- move member search box underneath members heading
- note about members being able to create lists is now under lists heading
---
 bookwyrm/templates/groups/find_users.html     |  3 -
 bookwyrm/templates/groups/group.html          | 67 ++++++++++---------
 bookwyrm/templates/groups/layout.html         | 12 ----
 bookwyrm/templates/groups/members.html        | 18 ++++-
 .../templates/groups/suggested_users.html     |  3 +
 5 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/bookwyrm/templates/groups/find_users.html b/bookwyrm/templates/groups/find_users.html
index 377e3a0b..1b0d5433 100644
--- a/bookwyrm/templates/groups/find_users.html
+++ b/bookwyrm/templates/groups/find_users.html
@@ -2,8 +2,5 @@
 {% load i18n %}
 
 {% block searchresults %}
-    <h2 class="title is-5">
-        {% trans "Add new members!" %}
-    </h2>
     {% include 'groups/suggested_users.html' with suggested_users=suggested_users %}
 {% endblock %}
diff --git a/bookwyrm/templates/groups/group.html b/bookwyrm/templates/groups/group.html
index f25a1f27..1a71bda8 100644
--- a/bookwyrm/templates/groups/group.html
+++ b/bookwyrm/templates/groups/group.html
@@ -1,37 +1,41 @@
 {% extends 'groups/layout.html' %}
 {% load i18n %}
 {% load bookwyrm_tags %}
+{% load bookwyrm_group_tags %}
 {% load markdown %}
 
 {% block panel %}
 
 <div class="columns mt-3">
     <section class="column is-three-quarters">
-
-        {% if group.user == request.user %}
-        <div class="block">
-            <form class="field has-addons" method="get" action="{% url 'group-find-users' group.id %}">
-                <div class="control">
-                    <input type="text" name="user_query" value="{{ request.GET.user_query }}" class="input" placeholder="{% trans 'Search to add a user' %}" aria-label="{% trans 'Search to add a user' %}">
-                </div>
-                <div class="control">
-                    <button class="button" type="submit">
-                        <span class="icon icon-search" title="{% trans 'Search' %}">
-                            <span class="is-sr-only">{% trans "Search" %}</span>
-                        </span>
-                    </button>
-                </div>
-            </form>
-        </div>
-        {% endif %}
-
         {% block searchresults %}
         {% endblock %}
         <div class="mb-2">
             {% include "groups/members.html"  with group=group %}
         </div>
-
-        <h2 class="title is-5">Lists</h2>
+    </section>
+</div>
+<header class="columns content is-mobile">
+    <div class="column">
+        <h2 class="title is-5">{% trans "Lists" %}</h2>
+        <p class="subtitle is-6">
+            {% trans "Members of this group can create group-curated lists." %}
+        </p>
+    </div>
+    {% if request.user.is_authenticated and group|is_member:request.user %}
+    <div class="column is-narrow is-flex">
+        {% trans "Create List" as button_text %}
+        {% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
+    </div>
+    {% endif %}
+</header>
+{% if request.user.is_authenticated and group|is_member:request.user %}
+<div class="block">
+    {% include 'lists/create_form.html' with controls_text="create_list" curation_group=group %}
+</div>
+{% endif %}
+<div class="columns mt-3">
+    <section class="column is-three-quarters">
         {% if not lists %}
         <p>{% trans "This group has no lists" %}</p>
         {% else %}
@@ -45,19 +49,17 @@
                             <a href="{{ list.local_path }}">{{ list.name }}</a> <span class="subtitle">{% include 'snippets/privacy-icons.html' with item=list %}</span>
                         </h4>
                     </header>
-        
                     {% with list_books=list.listitem_set.all|slice:5 %}
-                        {% if list_books %}
-                            <div class="card-image columns is-mobile is-gapless is-clipped">
-                                {% for book in list_books %}
-                                    <a class="column is-cover" href="{{ book.book.local_path }}">
-                                        {% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-s' size='small' aria='show' %}
-                                    </a>
-                                {% endfor %}
-                            </div>
-                        {% endif %}
+                    {% if list_books %}
+                    <div class="card-image columns is-mobile is-gapless is-clipped">
+                        {% for book in list_books %}
+                        <a class="column is-cover" href="{{ book.book.local_path }}">
+                            {% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-s' size='small' aria='show' %}
+                        </a>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
                     {% endwith %}
-        
                     <div class="card-content is-flex-grow-0">
                         <div class="is-clipped" {% if list.description %}title="{{ list.description }}"{% endif %}>
                         {% if list.description %}
@@ -74,9 +76,8 @@
             </div>
             {% endfor %}
         </div>
-
         {% endif %}
-        {% include "snippets/pagination.html" with page=items %}
     </section>
 </div>
+
 {% endblock %}
diff --git a/bookwyrm/templates/groups/layout.html b/bookwyrm/templates/groups/layout.html
index 99c69f1c..a25c1085 100644
--- a/bookwyrm/templates/groups/layout.html
+++ b/bookwyrm/templates/groups/layout.html
@@ -12,12 +12,6 @@
             {% include 'groups/created_text.html' with group=group %}
         </p>
     </div>
-    {% if group|is_member:request.user %}
-    <div class="column is-narrow is-flex">
-        {% trans "Create List" as button_text %}
-        {% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
-    </div>
-    {% endif %}
     {% if request.user == group.user %}
     <div class="column is-narrow is-flex">
         {% trans "Edit group" as button_text %}
@@ -30,12 +24,6 @@
     {% include 'snippets/trimmed_text.html' with full=group.description %}
 </div>
 
-{% if request.user.is_authenticated %}
-<div class="block">
-    {% include 'lists/create_form.html' with controls_text="create_list" curation_group=group %}
-</div>
-{% endif %}
-
 <div class="block">
     {% include 'groups/edit_form.html' with controls_text="edit_group" %}
 </div>
diff --git a/bookwyrm/templates/groups/members.html b/bookwyrm/templates/groups/members.html
index 719674d8..8b06d178 100644
--- a/bookwyrm/templates/groups/members.html
+++ b/bookwyrm/templates/groups/members.html
@@ -5,8 +5,22 @@
 {% load bookwyrm_group_tags %}
 
 <h2 class="title is-5">Group Members</h2>
-<p class="subtitle is-6">{% trans "Members can add and remove books on a group's book lists" %}</p>
-
+{% if group.user == request.user %}
+<div class="block">
+    <form class="field has-addons" method="get" action="{% url 'group-find-users' group.id %}">
+        <div class="control">
+            <input type="text" name="user_query" value="{{ request.GET.user_query }}" class="input" placeholder="{% trans 'Search to add a user' %}" aria-label="{% trans 'Search to add a user' %}">
+        </div>
+        <div class="control">
+            <button class="button" type="submit">
+                <span class="icon icon-search" title="{% trans 'Search' %}">
+                    <span class="is-sr-only">{% trans "Search" %}</span>
+                </span>
+            </button>
+        </div>
+    </form>
+</div>
+{% endif %}
 {% if group.user != request.user and group|is_member:request.user %}
 <form action="{% url 'remove-group-member' %}" method="POST" class="my-4">
     {% csrf_token %}
diff --git a/bookwyrm/templates/groups/suggested_users.html b/bookwyrm/templates/groups/suggested_users.html
index 64498eb8..581448d4 100644
--- a/bookwyrm/templates/groups/suggested_users.html
+++ b/bookwyrm/templates/groups/suggested_users.html
@@ -3,6 +3,9 @@
 {% load humanize %}
 
 {% if suggested_users %}
+    <h2 class="title is-5">
+        {% trans "Add new members!" %}
+    </h2>
     <div class="column is-flex is-flex-grow-0">
         {% for user in suggested_users %}
         <div class="box has-text-centered is-shadowless has-background-white-bis m-2">