From f333e6a87599896ea790fef90c79c3ea3f01b0fb Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Wed, 9 Sep 2020 14:03:49 +0200
Subject: [PATCH] Fix profile picture width

---
 apps/note/templates/note/conso_form.html      | 16 +++++++--------
 .../note/templates/note/transaction_form.html | 20 +++++++++----------
 note_kfet/static/css/custom.css               |  5 +++++
 note_kfet/static/js/consos.js                 |  2 --
 4 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/apps/note/templates/note/conso_form.html b/apps/note/templates/note/conso_form.html
index d5914055..396c313c 100644
--- a/apps/note/templates/note/conso_form.html
+++ b/apps/note/templates/note/conso_form.html
@@ -10,22 +10,22 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% block content %}
     <div class="row mt-4">
         <div class="col-sm-5 col-md-4" id="infos_div">
-            <div class="row">
+            <div class="row justify-content-center justify-content-md-end">
                 {# User details column #}
-                <div class="col">
-                    <div class="card bg-light border-success mb-4 text-center">
+                <div class="col picture-col">
+                    <div class="card bg-light mb-4 text-center">
                         <a id="profile_pic_link" href="#">
                             <img src="{% static "member/img/default_picture.png" %}"
-                                 id="profile_pic" alt="" class="card-img-top">
+                                 id="profile_pic" alt="" class="card-img-top d-none d-sm-block">
                         </a>
-                        <div class="card-body text-center text-break">
-                            <span id="user_note"></span>
+                        <div class="card-body text-center text-break px-1 py-2">
+                            <span id="user_note"><i>{% trans "Please select an user" %}</i></span>
                         </div>
                     </div>
                 </div>
 
                 {# User selection column #}
-                <div class="col-xl-7" id="user_select_div">
+                <div class="col-xl" id="user_select_div">
                     <div class="card bg-light border-success mb-4">
                         <div class="card-header">
                             <p class="card-text font-weight-bold">
@@ -44,6 +44,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                         </div>
                     </div>
                 </div>
+
                 {# Summary of consumption and consume button #}
                 <div class="col-xl-5 d-none" id="consos_list_div">
                     <div class="card bg-light border-info mb-4">
@@ -65,7 +66,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
                 </div>
             </div>
 
-
             {# Show last used buttons #}
             <div class="card bg-light mb-4">
                 <div class="card-header">
diff --git a/apps/note/templates/note/transaction_form.html b/apps/note/templates/note/transaction_form.html
index f5ff0b73..7ffb7dc1 100644
--- a/apps/note/templates/note/transaction_form.html
+++ b/apps/note/templates/note/transaction_form.html
@@ -34,21 +34,21 @@ SPDX-License-Identifier: GPL-2.0-or-later
         </div>
     </div>
     <hr>
-    <div class="row">
+    <div class="row justify-content-center">
         {#  Preview note profile (picture, username and balance) #}
-        <div class="col-md-3" id="note_infos_div">
-            <div class="card bg-light border-success shadow mb-4 pt-4 text-center">
+        <div class="col-md picture-col" id="note_infos_div">
+            <div class="card bg-light mb-4 text-center">
                 <a id="profile_pic_link" href="#"><img src="{% static "member/img/default_picture.png" %}"
                         id="profile_pic" alt="" class="img-fluid rounded mx-auto"></a>
-                <div class="card-body text-center">
-                    <span id="user_note"></span>
+                <div class="card-body text-center px-1 py-2">
+                    <span id="user_note"><i>{% trans "Please select an user" %}</i></span>
                 </div>
             </div>
         </div>
 
         {# list of emitters #}
         <div class="col-md-3" id="emitters_div">
-            <div class="card bg-light border-success shadow mb-4">
+            <div class="card bg-light mb-4">
                 <div class="card-header">
                     <p class="card-text font-weight-bold">
                         <label for="source_note" id="source_note_label">{% trans "Select emitters" %}</label>
@@ -75,7 +75,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
 
         {# list of receiver #}
         <div class="col-md-3" id="dests_div">
-            <div class="card bg-light border-info shadow mb-4">
+            <div class="card bg-light mb-4">
                 <div class="card-header">
                     <p class="card-text font-weight-bold" id="dest_title">
                         <label for="dest_note" id="dest_note_label">{% trans "Select receivers" %}</label>
@@ -97,8 +97,8 @@ SPDX-License-Identifier: GPL-2.0-or-later
         </div>
 
         {# Information on transaction (amount, reason, name,...) #}
-        <div class="col-md-3" id="external_div">
-            <div class="card bg-light border-warning shadow mb-4">
+        <div class="col-md" id="external_div">
+            <div class="card bg-light mb-4">
                 <div class="card-header">
                     <p class="card-text font-weight-bold">
                         {% trans "Action" %}
@@ -153,7 +153,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
         </div>
     </div>
 {# transaction history #}
-    <div class="card shadow mb-4" id="history">
+    <div class="card mb-4" id="history">
         <div class="card-header">
             <p class="card-text font-weight-bold">
                 {% trans "Recent transactions history" %}
diff --git a/note_kfet/static/css/custom.css b/note_kfet/static/css/custom.css
index 5d901c9d..1f7cf763 100644
--- a/note_kfet/static/css/custom.css
+++ b/note_kfet/static/css/custom.css
@@ -22,6 +22,11 @@
     border-bottom-color: rgba(0, 0, 0, .250);
 }
 
+/* Fixed width picture column */
+.picture-col {
+    max-width: 202px;
+}
+
 /* Limit fluid container to a max size */
 .container-fluid {
     max-width: 1600px;
diff --git a/note_kfet/static/js/consos.js b/note_kfet/static/js/consos.js
index 5a7e6144..78909600 100644
--- a/note_kfet/static/js/consos.js
+++ b/note_kfet/static/js/consos.js
@@ -29,7 +29,6 @@ $(document).ready(function () {
   // Switching in double consumptions mode should update the layout
   $('#double_conso').change(function () {
     $('#consos_list_div').removeClass('d-none')
-    $('#user_select_div').attr('class', 'col-xl-4')
     $('#infos_div').attr('class', 'col-sm-5 col-xl-6')
 
     const note_list_obj = $('#note_list')
@@ -48,7 +47,6 @@ $(document).ready(function () {
 
   $('#single_conso').change(function () {
     $('#consos_list_div').addClass('d-none')
-    $('#user_select_div').attr('class', 'col-xl-7')
     $('#infos_div').attr('class', 'col-sm-5 col-md-4')
 
     const consos_list_obj = $('#consos_list')