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
This commit is contained in:
Hugh Rundle 2022-01-03 10:09:52 +11:00
parent 38bd1f46d6
commit ea08b302c9
No known key found for this signature in database
GPG key ID: CD23D6039184286B
5 changed files with 53 additions and 50 deletions

View file

@ -2,8 +2,5 @@
{% load i18n %} {% load i18n %}
{% block searchresults %} {% block searchresults %}
<h2 class="title is-5">
{% trans "Add new members!" %}
</h2>
{% include 'groups/suggested_users.html' with suggested_users=suggested_users %} {% include 'groups/suggested_users.html' with suggested_users=suggested_users %}
{% endblock %} {% endblock %}

View file

@ -1,37 +1,41 @@
{% extends 'groups/layout.html' %} {% extends 'groups/layout.html' %}
{% load i18n %} {% load i18n %}
{% load bookwyrm_tags %} {% load bookwyrm_tags %}
{% load bookwyrm_group_tags %}
{% load markdown %} {% load markdown %}
{% block panel %} {% block panel %}
<div class="columns mt-3"> <div class="columns mt-3">
<section class="column is-three-quarters"> <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 %} {% block searchresults %}
{% endblock %} {% endblock %}
<div class="mb-2"> <div class="mb-2">
{% include "groups/members.html" with group=group %} {% include "groups/members.html" with group=group %}
</div> </div>
</section>
<h2 class="title is-5">Lists</h2> </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 %} {% if not lists %}
<p>{% trans "This group has no lists" %}</p> <p>{% trans "This group has no lists" %}</p>
{% else %} {% 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> <a href="{{ list.local_path }}">{{ list.name }}</a> <span class="subtitle">{% include 'snippets/privacy-icons.html' with item=list %}</span>
</h4> </h4>
</header> </header>
{% with list_books=list.listitem_set.all|slice:5 %} {% with list_books=list.listitem_set.all|slice:5 %}
{% if list_books %} {% if list_books %}
<div class="card-image columns is-mobile is-gapless is-clipped"> <div class="card-image columns is-mobile is-gapless is-clipped">
{% for book in list_books %} {% for book in list_books %}
<a class="column is-cover" href="{{ book.book.local_path }}"> <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' %} {% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-s' size='small' aria='show' %}
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% endwith %} {% endwith %}
<div class="card-content is-flex-grow-0"> <div class="card-content is-flex-grow-0">
<div class="is-clipped" {% if list.description %}title="{{ list.description }}"{% endif %}> <div class="is-clipped" {% if list.description %}title="{{ list.description }}"{% endif %}>
{% if list.description %} {% if list.description %}
@ -74,9 +76,8 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% include "snippets/pagination.html" with page=items %}
</section> </section>
</div> </div>
{% endblock %} {% endblock %}

View file

@ -12,12 +12,6 @@
{% include 'groups/created_text.html' with group=group %} {% include 'groups/created_text.html' with group=group %}
</p> </p>
</div> </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 %} {% if request.user == group.user %}
<div class="column is-narrow is-flex"> <div class="column is-narrow is-flex">
{% trans "Edit group" as button_text %} {% trans "Edit group" as button_text %}
@ -30,12 +24,6 @@
{% include 'snippets/trimmed_text.html' with full=group.description %} {% include 'snippets/trimmed_text.html' with full=group.description %}
</div> </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"> <div class="block">
{% include 'groups/edit_form.html' with controls_text="edit_group" %} {% include 'groups/edit_form.html' with controls_text="edit_group" %}
</div> </div>

View file

@ -5,8 +5,22 @@
{% load bookwyrm_group_tags %} {% load bookwyrm_group_tags %}
<h2 class="title is-5">Group Members</h2> <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 %} {% if group.user != request.user and group|is_member:request.user %}
<form action="{% url 'remove-group-member' %}" method="POST" class="my-4"> <form action="{% url 'remove-group-member' %}" method="POST" class="my-4">
{% csrf_token %} {% csrf_token %}

View file

@ -3,6 +3,9 @@
{% load humanize %} {% load humanize %}
{% if suggested_users %} {% if suggested_users %}
<h2 class="title is-5">
{% trans "Add new members!" %}
</h2>
<div class="column is-flex is-flex-grow-0"> <div class="column is-flex is-flex-grow-0">
{% for user in suggested_users %} {% for user in suggested_users %}
<div class="box has-text-centered is-shadowless has-background-white-bis m-2"> <div class="box has-text-centered is-shadowless has-background-white-bis m-2">