From b395d3a63338b233fee3a879a0a143ef1b881c2e Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Fri, 21 Feb 2020 12:29:11 +0100
Subject: [PATCH] Overflow on collapsing tables and Bootstrap4 style

---
 apps/member/tables.py                | 10 +++-----
 apps/note/tables.py                  |  4 +--
 templates/member/profile_detail.html | 37 ++++++++++++----------------
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/apps/member/tables.py b/apps/member/tables.py
index 591149ec..a6de17d2 100644
--- a/apps/member/tables.py
+++ b/apps/member/tables.py
@@ -10,11 +10,10 @@ from .models import Club
 class ClubTable(tables.Table):
     class Meta:
         attrs = {
-            'class':
-            'table table-bordered table-condensed table-striped table-hover'
+            'class': 'table table-condensed table-striped table-hover'
         }
         model = Club
-        template_name = 'django_tables2/bootstrap.html'
+        template_name = 'django_tables2/bootstrap4.html'
         fields = ('id', 'name', 'email')
         row_attrs = {
             'class': 'table-row',
@@ -28,9 +27,8 @@ class UserTable(tables.Table):
 
     class Meta:
         attrs = {
-            'class':
-            'table table-bordered table-condensed table-striped table-hover'
+            'class': 'table table-condensed table-striped table-hover'
         }
-        template_name = 'django_tables2/bootstrap.html'
+        template_name = 'django_tables2/bootstrap4.html'
         fields = ('last_name', 'first_name', 'username', 'email')
         model = User
diff --git a/apps/note/tables.py b/apps/note/tables.py
index e2f5c763..43a1ef74 100644
--- a/apps/note/tables.py
+++ b/apps/note/tables.py
@@ -11,10 +11,10 @@ class HistoryTable(tables.Table):
     class Meta:
         attrs = {
             'class':
-            'table table-bordered table-condensed table-striped table-hover'
+            'table table-condensed table-striped table-hover'
         }
         model = Transaction
-        template_name = 'django_tables2/bootstrap.html'
+        template_name = 'django_tables2/bootstrap4.html'
         sequence = ('...', 'total', 'valid')
 
     total = tables.Column()  # will use Transaction.total() !!
diff --git a/templates/member/profile_detail.html b/templates/member/profile_detail.html
index 87cdc531..9c13d7c7 100644
--- a/templates/member/profile_detail.html
+++ b/templates/member/profile_detail.html
@@ -47,33 +47,28 @@
     <div class="col-md-9">
         <div class="accordion" id="accordionProfile">
             <div class="card">
-                <div class="card-header" id="headingOne">
-                    <h5 class="mb-0">
-                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                            <i class="fa fa-users"></i> {% trans "View my memberships" %}
-                        </button>
-                </h5>
-                </div>
-
-                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionProfile">
-                    <div class="card-body">
-                        {% render_table club_list %}
+                <div class="card-header position-relative" id="clubListHeading">
+                    <a class="btn btn-link stretched-link font-weight-bold"
+                       data-toggle="collapse" data-target="#clubListCollapse"
+                       aria-expanded="true" aria-controls="clubListCollapse">
+                        <i class="fa fa-users"></i> {% trans "View my memberships" %}
+                    </a>
                 </div>
+                <div id="clubListCollapse" class="collapse overflow-auto show" aria-labelledby="clubListHeading" data-parent="#accordionProfile">
+                    {% render_table club_list %}
                 </div>
             </div>
 
             <div class="card">
-                <div class="card-header" id="headingTwo">
-                    <h5 class="mb-0">
-                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                            <i class="fa fa-euro"></i> Historique des transactions
-                        </button>
-                    </h5>
+                <div class="card-header position-relative" id="historyListHeading">
+                    <a class="btn btn-link stretched-link collapsed font-weight-bold"
+                       data-toggle="collapse" data-target="#historyListCollapse"
+                       aria-expanded="false" aria-controls="historyListCollapse">
+                        <i class="fa fa-euro"></i> Historique des transactions
+                    </a>
                 </div>
-                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionProfile">
-                    <div class="card-body">
-                        {% render_table history_list %}
-                    </div>
+                <div id="historyListCollapse" class="collapse overflow-auto" aria-labelledby="historyListHeading" data-parent="#accordionProfile">
+                    {% render_table history_list %}
                 </div>
             </div>
         </div>