Cards for all rights template

apps/permission/templates/permission/all_rights.html

 {% extends "base.html" %}
-
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load i18n %}
 {% load render_table from django_tables2 %}
+{% block contenttitle %}{% endblock %}
 
 {% block content %}
-    {% if user.is_authenticated %}
-        <h2>{% trans "Users that have surnormal rights" %}</h2>
-        {% render_table special_memberships_table %}
+{% if user.is_authenticated %}
+<div class="card bg-light mb-3">
+  <h3 class="card-header text-center">
+    {% trans "Users that have surnormal rights" %}
+  </h3>
+  {% render_table special_memberships_table %}
+</div>
+{% endif %}
 
-        <hr>
+<div class="card bg-light">
+  <h3 class="card-header text-center">
+    {% trans "Roles description" %}
+  </h3>
+  <div class="card-body">
+    {% if user.is_authenticated %}
+    <div class="form-check">
+      <label for="owned_only" class="form-check-label">
+        <input id="owned_only" name="owned_only" type="checkbox" class="checkboxinput form-check-input">
+        {% trans "Filter with roles that I have in at least one club" %}
+      </label>
+    </div>
     {% endif %}
+  </div>
+  <div class="accordion" id="accordionRoles">
+    {% regroup active_memberships by roles as memberships_per_role %}
+    {% for role in roles %}
+    <div class="card {% if not role.clubs %}no-club{% endif %}">
+      <div class="card-header py-1" id="{{ role|slugify }} ">
+        <a href="#" class="text-decoration-none" data-toggle="collapse" data-target="#collapse{{ role|slugify }}"
+          aria-expanded="true" aria-controls="collapse{{ role|slugify }}">
+          {{ role }}
+          {% if role.weirole %}(<em>Pour le WEI</em>){% endif %}
+          {% if role.for_club %}(<em>Pour le club {{ role.for_club }} uniquement</em>){% endif %}
+          {% if role.clubs %}
+          <small><span class="badge badge-success">{% trans "Owned" %} : {{ role.clubs|join:", " }}</span></small>
+          {% endif %}
+        </a>
+      </div>
 
-    <h2>{% trans "Roles description" %}</h2>
-    {% if user.is_authenticated %}
-        <div class="form-check">
-            <label for="owned_only" class="form-check-label">
-                <input id="owned_only" name="owned_only" type="checkbox" class="checkboxinput form-check-input">
-                {% trans "Filter with roles that I have in at least one club" %}
-            </label>
+      <div id="collapse{{ role|slugify }}" class="collapse" aria-labelledby="{{ role|slugify }}"
+        data-parent="#accordionRoles">
+        <div class="card-body">
+          {% if role.clubs %}
+          <div class="alert alert-success">
+            {% trans "Own this role in the clubs" %} {{ role.clubs|join:", " }}
+          </div>
+          {% endif %}
+          <ul>
+            {% for permission in role.permissions.all %}
+            <li data-toggle="tooltip"
+              title="{% trans "Mask:" %} {{ permission.mask }}, {% trans "Query:" %} {{ permission.query }}">
+              <b>{{ permission }}</b> ({{ permission.get_type_display }}
+              {{ permission.model }}{% if permission.permanent %},
+              {% trans "permanent" %}{% endif %})</li>
+            {% empty %}
+            <em>{% trans "No associated permission" %}</em>
+            {% endfor %}
+          </ul>
         </div>
-        {% endif %}
-        <div class="accordion" id="accordionRoles">
-        {% regroup active_memberships by roles as memberships_per_role %}
-        {% for role in roles %}
-            <div class="card {% if not role.clubs %}no-club{% endif %}">
-              <div class="card-header" id="{{ role|slugify }} ">
-                <h2 class="mb-0">
-                  <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse{{ role|slugify }}" aria-expanded="true" aria-controls="collapse{{ role|slugify }}">
-                    {{ role }} {% if role.weirole %}(<em>Pour le WEI</em>){% endif %} {% if role.for_club %}(<em>Pour le club {{ role.for_club }} uniquement</em>){% endif %}
-                    {% if role.clubs %}
-                      <small><span class="badge badge-success">{% trans "Owned" %} : {{ role.clubs|join:", " }}</span></small>
-                    {% endif %}
-                  </button>
-                </h2>
-              </div>
-
-              <div id="collapse{{ role|slugify }}" class="collapse" aria-labelledby="{{ role|slugify }}" data-parent="#accordionRoles">
-                <div class="card-body">
-                  {% if role.clubs %}
-                      <div class="alert alert-success">
-                          {% trans "Own this role in the clubs" %} {{ role.clubs|join:", " }}
-                      </div>
-                  {% endif %}
-                  <ul>
-                  {% for permission in role.permissions.all %}
-                      <li data-toggle="tooltip" title="{% trans "Mask:" %} {{ permission.mask }}, {% trans "Query:" %} {{ permission.query }}">{{ permission }} ({{ permission.get_type_display }} {{ permission.model }}{% if permission.permanent %}, {% trans "permanent" %}{% endif %})</li>
-                  {% empty %}
-                      <em>{% trans "No associated permission" %}</em>
-                  {% endfor %}
-                  </ul>
-                </div>
-              </div>
-            </div>
-        {% endfor %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>
 {% endblock %}
 
 {% block extrajavascript %}
-    <script>
-    $(document).ready(function() {
-       let checkbox = $("#owned_only");
+<script>
+  $(document).ready(function () {
+    let checkbox = $("#owned_only");
 
-       function update() {
-           if (checkbox.is(":checked"))
-               $(".no-club").addClass('d-none');
-           else
-               $(".no-club").removeClass('d-none');
-       }
+    function update() {
+      if (checkbox.is(":checked"))
+        $(".no-club").addClass('d-none');
+      else
+        $(".no-club").removeClass('d-none');
+    }
 
-       checkbox.change(update);
-       update();
-    });
-    </script>
-{% endblock %}
+    checkbox.change(update);
+    update();
+  });
+</script>
+{% endblock %}
\ No newline at end of file