improve responsive layout for groups

This commit is contained in:
Hugh Rundle 2021-10-02 20:05:19 +10:00
parent 29f18ee123
commit 3a954ca6ae

View file

@ -6,10 +6,10 @@
<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> <p class="subtitle is-6">{% trans "Members can add and remove books on a group's book lists" %}</p>
<div class="column is-flex is-flex-grow-0"> <div class="is-multiline is-flex is-flex-grow-0 is-flex-wrap-wrap">
{% for membership in group.memberships.all %} {% for membership in group.memberships.all %}
{% with member=membership.user %} {% with member=membership.user %}
<div class="box has-text-centered is-shadowless has-background-white-bis my-0 mx-2"> <div class="box has-text-centered is-shadowless has-background-white-bis my-2 mx-2">
<a href="{{ member.local_path }}" class="has-text-black"> <a href="{{ member.local_path }}" class="has-text-black">
{% include 'snippets/avatar.html' with user=member large=True %} {% include 'snippets/avatar.html' with user=member large=True %}
<span title="{{ member.display_name }}" class="is-block is-6 has-text-weight-bold">{{ member.display_name|truncatechars:10 }}</span> <span title="{{ member.display_name }}" class="is-block is-6 has-text-weight-bold">{{ member.display_name|truncatechars:10 }}</span>