From e3785e11f19b5d6ae9b7d904df28a62c7224013c Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Tue, 25 Aug 2020 16:30:02 +0200
Subject: [PATCH] Cards everywhere in member app

---
 apps/member/templates/member/add_members.html | 109 ++++++++-------
 apps/member/templates/member/base.html        |  74 +++++++---
 apps/member/templates/member/club_alias.html  |   3 +
 apps/member/templates/member/club_detail.html |   3 +
 apps/member/templates/member/club_form.html   |   4 +-
 apps/member/templates/member/club_list.html   |   2 +-
 .../member/templates/member/club_members.html |  73 +++++-----
 .../templates/member/includes/club_info.html  | 132 +++++++-----------
 .../member/includes/profile_info.html         | 103 ++++++--------
 .../templates/member/manage_auth_tokens.html  |  41 +++---
 .../templates/member/picture_update.html      |   1 -
 .../templates/member/profile_alias.html       |   3 +
 .../templates/member/profile_detail.html      |  11 +-
 .../templates/member/profile_update.html      |   2 +-
 .../templates/note/search_transactions.html   |  90 +++++++-----
 apps/wei/templates/wei/weiclub_detail.html    |   3 -
 16 files changed, 338 insertions(+), 316 deletions(-)

diff --git a/apps/member/templates/member/add_members.html b/apps/member/templates/member/add_members.html
index 05aad9a4..fa0a958c 100644
--- a/apps/member/templates/member/add_members.html
+++ b/apps/member/templates/member/add_members.html
@@ -1,68 +1,75 @@
 {% extends "member/base.html" %}
-{% load crispy_forms_tags %}
-{% load static %}
-{% load i18n %}
-{% load pretty_money %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load crispy_forms_tags i18n pretty_money %}
 
 {% block profile_content %}
-    {% if additional_fee_renewal %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
+        {% if additional_fee_renewal %}
         <div class="alert alert-warning">
             {% if renewal %}
-                {% blocktrans trimmed with clubs=clubs_renewal|join:", " pretty_fee=additional_fee_renewal|pretty_money %}
-                    The user is not a member of the club·s {{ clubs }}. An additional fee of {{ pretty_fee }}
-                    will be charged to renew automatically the membership in this/these club·s.
-                {% endblocktrans %}
+            {% blocktrans trimmed with clubs=clubs_renewal|join:", " pretty_fee=additional_fee_renewal|pretty_money %}
+            The user is not a member of the club·s {{ clubs }}. An additional fee of {{ pretty_fee }}
+            will be charged to renew automatically the membership in this/these club·s.
+            {% endblocktrans %}
             {% else %}
-                {% blocktrans trimmed with clubs=clubs_renewal|join:", " pretty_fee=additional_fee_renewal|pretty_money %}
-                    This club has parents {{ clubs }}. An additional fee of {{ pretty_fee }}
-                    will be charged to adhere automatically to this/these club·s.
-                {% endblocktrans %}
+            {% blocktrans trimmed with clubs=clubs_renewal|join:", " pretty_fee=additional_fee_renewal|pretty_money %}
+            This club has parents {{ clubs }}. An additional fee of {{ pretty_fee }}
+            will be charged to adhere automatically to this/these club·s.
+            {% endblocktrans %}
             {% endif %}
         </div>
-    {% endif %}
+        {% endif %}
 
-    <form method="post" action="">
-        {% csrf_token %}
-        {{ form|crispy }}
-        <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
-    </form>
+        <form method="post" action="">
+            {% csrf_token %}
+            {{ form|crispy }}
+            <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
+        </form>
+    </div>
+</div>
 {% endblock %}
 
 {% block extrajavascript %}
-    <script>
-        function autocompleted(user) {
-            $("#id_last_name").val(user.last_name);
-            $("#id_first_name").val(user.first_name);
-            $.getJSON("/api/members/profile/" + user.id + "/", function(profile) {
-                let fee = profile.paid ? {{ club.membership_fee_paid }} : {{ club.membership_fee_unpaid }};
-                $("#id_credit_amount").val((fee / 100).toFixed(2));
-            });
+<script>
+    function autocompleted(user) {
+        $("#id_last_name").val(user.last_name);
+        $("#id_first_name").val(user.first_name);
+        $.getJSON("/api/members/profile/" + user.id + "/", function (profile) {
+            let fee = profile.paid ? "{{ club.membership_fee_paid }}" : "{{ club.membership_fee_unpaid }}";
+            $("#id_credit_amount").val((Number(fee) / 100).toFixed(2));
+        });
+    }
+
+    soge_field = $("#id_soge");
+
+    function fillFields() {
+        let checked = soge_field.is(':checked');
+        if (!checked) {
+            $("input").attr('disabled', false);
+            $("#id_user").attr('disabled', true);
+            $("select").attr('disabled', false);
+            return;
         }
 
-        soge_field = $("#id_soge");
+        let credit_type = $("#id_credit_type");
+        credit_type.attr('disabled', true);
+        credit_type.val(4);
 
-        function fillFields() {
-            let checked = soge_field.is(':checked');
-            if (!checked) {
-                $("input").attr('disabled', false);
-                $("#id_user").attr('disabled', true);
-                $("select").attr('disabled', false);
-                return;
-            }
+        let credit_amount = $("#id_credit_amount");
+        credit_amount.attr('disabled', true);
+        credit_amount.val('{{ total_fee }}');
 
-            let credit_type = $("#id_credit_type");
-            credit_type.attr('disabled', true);
-            credit_type.val(4);
+        let bank = $("#id_bank");
+        bank.attr('disabled', true);
+        bank.val('Société générale');
+    }
 
-            let credit_amount = $("#id_credit_amount");
-            credit_amount.attr('disabled', true);
-            credit_amount.val('{{ total_fee }}');
-
-            let bank = $("#id_bank");
-            bank.attr('disabled', true);
-            bank.val('Société générale');
-        }
-
-        soge_field.change(fillFields);
-    </script>
-{% endblock %}
+    soge_field.change(fillFields);
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/apps/member/templates/member/base.html b/apps/member/templates/member/base.html
index c52760c3..b474f736 100644
--- a/apps/member/templates/member/base.html
+++ b/apps/member/templates/member/base.html
@@ -2,6 +2,7 @@
 {% comment %}
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
+{% load i18n perms %}
 {% block contenttitle %}{% endblock %}
 
 {# Use a fluid-width container #}
@@ -11,28 +12,63 @@ SPDX-License-Identifier: GPL-3.0-or-later
 <div class="row mt-4">
     <div class="col-xl-4">
         {% block profile_info %}
-            {% if user_object %}
-                {% include "member/includes/profile_info.html"  %}
-            {% elif club %}
+        <div class="card bg-light">
+            <h4 class="card-header text-center">
+                {% if user_object %}
+                {% trans "Account #" %}{{ user_object.pk }}
+                {% elif club %}
+                Club {{ club.name }}
+                {% endif %}
+            </h4>
+            <div class="text-center">
+                {% if user_object %}
+                <a href="{% url 'member:user_update_pic' user_object.pk  %}">
+                    <img src="{{ user_object.note.display_image.url }}" class="img-thumbnail mt-2">
+                </a>
+                {% elif club %}
+                <a href="{% url 'member:club_update_pic' club.pk  %}">
+                    <img src="{{ club.note.display_image.url }}" class="img-thumbnail mt-2">
+                </a>
+                {% endif %}
+            </div>
+            <div class="card-body" id="profile_infos">
+                {% if user_object %}
+                {% include "member/includes/profile_info.html" %}
+                {% elif club %}
                 {% include "member/includes/club_info.html" %}
-            {% elif note.club.weiclub %}
-                {% with club=note.club.weiclub %}
-                {% include "wei/weiclub_info.html" %}
-                {% endwith %}
-            {% elif note.club %}
-                {% with club=note.club %}
-                {% include "member/includes/club_info.html" %}
-                {% endwith %}
-            {% elif note.user %}
-                {% with user_object=note.user %}
-                {% include "member/includes/profile_info.html"  %}
-                {% endwith %}
-            {% endif %}
-        {% endblock %}
+                {% endif %}
+                {% endblock %}
+            </div>
+            <div class="card-footer">
+                {% if user_object %}
+                <a class="btn btn-sm btn-secondary" href="{% url 'member:user_update_profile' user_object.pk %}">
+                    <i class="fa fa-edit"></i> {% trans 'Update Profile' %}
+                </a>
+                {% url 'member:user_detail' user_object.pk as user_profile_url %}
+                {% if request.path_info != user_profile_url %}
+                <a class="btn btn-sm btn-primary" href="{{ user_profile_url }}">{% trans 'View Profile' %}</a>
+                {% endif %}
+                {% elif club and not club.weiclub %}
+                {% if can_add_members %}
+                <a class="btn btn-sm btn-success" href="{% url 'member:club_add_member' club_pk=club.pk %}"
+                    data-turbolinks="false"> {% trans "Add member" %}</a>
+                {% endif %}
+                {% if ".change_"|has_perm:club %}
+                <a class="btn btn-sm btn-secondary" href="{% url 'member:club_update' pk=club.pk %}"
+                    data-turbolinks="false">
+                    <i class="fa fa-edit"></i> {% trans 'Update Profile' %}
+                </a>
+                {% endif %}
+                {% url 'member:club_detail' club.pk as club_detail_url %}
+                {% if request.path_info != club_detail_url %}
+                <a class="btn btn-sm btn-primary" href="{{ club_detail_url }}">{% trans 'View Profile' %}</a>
+                {% endif %}
+                {% endif %}
+            </div>
+        </div>
     </div>
     <div class="col-xl-8">
-        {% block profile_content %}
-        {% endblock %}
+        {% block profile_content %}{% endblock %}
     </div>
 </div>
 {% endblock %}
diff --git a/apps/member/templates/member/club_alias.html b/apps/member/templates/member/club_alias.html
index e574e41d..d80dfa0b 100644
--- a/apps/member/templates/member/club_alias.html
+++ b/apps/member/templates/member/club_alias.html
@@ -1,4 +1,7 @@
 {% extends "member/base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load static django_tables2 i18n %}
 
 {% block profile_content %}
diff --git a/apps/member/templates/member/club_detail.html b/apps/member/templates/member/club_detail.html
index c05b20ab..b6cd1e33 100644
--- a/apps/member/templates/member/club_detail.html
+++ b/apps/member/templates/member/club_detail.html
@@ -1,4 +1,7 @@
 {% extends "member/base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load render_table from django_tables2 %}
 {% load i18n perms %}
 
diff --git a/apps/member/templates/member/club_form.html b/apps/member/templates/member/club_form.html
index fc4e79e3..bd44ff16 100644
--- a/apps/member/templates/member/club_form.html
+++ b/apps/member/templates/member/club_form.html
@@ -1,11 +1,11 @@
-{% extends "base.html" %}
+{% extends "member/base.html" %}
 {% comment %}
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 {% load i18n crispy_forms_tags %}
 {% block contenttitle %}{% endblock %}
 
-{% block content %}
+{% block profile_content %}
 <div class="card bg-light">
     <h3 class="card-header text-center">
         {{ title }}
diff --git a/apps/member/templates/member/club_list.html b/apps/member/templates/member/club_list.html
index f6d039e7..66863a3c 100644
--- a/apps/member/templates/member/club_list.html
+++ b/apps/member/templates/member/club_list.html
@@ -13,4 +13,4 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 {# Search panel #}
 {{ block.super }}
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/apps/member/templates/member/club_members.html b/apps/member/templates/member/club_members.html
index 075e3c75..0da95242 100644
--- a/apps/member/templates/member/club_members.html
+++ b/apps/member/templates/member/club_members.html
@@ -3,63 +3,64 @@
 {% load render_table from django_tables2 %}
 
 {% block profile_content %}
-    <input id="searchbar" type="text" class="form-control" placeholder="Nom/prénom/note ...">
-    <div class="form-group">
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
+        <input id="searchbar" type="text" class="form-control" placeholder="Nom/prénom/note…">
         <div class="form-check">
             <label class="form-check-label" for="only_active">
                 <input type="checkbox" class="checkboxinput form-check-input" id="only_active"
-                       {% if only_active %}checked{% endif %}>
+                    {% if only_active %}checked{% endif %}>
                 {% trans "Display only active memberships" %}
             </label>
         </div>
-    </div>
-    <div id="div_id_roles" class="form-group">
-        <label for="id_roles" class="col-form-label">{% trans "Filter roles:" %}</label>
-        <div class="">
+        <div id="div_id_roles">
+            <label for="roles" class="col-form-label">{% trans "Filter roles:" %}</label>
             <select name="roles" class="selectmultiple form-control" id="roles" multiple="">
                 {% for role in applicable_roles %}
-                    <option value="{{ role.id }}" selected>{{ role.name }}</option>
+                <option value="{{ role.id }}" selected>{{ role.name }}</option>
                 {% endfor %}
             </select>
         </div>
     </div>
-    <hr>
-
     <div id="memberships_table">
         {% if table.data %}
-            {% render_table table %}
+        {% render_table table %}
         {% else %}
-            <div class="alert alert-warning">
-                {% trans "There is no membership found with this pattern." %}
-            </div>
+        <div class="alert alert-warning">
+            {% trans "There is no membership found with this pattern." %}
+        </div>
         {% endif %}
     </div>
+</div>
 {% endblock %}
 
 {% block extrajavascript %}
-    <script type="text/javascript">
-        $(document).ready(function () {
-            let searchbar_obj = $("#searchbar");
-            let only_active_obj = $("#only_active");
-            let roles_obj = $("#roles");
+<script type="text/javascript">
+    $(document).ready(function () {
+        let searchbar_obj = $("#searchbar");
+        let only_active_obj = $("#only_active");
+        let roles_obj = $("#roles");
 
-            function reloadTable() {
-                let pattern = searchbar_obj.val();
+        function reloadTable() {
+            let pattern = searchbar_obj.val();
 
-                let roles = [];
-                $("#roles option:selected").each(function() {
-                    roles.push($(this).val());
-                });
-                let roles_str = roles.join(',');
+            let roles = [];
+            $("#roles option:selected").each(function () {
+                roles.push($(this).val());
+            });
+            let roles_str = roles.join(',');
 
-                $("#memberships_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20")
-                    + "&only_active=" + (only_active_obj.is(':checked') ? '1' : '0')
-                    + "&roles=" + roles_str + " #memberships_table");
-            }
+            $("#memberships_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") +
+                "&only_active=" + (only_active_obj.is(':checked') ? '1' : '0') +
+                "&roles=" + roles_str + " #memberships_table");
+        }
 
-            searchbar_obj.keyup(reloadTable);
-            only_active_obj.change(reloadTable);
-            roles_obj.change(reloadTable);
-        });
-    </script>
-{% endblock %}
+        searchbar_obj.keyup(reloadTable);
+        only_active_obj.change(reloadTable);
+        roles_obj.change(reloadTable);
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/apps/member/templates/member/includes/club_info.html b/apps/member/templates/member/includes/club_info.html
index bbae10ba..271083b8 100644
--- a/apps/member/templates/member/includes/club_info.html
+++ b/apps/member/templates/member/includes/club_info.html
@@ -1,84 +1,56 @@
 {% load i18n pretty_money perms %}
 
-<div class="card bg-light">
-    <h4 class="card-header text-center">
-        Club {{ club.name }}
-    </h4>
-    <div class="card-top text-center">
-        <a href="{% url 'member:club_update_pic' club.pk  %}">
-            <img src="{{ club.note.display_image.url }}" class="img-thumbnail mt-2">
-        </a>
-    </div>
-    <div class="card-body" id="profile_infos">
-        <dl class="row">
-            <dt class="col-xl-6">{% trans 'name'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ club.name }}</dd>
+<dl class="row">
+    <dt class="col-xl-6">{% trans 'name'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ club.name }}</dd>
 
-            {% if club.parent_club %}
-            <dt class="col-xl-6">
-                <a href="{% url 'member:club_detail' club.parent_club.pk %}">{% trans 'Club Parent'|capfirst %}</a>
-            </dt>
-            <dd class="col-xl-6"> {{ club.parent_club.name }}</dd>
-            {% endif %}
-
-            {% if club.require_memberships %}
-            {% if club.membership_start %}
-            <dt class="col-xl-6">{% trans 'membership start'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ club.membership_start }}</dd>
-            {% endif %}
-
-            {% if club.membership_end %}
-            <dt class="col-xl-6">{% trans 'membership end'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ club.membership_end }}</dd>
-            {% endif %}
-
-            {% if club.membership_duration %}
-            <dt class="col-xl-6">{% trans 'membership duration'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ club.membership_duration }} {% trans "days" %}</dd>
-            {% endif %}
-
-            {% if club.membership_fee_paid == club.membership_fee_unpaid %}
-            <dt class="col-xl-6">{% trans 'membership fee'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ club.membership_fee_paid|pretty_money }}</dd>
-            {% else %}
-            <dt class="col-xl-6">{% trans 'membership fee (paid students)'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ club.membership_fee_paid|pretty_money }}</dd>
-
-            <dt class="col-xl-6">{% trans 'membership fee (unpaid students)'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ club.membership_fee_unpaid|pretty_money }}</dd>
-            {% endif %}
-            {% endif %}
-
-            {% if "note.view_note"|has_perm:club.note %}
-            <dt class="col-xl-6">{% trans 'balance'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ club.note.balance | pretty_money }}</dd>
-            {% endif %}
-
-            <dt class="col-xl-6">{% trans 'aliases'|capfirst %}</dt>
-            <dd class="col-xl-6">
-                <a class="small" href="{% url 'member:club_alias' club.pk %}">
-                    {% trans 'Edit my aliases' %} ({{ club.note.alias_set.all|length }})
-                </a>
-            </dd>
-
-            <dt class="col-xl-4">{% trans 'email'|capfirst %}</dt>
-            <dd class="col-xl-8"><a href="mailto:{{ club.email }}">{{ club.email }}</a></dd>
-        </dl>
-    </div>
-    {% if not club.weiclub %}
-    <div class="card-footer text-center">
-        {% if can_add_members %}
-        <a class="btn btn-primary btn-sm my-1" href="{% url 'member:club_add_member' club_pk=club.pk %}"
-            data-turbolinks="false"> {% trans "Add member" %}</a>
-        {% endif %}
-        {% if ".change_"|has_perm:club %}
-        <a class="btn btn-primary btn-sm my-1" href="{% url 'member:club_update' pk=club.pk %}" data-turbolinks="false">
-            {% trans "Edit" %}</a>
-        {% endif %}
-        {% url 'member:club_detail' club.pk as club_detail_url %}
-        {%if request.path_info != club_detail_url %}
-        <a class="btn btn-primary btn-sm my-1" href="{{ club_detail_url }}">{% trans 'View Profile' %}</a>
-        {% endif %}
-    </div>
+    {% if club.parent_club %}
+    <dt class="col-xl-6">
+        <a href="{% url 'member:club_detail' club.parent_club.pk %}">{% trans 'Club Parent'|capfirst %}</a>
+    </dt>
+    <dd class="col-xl-6"> {{ club.parent_club.name }}</dd>
     {% endif %}
-</div>
\ No newline at end of file
+
+    {% if club.require_memberships %}
+    {% if club.membership_start %}
+    <dt class="col-xl-6">{% trans 'membership start'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ club.membership_start }}</dd>
+    {% endif %}
+
+    {% if club.membership_end %}
+    <dt class="col-xl-6">{% trans 'membership end'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ club.membership_end }}</dd>
+    {% endif %}
+
+    {% if club.membership_duration %}
+    <dt class="col-xl-6">{% trans 'membership duration'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ club.membership_duration }} {% trans "days" %}</dd>
+    {% endif %}
+
+    {% if club.membership_fee_paid == club.membership_fee_unpaid %}
+    <dt class="col-xl-6">{% trans 'membership fee'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ club.membership_fee_paid|pretty_money }}</dd>
+    {% else %}
+    <dt class="col-xl-6">{% trans 'membership fee (paid students)'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ club.membership_fee_paid|pretty_money }}</dd>
+
+    <dt class="col-xl-6">{% trans 'membership fee (unpaid students)'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ club.membership_fee_unpaid|pretty_money }}</dd>
+    {% endif %}
+    {% endif %}
+
+    {% if "note.view_note"|has_perm:club.note %}
+    <dt class="col-xl-6">{% trans 'balance'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ club.note.balance | pretty_money }}</dd>
+    {% endif %}
+
+    <dt class="col-xl-6">{% trans 'aliases'|capfirst %}</dt>
+    <dd class="col-xl-6">
+        <a class="small" href="{% url 'member:club_alias' club.pk %}">
+            {% trans 'Edit aliases' %} ({{ club.note.alias_set.all|length }})
+        </a>
+    </dd>
+
+    <dt class="col-xl-4">{% trans 'email'|capfirst %}</dt>
+    <dd class="col-xl-8"><a href="mailto:{{ club.email }}">{{ club.email }}</a></dd>
+</dl>
\ No newline at end of file
diff --git a/apps/member/templates/member/includes/profile_info.html b/apps/member/templates/member/includes/profile_info.html
index a7aaadaa..ba12572f 100644
--- a/apps/member/templates/member/includes/profile_info.html
+++ b/apps/member/templates/member/includes/profile_info.html
@@ -1,70 +1,49 @@
 {% load i18n pretty_money perms %}
 
-<div class="card bg-light">
-    <h4 class="card-header text-center">
-        {% trans "Account #" %}{{ user_object.pk }}
-    </h4>
-    <div class="card-top text-center">
-        <a href="{% url 'member:user_update_pic' user_object.pk  %}">
-            <img src="{{ user_object.note.display_image.url }}" class="img-thumbnail mt-2">
+<dl class="row">
+    <dt class="col-xl-6">{% trans 'name'|capfirst %}, {% trans 'first name' %}</dt>
+    <dd class="col-xl-6">{{ user_object.last_name }} {{ user_object.first_name }}</dd>
+
+    <dt class="col-xl-6">{% trans 'username'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ user_object.username }}</dd>
+
+    {% if user_object.pk == user.pk %}
+    <dt class="col-xl-6">{% trans 'password'|capfirst %}</dt>
+    <dd class="col-xl-6">
+        <a class="small" href="{% url 'password_change' %}">
+            {% trans 'Change password' %}
         </a>
-    </div>
-    <div class="card-body" id="profile_infos">
-        <dl class="row">
-            <dt class="col-xl-6">{% trans 'name'|capfirst %}, {% trans 'first name' %}</dt>
-            <dd class="col-xl-6">{{ user_object.last_name }} {{ user_object.first_name }}</dd>
+    </dd>
+    {% endif %}
 
-            <dt class="col-xl-6">{% trans 'username'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ user_object.username }}</dd>
-
-            {% if user_object.pk == user.pk %}
-            <dt class="col-xl-6">{% trans 'password'|capfirst %}</dt>
-            <dd class="col-xl-6">
-                <a class="small" href="{% url 'password_change' %}">
-                    {% trans 'Change password' %}
-                </a>
-            </dd>
-            {% endif %}
-
-            <dt class="col-xl-6">{% trans 'aliases'|capfirst %}</dt>
-            <dd class="col-xl-6">
-                <a class="small" href="{% url 'member:user_alias' user_object.pk %}">
-                    {% trans 'Edit my aliases' %} ({{ user_object.note.alias_set.all|length }})
-                </a>
-            </dd>
-
-            <dt class="col-xl-6">{% trans 'section'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ user_object.profile.section }}</dd>
-
-            <dt class="col-xl-6">{% trans 'email'|capfirst %}</dt>
-            <dd class="col-xl-6"><a href="mailto:{{ user_object.email }}">{{ user_object.email }}</a></dd>
-
-            <dt class="col-xl-6">{% trans 'phone number'|capfirst %}</dt>
-            <dd class="col-xl-6"><a
-                    href="tel:{{ user_object.profile.phone_number }}">{{ user_object.profile.phone_number }}</a></dd>
-
-            <dt class="col-xl-6">{% trans 'address'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ user_object.profile.address }}</dd>
-
-            {% if "note.view_note"|has_perm:user_object.note %}
-            <dt class="col-xl-6">{% trans 'balance'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ user_object.note.balance | pretty_money }}</dd>
-
-            <dt class="col-xl-6">{% trans 'paid'|capfirst %}</dt>
-            <dd class="col-xl-6">{{ user_object.profile.paid|yesno }}</dd>
-            {% endif %}
-        </dl>
-    </div>
-    <div class="card-footer">
-        <a class="btn btn-sm btn-secondary" href="{% url 'member:user_update_profile' user_object.pk %}">
-            <i class="fa fa-edit"></i> {% trans 'Update Profile' %}
+    <dt class="col-xl-6">{% trans 'aliases'|capfirst %}</dt>
+    <dd class="col-xl-6">
+        <a class="small" href="{% url 'member:user_alias' user_object.pk %}">
+            {% trans 'Edit aliases' %} ({{ user_object.note.alias_set.all|length }})
         </a>
-        {% url 'member:user_detail' user_object.pk as user_profile_url %}
-        {% if request.path_info != user_profile_url %}
-        <a class="btn btn-sm btn-primary" href="{{ user_profile_url }}">{% trans 'View Profile' %}</a>
-        {% endif %}
-    </div>
-</div>
+    </dd>
+
+    <dt class="col-xl-6">{% trans 'section'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ user_object.profile.section }}</dd>
+
+    <dt class="col-xl-6">{% trans 'email'|capfirst %}</dt>
+    <dd class="col-xl-6"><a href="mailto:{{ user_object.email }}">{{ user_object.email }}</a></dd>
+
+    <dt class="col-xl-6">{% trans 'phone number'|capfirst %}</dt>
+    <dd class="col-xl-6"><a href="tel:{{ user_object.profile.phone_number }}">{{ user_object.profile.phone_number }}</a>
+    </dd>
+
+    <dt class="col-xl-6">{% trans 'address'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ user_object.profile.address }}</dd>
+
+    {% if "note.view_note"|has_perm:user_object.note %}
+    <dt class="col-xl-6">{% trans 'balance'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ user_object.note.balance | pretty_money }}</dd>
+
+    <dt class="col-xl-6">{% trans 'paid'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ user_object.profile.paid|yesno }}</dd>
+    {% endif %}
+</dl>
 
 {% if user_object.pk == user_object.pk %}
 <a class="small float-right text-decoration-none" href="{% url 'member:auth_token' %}">
diff --git a/apps/member/templates/member/manage_auth_tokens.html b/apps/member/templates/member/manage_auth_tokens.html
index 259194ba..473286c1 100644
--- a/apps/member/templates/member/manage_auth_tokens.html
+++ b/apps/member/templates/member/manage_auth_tokens.html
@@ -1,8 +1,11 @@
 {% extends "member/base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load i18n %}
 
 {% block content %}
-    <div class="alert alert-info">
+<div class="alert alert-info">
     <h4>À quoi sert un jeton d'authentification ?</h4>
 
     Un jeton vous permet de vous connecter à <a href="/api/">l'API de la Note Kfet</a>.<br />
@@ -10,24 +13,24 @@
     pour pouvoir vous identifier.<br /><br />
 
     Une documentation de l'API arrivera ultérieurement.
-    </div>
+</div>
 
-    <div class="alert alert-info">
-        <strong>{%trans  'Token' %} :</strong>
-        {% if 'show' in request.GET %}
-            {{ token.key }} (<a href="?">cacher</a>)
-        {% else %}
-            <em>caché</em> (<a href="?show">montrer</a>)
-        {% endif %}
-        <br />
-        <strong>{%trans  'Created' %} :</strong> {{ token.created }}
-    </div>
+<div class="alert alert-info">
+    <strong>{%trans  'Token' %} :</strong>
+    {% if 'show' in request.GET %}
+    {{ token.key }} (<a href="?">cacher</a>)
+    {% else %}
+    <em>caché</em> (<a href="?show">montrer</a>)
+    {% endif %}
+    <br />
+    <strong>{%trans  'Created' %} :</strong> {{ token.created }}
+</div>
 
-    <div class="alert alert-warning">
-        <strong>Attention :</strong> regénérer le jeton va révoquer tout accès autorisé à l'API via ce jeton !
-    </div>
+<div class="alert alert-warning">
+    <strong>Attention :</strong> regénérer le jeton va révoquer tout accès autorisé à l'API via ce jeton !
+</div>
 
-    <a href="?regenerate">
-        <button class="btn btn-primary">{% trans 'Regenerate token' %}</button>
-    </a>
-{% endblock %}
+<a href="?regenerate">
+    <button class="btn btn-primary">{% trans 'Regenerate token' %}</button>
+</a>
+{% endblock %}
\ No newline at end of file
diff --git a/apps/member/templates/member/picture_update.html b/apps/member/templates/member/picture_update.html
index daec4f53..41568cfb 100644
--- a/apps/member/templates/member/picture_update.html
+++ b/apps/member/templates/member/picture_update.html
@@ -99,7 +99,6 @@
       $("#id_width").val(cropData["width"]);
       $("#formUpload").submit();
     });
-
   });
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/apps/member/templates/member/profile_alias.html b/apps/member/templates/member/profile_alias.html
index e574e41d..d80dfa0b 100644
--- a/apps/member/templates/member/profile_alias.html
+++ b/apps/member/templates/member/profile_alias.html
@@ -1,4 +1,7 @@
 {% extends "member/base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load static django_tables2 i18n %}
 
 {% block profile_content %}
diff --git a/apps/member/templates/member/profile_detail.html b/apps/member/templates/member/profile_detail.html
index 29d46bb1..b8cae4a0 100644
--- a/apps/member/templates/member/profile_detail.html
+++ b/apps/member/templates/member/profile_detail.html
@@ -1,4 +1,7 @@
 {% extends "member/base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load render_table from django_tables2 %}
 {% load i18n perms %}
 
@@ -12,7 +15,7 @@
 </div>
 {% endif %}
 
-<div class="card">
+<div class="card bg-light mb-3">
     <div class="card-header position-relative" id="clubListHeading">
         <a class="font-weight-bold">
             <i class="fa fa-users"></i> {% trans "View my memberships" %}
@@ -21,11 +24,9 @@
     {% render_table club_list %}
 </div>
 
-<hr>
-
-<div class="card">
+<div class="card bg-light">
     <div class="card-header position-relative" id="historyListHeading">
-        <a class="stretched-link font-weight-bold" {% if "note.view_note"|has_perm:user_object.note %}
+        <a class="stretched-link font-weight-bold text-decoration-none" {% if "note.view_note"|has_perm:user_object.note %}
             href="{% url 'note:transactions' pk=user_object.note.pk %}" {% endif %}>
             <i class="fa fa-euro"></i> {% trans "Transaction history" %}
         </a>
diff --git a/apps/member/templates/member/profile_update.html b/apps/member/templates/member/profile_update.html
index 480da954..a50f4afd 100644
--- a/apps/member/templates/member/profile_update.html
+++ b/apps/member/templates/member/profile_update.html
@@ -1,8 +1,8 @@
 {% extends "member/base.html" %}
-{% load i18n crispy_forms_tags %}
 {% comment %}
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
+{% load i18n crispy_forms_tags %}
 {% block contenttitle %}{% endblock %}
 
 {% block profile_content %}
diff --git a/apps/note/templates/note/search_transactions.html b/apps/note/templates/note/search_transactions.html
index f6a3d1d0..2a952e5a 100644
--- a/apps/note/templates/note/search_transactions.html
+++ b/apps/note/templates/note/search_transactions.html
@@ -1,49 +1,67 @@
-{% extends "member/base.html" %}
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load render_table from django_tables2 %}
 {% load crispy_forms_tags %}
+{% block contenttitle %}{% endblock %}
 
-{% block profile_content %}
-    {% crispy form %}
-{% endblock %}
+{# Use a fluid-width container #}
+{% block containertype %}container-fluid{% endblock %}
 
 {% block content %}
-    {{ block.super }}
-    <div id="table">
-        {% render_table table %}
+<div class="row mt-4">
+    <div class="col-xl-4">
+        <div class="card bg-light mb-3">
+            <h3 class="card-header text-center">
+                {{ title }}
+            </h3>
+            <div class="card-body">
+                {% crispy form %}
+            </div>
+        </div>
     </div>
+    <div class="col-xl-8">
+        <div class="card bg-light">
+            <div id="table">
+                {% render_table table %}
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block extrajavascript %}
-    <script>
-        function refreshHistory() {
-            $("#history_list").load("{% url 'note:transactions' pk=object.pk %} #history_list");
-            $("#profile_infos").load("{% url 'note:transactions' pk=object.pk %} #profile_infos");
-        }
+<script>
+    function refreshHistory() {
+        $("#history_list").load("{% url 'note:transactions' pk=object.pk %} #history_list");
+        $("#profile_infos").load("{% url 'note:transactions' pk=object.pk %} #profile_infos");
+    }
 
-        function refreshFilters() {
-            let filters = "";
-            filters += "source=" + $("#id_source_pk").val();
-            filters += "&destination=" + $("#id_destination_pk").val();
-            filters += $("input[name='type']:checked").map(function() {
-                return "&type=" + $(this).val();
-            }).toArray().join("");
-            filters += "&reason=" + $("#id_reason").val();
-            filters += "&valid=" + ($("#id_valid").is(":checked") ? "1" : "");
-            filters += "&amount_gte=" + $("#id_amount_gte").val();
-            filters += "&amount_lte=" + $("#id_amount_lte").val();
-            filters += "&created_after=" + $("#id_created_after").val();
-            filters += "&created_before=" + $("#id_created_before").val();
-            console.log(filters.replace(" ", "%20"));
-            $("#table").load(location.pathname + "?" + filters.replaceAll(" ", "%20") + " #table");
-        }
+    function refreshFilters() {
+        let filters = "";
+        filters += "source=" + $("#id_source_pk").val();
+        filters += "&destination=" + $("#id_destination_pk").val();
+        filters += $("input[name='type']:checked").map(function () {
+            return "&type=" + $(this).val();
+        }).toArray().join("");
+        filters += "&reason=" + $("#id_reason").val();
+        filters += "&valid=" + ($("#id_valid").is(":checked") ? "1" : "");
+        filters += "&amount_gte=" + $("#id_amount_gte").val();
+        filters += "&amount_lte=" + $("#id_amount_lte").val();
+        filters += "&created_after=" + $("#id_created_after").val();
+        filters += "&created_before=" + $("#id_created_before").val();
+        console.log(filters.replace(" ", "%20"));
+        $("#table").load(location.pathname + "?" + filters.replaceAll(" ", "%20") + " #table");
+    }
 
-        function autocompleted() {
-            refreshFilters();
-        }
+    function autocompleted() {
+        refreshFilters();
+    }
 
-        $(document).ready(function() {
-            $("input").change(refreshFilters);
-            $("input").keyup(refreshFilters);
-        });
-    </script>
+    $(document).ready(function () {
+        $("input").change(refreshFilters);
+        $("input").keyup(refreshFilters);
+    });
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/apps/wei/templates/wei/weiclub_detail.html b/apps/wei/templates/wei/weiclub_detail.html
index 4282964c..52d918f1 100644
--- a/apps/wei/templates/wei/weiclub_detail.html
+++ b/apps/wei/templates/wei/weiclub_detail.html
@@ -1,8 +1,5 @@
 {% extends "wei/base.html" %}
 
-{# Use a fluid-width container #}
-{% block containertype %}container-fluid{% endblock %}
-
 {% block profile_info %}
 {% include "wei/weiclub_info.html" %}
 {% endblock %}