Better display of permissions

users/templates/users/aff_listright.html

@@ -22,7 +22,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 {% endcomment %}
 
-    <table id="listRights_table" class="table table-striped">
+    <table id="listRights_table" class="table">
         <thead>
             <tr>
                 <th>Droit</th>
@@ -33,23 +33,18 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             </tr>
         </thead>
         {% for listright in listright_list %}
-        <tr>
+        <tr class="active">
             <td>
-                <a data-toggle="collapse" href="#collapseListRight_{{listright.gid}}" aria-expanded="true" aria-controls="collapseListRight_{{listright.gid}}">
+		    <a data-toggle="collapse" data-parent="#accordion_{{listright.gid}}" href="#collapseListRight_user_{{listright.gid}}" aria-expanded="true" aria-controls="collapseListRight_user_{{listright.gid}}">
                     {{ listright.name }} ({{listright.user_set.all|length}} users)
                 </a>
             </td>
             <td>{{ listright.gid }}</td>
             <td>
                 <div class="dropdown">
-                    <button class="btn btn-default dropdown-toggle" type="button" id="listpermissions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                        Ensemble des permissions <span class="caret"></span>
+			<button class="btn btn-default" data-parent="#accordion_{{listright.gid}}" type="button" data-toggle="collapse" data-target="#collapseListRight_perm_{{listright.gid}}" aria-expanded="true" aria-controls="collapseListRight_perm_{{listright.gid}}">
+                        Ensemble des permissions
                     </button>
-                    <ul class="dropdown-menu" aria-labelledby="listpermissions">
-                    {% for perm in listright.permissions.all %}
-                        <li>{{ perm.name }}</li>
-                    {% endfor %}
-                    </ul>
 		</div>
 	    </td>
 	    <td>{{ listright.details }}</td>
@@ -60,17 +55,32 @@ with this program; if not, write to the Free Software Foundation, Inc.,
         </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 class="panel-group" id="accordion_{{listright.gid}}" role="tablist" aria-multiselectable="true" style="margin-bottom: 0px;">
+                    <div class="panel" style="border: none;">
+                        <div class="panel-collapse collapse in" id="collapseListRight_perm_{{listright.gid}}" role="tabpanel">
+                            <ul class="list-group" style="margin-bottom: 0px">
+                            {% for perm in listright.permissions.all %}
+                                <li class="list-group-item col-xs-6 col-sm-4 col-md-3" style="border:none;">
+                                    {{perm.name}}
+                                </li>
+                                {% endfor %}
+                             </ul>
+                        </div>
+                    </div>
+                    <div class="panel" style="border: none;">
+                        <div class="panel-collapse collapse in" id="collapseListRight_user_{{listright.gid}}" role="tabpanel">
+                            <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>
+                    </div>
                 </div>
             </td>
 	</tr>
@@ -79,9 +89,10 @@ with this program; if not, write to the Free Software Foundation, Inc.,
 
 <script>
 $("#listRights_table").ready( function () {
-    var listRights_div = [{% for listright in listright_list %}$("#collapseListRight_{{listright.gid}}"), {% endfor %}];
+	var listRights_div = [{% for listright in listright_list %}[$("#accordion_{{listright.gid}}"), $("#collapseListRight_user_{{listright.gid}}"), $("#collapseListRight_perm_{{listright.gid}}")], {% endfor %}];
     for (var i=0 ; i<listRights_div.length ; i++) {
-        listRights_div[i].collapse('hide');
+	    listRights_div[i][1].collapse({ toggle: true, parent: listRights_div[i][0] });
+	    listRights_div[i][2].collapse({ toggle: true, parent: listRights_div[i][0] });
     }
 } );
 </script>