From c2e7c33f60f907869142fbcd099ba211e1e4c84b Mon Sep 17 00:00:00 2001
From: niladic <git@nil.choron.cc>
Date: Tue, 29 Dec 2020 18:42:55 +0100
Subject: [PATCH] =?UTF-8?q?Bouge=20les=20checkboxes=20=C3=A0=20droite=20su?=
 =?UTF-8?q?r=20la=20page=20utilisateur=20(#911)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/views/editUser.scala.html | 89 +++++++++++++++++++++--------------
 public/stylesheets/main.css   |  6 ++-
 2 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/app/views/editUser.scala.html b/app/views/editUser.scala.html
index 6990956cf..24f2acfa2 100644
--- a/app/views/editUser.scala.html
+++ b/app/views/editUser.scala.html
@@ -92,42 +92,6 @@
                @if(!canEditUser) { readonly }
                @toHtmlArgs(args)>
     }
-    @helper.checkbox(form(Keys.User.sharedAccount), List[Option[(Symbol, String)]](
-        Some("type" -> "checkbox"),
-        Some("label" -> "Compte Partagé"),
-        Some("class" -> "mdl-checkbox__input"),
-        if (canEditUser) None else Some("disabled" -> "")
-    ).flatten: _*)
-    @helper.checkbox(form("instructor"), List[Option[(Symbol, String)]](
-        Some("type" -> "checkbox"),
-        Some("label" -> "Instructeur"),
-        Some("class" -> "mdl-checkbox__input"),
-        if (canEditUser) None else Some("disabled" -> "")
-    ).flatten:_*)
-    @helper.checkbox(form("helper"), List[Option[(Symbol, String)]](
-        Some("type" -> "checkbox"),
-        Some("label" -> "Aidant"),
-        Some("class" -> "mdl-checkbox__input"),
-        if (canEditUser) None else Some("disabled" -> "")
-    ).flatten:_*)
-    @helper.checkbox(form("adminGroup"), List[Option[(Symbol, String)]](
-        Some("type" -> "checkbox"),
-        Some("label" -> "Responsable de ces groupes"),
-        Some("class" -> "mdl-checkbox__input"),
-        if (canEditUser) None else Some("disabled" -> "")
-    ).flatten:_*)
-    @helper.checkbox(form("disabled"), List[Option[(Symbol, String)]](
-        Some("type" -> "checkbox"),
-        Some("label" -> "Désactiver l'utilisateur"),
-        Some("class" -> "mdl-checkbox__input"),
-        if (canEditUser) None else Some("disabled" -> "")
-    ).flatten:_*)
-
-    @if(unused && canEditUser) {
-      <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onclick="showDialog(document.querySelector('#dialog-delete-user'))">Supprimer cet utilisateur inutilisé.</button>
-      <br>
-    }
-    <br>
   </div>
   <div class="mdl-grid mdl-cell--6-col-desktop mdl-cell--12-col">
       <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col">
@@ -179,6 +143,59 @@
                   <a class="mdl-cell mdl-cell--10-col" href="@routes.GroupController.editGroup(group.id)">@{group.name}</a><br/>
               }
           }
+
+          <div class="mdl-cell mdl-cell--12-col single--margin-top-24px single--margin-bottom-24px">
+            @** To avoid unwanted clicks outside the checkbox texts,
+                we wrap them into a div that has the `width: max-content` **@
+            <div class="single--width-max-content">
+              @helper.checkbox(form(Keys.User.sharedAccount), List[Option[(Symbol, String)]](
+                Some("type" -> "checkbox"),
+                Some("label" -> "Compte Partagé"),
+                Some("class" -> "mdl-checkbox__input"),
+                if (canEditUser) None else Some("disabled" -> "")
+              ).flatten: _*)
+            </div>
+
+            <div class="single--width-max-content">
+              @helper.checkbox(form("instructor"), List[Option[(Symbol, String)]](
+                Some("type" -> "checkbox"),
+                Some("label" -> "Instructeur"),
+                Some("class" -> "mdl-checkbox__input"),
+                if (canEditUser) None else Some("disabled" -> "")
+              ).flatten:_*)
+            </div>
+            <div class="single--width-max-content">
+              @helper.checkbox(form("helper"), List[Option[(Symbol, String)]](
+                Some("type" -> "checkbox"),
+                Some("label" -> "Aidant"),
+                Some("class" -> "mdl-checkbox__input"),
+                if (canEditUser) None else Some("disabled" -> "")
+              ).flatten:_*)
+            </div>
+            <div class="single--width-max-content">
+              @helper.checkbox(form("adminGroup"), List[Option[(Symbol, String)]](
+                Some("type" -> "checkbox"),
+                Some("label" -> "Responsable de ces groupes"),
+                Some("class" -> "mdl-checkbox__input"),
+                if (canEditUser) None else Some("disabled" -> "")
+              ).flatten:_*)
+            </div>
+            <div class="single--width-max-content">
+              @helper.checkbox(form("disabled"), List[Option[(Symbol, String)]](
+                Some("type" -> "checkbox"),
+                Some("label" -> "Désactiver l'utilisateur"),
+                Some("class" -> "mdl-checkbox__input"),
+                if (canEditUser) None else Some("disabled" -> "")
+              ).flatten:_*)
+            </div>
+
+          </div>
+
+          @if(unused && canEditUser) {
+            <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onclick="showDialog(document.querySelector('#dialog-delete-user'))">Supprimer cet utilisateur inutilisé</button>
+            <br>
+          }
+
       </div>
   </div>
 
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index cc9c9c54b..842767e5f 100644
--- a/public/stylesheets/main.css
+++ b/public/stylesheets/main.css
@@ -722,6 +722,10 @@ a {
     width: 100%;
 }
 
+.single--width-max-content {
+    width: max-content;
+}
+
 .single--flex-grow-1 {
     -webkit-box-flex: 1;
     -ms-flex-positive: 1;
@@ -973,4 +977,4 @@ Tabs
     margin-left: 24px;
     margin-right: 24px;
     margin-bottom: 24px;
-}
\ No newline at end of file
+}