Lighter design for the list of rights

users/templates/users/aff_listright.html

@@ -22,21 +22,23 @@ with this program; if not, write to the Free Software Foundation, Inc.,
 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 {% endcomment %}
 
-    <table class="table table-striped">
+    <table id="listRights_table" class="table table-striped">
         <thead>
             <tr>
                 <th>Droit</th>
                 <th>Gid</th>
                 <th>Permissions</th>
-                <th>Users</th>
                 <th>Details</th>
 		<th></th>
-                <th></th>
             </tr>
         </thead>
         {% for listright in listright_list %}
         <tr>
-            <td>{{ listright.name }}</td>
+            <td>
+                <a data-toggle="collapse" href="#collapseListRight_{{listright.gid}}" aria-expanded="true" aria-controls="collapseListRight_{{listright.gid}}">
+                    {{ listright.name }} ({{listright.user_set.all|length}} users)
+                </a>
+            </td>
             <td>{{ listright.gid }}</td>
             <td>
                 <div class="dropdown">
@@ -45,19 +47,41 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="listpermissions">
                     {% for perm in listright.permissions.all %}
-                        <li>
-			{{ perm.name }}
-                        </li>
+                        <li>{{ perm.name }}</li>
                     {% endfor %}
                     </ul>
-		</div></td>
-		<td>{% for user in listright.user_set.all %}{{user}} <a role="button" href="{% url 'users:del-group' user.id listright.id %}" title="{{ desc|default:"Supprimer" }}"><i class="glyphicon glyphicon-remove" style="color:red"></i></a> | {% endfor %}</td>
+		</div>
+	    </td>
 	    <td>{{ listright.details }}</td>
             <td class="text-right">
                 {% include 'buttons/edit.html' with href='users:edit-listright' id=listright.id %}
                 {% include 'buttons/history.html' with href='users:history' name='listright' id=listright.id %}
             </td>
         </tr>
+	<tr>
+	    <td colspan=5>
+                <div class="collapse in" id="collapseListRight_{{listright.gid}}">
+                    <ul class="list-group" style="margin-bottom: 0px">
+                        {% for user in listright.user_set.all %}
+	                <li class="list-group-item col-xs-12 col-sm-6 col-md-4" style="border:none;">
+                            {{user}}
+                            <a role="button" href="{% url 'users:del-group' user.id listright.id %}" title="{{ desc|default:"Supprimer" }}">
+                                <i class="glyphicon glyphicon-remove" style="color:red"></i>
+                            </a>
+                        </li>
+                        {% endfor %}
+		    </ul>
+                </div>
+            </td>
+	</tr>
         {% endfor %}
     </table>
 
+<script>
+$("#listRights_table").ready( function () {
+    var listRights_div = [{% for listright in listright_list %}$("#collapseListRight_{{listright.gid}}"), {% endfor %}];
+    for (var i=0 ; i<listRights_div.length ; i++) {
+        listRights_div[i].collapse('hide');
+    }
+} );
+</script>