add buttons to expand group member lists

oioioi/usergroups/static/usergroups/teacher_usergroups_list.css

@@ -0,0 +1,52 @@
+.usergroup {
+    padding: 0.3em 1rem;
+}
+
+.usergroup button {
+    white-space: normal;
+}
+
+.usergroup-title:focus {
+    outline: none;
+    box-shadow: none;
+}
+
+.usergroup-user-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: space-evenly;
+    padding-left: 1%;
+}
+
+.usergroup-user-list li {
+    width: 20%;
+    margin: 0.5em;
+    overflow-wrap: break-word;
+}
+
+.usergroup-title {
+    white-space: normal;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+}
+
+.usergroup-body {
+    padding-top: 0.25em;
+}
+
+.usergroup-title:focus:hover,
+.usergroup-title:focus,
+.usergroup-title:active {
+    outline: 0;
+    border: 0;
+}
+
+.usergroup-title:hover {
+    text-decoration: none;
+}
+
+.group-button {
+    margin: 0.5em 0.25em;
+}

oioioi/usergroups/templates/usergroups/teacher_usergroups_list.html

@@ -5,6 +5,11 @@
     {% trans "Your User Groups" %}
 {% endblock %}
 
+{% block styles %}
+{{ block.super }}
+    <link charset="utf-8" rel="stylesheet" type="text/css" href="{{ STATIC_URL }}usergroups/teacher_usergroups_list.css">
+{% endblock %}
+
 {% block main-content %}
 <h1>
     {% trans "Your Groups" %}
@@ -23,8 +28,34 @@ <h1>
         {% paginate %}
 
         <ul class="list-group">
-        {% for group in usergroup_list %}
-            <li class="list-group-item"> <a href="{% url 'teacher_usergroup_detail' group.id %}">{{ group }}</a> </li>
+        {% for usergroup in usergroup_list %}
+            <li class="list-group-item usergroup"> 
+                <div class="text-start">
+                    <button class="usergroup-title btn btn-link collapsed" data-toggle="collapse" data-target="#collapse{{ usergroup.id }}">
+                        {{ usergroup.name }}
+                    </button>
+                </div>
+                <div id="collapse{{ usergroup.id }}" class="collapse usergroup-body">
+                    <div>
+                        {% if usergroup.members.count %}
+                            <ul class="usergroup-user-list">
+                                {% for member in usergroup.members.all|slice:":23" %}
+                                    <li> {{ member.get_full_name|default:member.username }} </li>
+                                {% endfor %}
+
+                                {% if group_members.count > 23 %}
+                                    <li> &hellip; </li>
+                                {% endif %}
+                            </ul>
+                        {% else %}
+                            <p class="text-start"> {% trans "Strange, this group doesn't have any members." %} </p>
+                        {% endif %}
+                    </div>
+                    <div class="text-start">
+                        <a href="{% url 'teacher_usergroup_detail' usergroup_id=usergroup.id %}" class="btn btn-primary group-button"> {% trans "Modify group" %} </a>
+                    </div>
+                </div>
+            </li>
         {% endfor%}
         </ul>
         {% paginate %}
@@ -34,4 +65,4 @@ <h1>
 <div id="add-new-usergroup">
     <a role="button" class="btn btn-success" href="{% url 'teacher_usergroups_add_group' %}"> {% trans "Add new group" %} </a>
 </div>
-{% endblock %}
+{% endblock %}