From e6683cc6a8549762e489464ad67b5b4e1d1b2fea Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Mon, 15 Feb 2016 22:01:00 +0100
Subject: [PATCH] - [x] [repo+css+view] Split les listes en 2 colonnes

---
 css/constants.scss             |  5 +--
 css/container.css              |  2 +-
 css/container.scss             | 56 ++++++++++------------------------
 manager/repo/machine.php       |  2 +-
 manager/repo/user.php          |  2 +-
 src/static/container/card.svg  | 19 ++++++------
 src/static/container/group.svg | 17 ++++++-----
 src/static/container/mail.svg  | 15 ++++-----
 todo.md                        |  1 +
 view/machines.php              | 28 ++++++++++-------
 view/users.php                 | 24 +++++++++------
 11 files changed, 82 insertions(+), 89 deletions(-)

diff --git a/css/constants.scss b/css/constants.scss
index e533062..7ff53c8 100755
--- a/css/constants.scss
+++ b/css/constants.scss
@@ -3,6 +3,7 @@ $theme-color: #e63321;
 $sub-menu-color: #5b5e63;
 
 /* FORMULAIRES */
-$form-valid-color: #19C566;
+$form-valid-color: #27a560;
 $form-neutral-color: #2193e6;
-$form-invalid-color: #d44f18;
+// $form-invalid-color: #d44f18;
+$form-invalid-color: darken($theme-color, 5);
diff --git a/css/container.css b/css/container.css
index cdb9f25..946bd96 100755
--- a/css/container.css
+++ b/css/container.css
@@ -1,2 +1,2 @@
-#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code,#WRAPPER>#CONTAINER>section>.inline-box .mail{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.8em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .code svg path,#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>.inline-box .link_edit,#WRAPPER>#CONTAINER>section>.inline-box .link_remove{display:inline-block;position:absolute;top:0;left:calc( 100% - 1.2em - 2*1em );width:1.2em;height:1.2em;margin:1em;cursor:pointer}#WRAPPER>#CONTAINER>section>.inline-box .link_edit>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove>svg{width:100%;height:100%;fill:#ddd !important;transition:fill .4s ease-in-out;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .link_edit:hover>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#2193e6 !important}#WRAPPER>#CONTAINER>section>.inline-box .link_remove{top:calc( 100% - 1.2em - 2*1em )}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d44f18 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;left:50%;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d44f18;box-shadow:0 0 1px #b7b7b7;background-color:#fff;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form.valid{border-color:#19C566}#WRAPPER>#CONTAINER>section>form.neutral{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password],#WRAPPER>#CONTAINER>section>form.invalid>input[type=text],#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail],#WRAPPER>#CONTAINER>section>form.invalid>input[type=password],#WRAPPER>#CONTAINER>section>form input.invalid[type=text],#WRAPPER>#CONTAINER>section>form input.invalid[type=mail],#WRAPPER>#CONTAINER>section>form input.invalid[type=password]{display:inline-block;margin:1em 0;padding:.7em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=text]:hover,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:hover{border-color:#d44f18}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:hover{border-color:#19C566}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:hover{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid,#WRAPPER>#CONTAINER>section>form.invalid>button{display:inline-block;position:relative;left:50%;padding:.7em 1em;border-radius:3px;border:1px solid #d44f18;background-color:#d44f18;color:#fff;transition:background .4s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button:focus,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form button.invalid:focus,#WRAPPER>#CONTAINER>section>form.invalid>button:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:focus{background-color:#fff;color:#d44f18}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#19C566;background-color:#19C566}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form button.valid:focus,#WRAPPER>#CONTAINER>section>form.valid>button:hover,#WRAPPER>#CONTAINER>section>form.valid>button:focus{background-color:#fff;color:#19C566}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;background-color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form button.neutral:focus,#WRAPPER>#CONTAINER>section>form.neutral>button:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:focus{background-color:#fff;color:#2193e6}#WRAPPER>#CONTAINER>section>form hr.OR{display:block;position:relative;width:100%;height:0;border:0;border-bottom:1px dashed #d44f18}#WRAPPER>#CONTAINER>section>form hr.OR:before{content:'OU';display:inline-block;position:relative;top:50%;left:50%;padding:0 1em;background-color:#fff;color:#d44f18;transform:translateX(-50%) translatey(-50%)}#WRAPPER>#CONTAINER>section>form .valid>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.valid{border-bottom:1px dashed #19C566}#WRAPPER>#CONTAINER>section>form .valid>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.valid:before{color:#19C566}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.neutral{border-bottom:1px dashed #2193e6}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.neutral:before{color:#2193e6}
+#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:0 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;width:calc( 50% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold;color:#bf2515}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code,#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .code svg path,#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>.inline-box .link_edit,#WRAPPER>#CONTAINER>section>.inline-box .link_remove{display:inline-block;position:relative;width:1.2em;height:1.2em;margin-left:1em;cursor:pointer}#WRAPPER>#CONTAINER>section>.inline-box .link_edit>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove>svg{width:100%;height:100%;fill:#ddd !important;transition:fill .4s ease-in-out;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .link_edit:hover>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#2193e6 !important}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d52918 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;left:50%;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d52918;box-shadow:0 0 1px #b7b7b7;background-color:#fff;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form.valid{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password],#WRAPPER>#CONTAINER>section>form.invalid>input[type=text],#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail],#WRAPPER>#CONTAINER>section>form.invalid>input[type=password],#WRAPPER>#CONTAINER>section>form input.invalid[type=text],#WRAPPER>#CONTAINER>section>form input.invalid[type=mail],#WRAPPER>#CONTAINER>section>form input.invalid[type=password]{display:inline-block;margin:1em 0;padding:.7em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=text]:hover,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:hover{border-color:#d52918}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:hover{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:hover{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid,#WRAPPER>#CONTAINER>section>form.invalid>button{display:inline-block;position:relative;left:50%;padding:.7em 1em;border-radius:3px;border:1px solid #d52918;background-color:#d52918;color:#fff;transition:background .4s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button:focus,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form button.invalid:focus,#WRAPPER>#CONTAINER>section>form.invalid>button:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:focus{background-color:#fff;color:#d52918}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#27a560;background-color:#27a560}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form button.valid:focus,#WRAPPER>#CONTAINER>section>form.valid>button:hover,#WRAPPER>#CONTAINER>section>form.valid>button:focus{background-color:#fff;color:#27a560}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;background-color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form button.neutral:focus,#WRAPPER>#CONTAINER>section>form.neutral>button:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:focus{background-color:#fff;color:#2193e6}#WRAPPER>#CONTAINER>section>form hr.OR{display:block;position:relative;width:100%;height:0;border:0;border-bottom:1px dashed #d52918}#WRAPPER>#CONTAINER>section>form hr.OR:before{content:'OU';display:inline-block;position:relative;top:50%;left:50%;padding:0 1em;background-color:#fff;color:#d52918;transform:translateX(-50%) translatey(-50%)}#WRAPPER>#CONTAINER>section>form .valid>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.valid{border-bottom:1px dashed #27a560}#WRAPPER>#CONTAINER>section>form .valid>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.valid:before{color:#27a560}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.neutral{border-bottom:1px dashed #2193e6}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.neutral:before{color:#2193e6}
 /*# sourceMappingURL=container.css.map */
diff --git a/css/container.scss b/css/container.scss
index 99133c9..f3a7527 100755
--- a/css/container.scss
+++ b/css/container.scss
@@ -17,12 +17,12 @@
 	// @active + .list
 	& > section.active.list{
 		display: flex;
-		flex-direction: column;
-		// justify-content: space-between;
-		// flex-wrap: wrap;
+		flex-direction: row;
+		justify-content: space-around;
+		flex-wrap: wrap;
 
 		.inline-box{
-			flex: 1 1 1;
+			flex: 0 1 1;
 		}
 	}
 
@@ -33,8 +33,8 @@
 	& > section > .inline-box{
 		display: inline-block;
 		position: relative;
-			// width: calc( 100% - 2*1em - 2*1em );
-			margin: .3em 0;
+			width: calc( 50% - 2*1em - 2*1em );
+			margin: 1em;
 			padding: 1em;
 
 			border-radius: 3px;
@@ -54,6 +54,8 @@
 				font-size: 1.15em;
 				font-weight: bold;
 
+				color: darken($theme-color, 10);
+
 				& > span{
 					font-size: .8em;
 					color: #333;
@@ -61,35 +63,11 @@
 			}
 
 			/* (2) Code RFID */
+			/* (3) Adresse mail */
 			.code,
 			.mail{
-				display: inline-block;
-				color: #333;
-				
-				// svg (icone)
-				svg{
-					display: inline-block;
-					position: relative;
-						margin-left: .8em;
-						margin-right: .5em;
-						margin-bottom: -.6em;
-						width: 1.5em;
-						height: 2em;
-
-					pointer-events: none;
-
-					path{
-						fill: #333 !important;
-						
-						pointer-events: none;
-					}
-				}
-
-			}
-
-			/* (3) Adresse mail */
-			.mail{
-				display: inline-block;
+				display: block;
+				margin: 1em;
 				color: #333;
 				
 				// svg (icone)
@@ -106,7 +84,7 @@
 
 					path{
 						fill: #333 !important;
-
+						
 						pointer-events: none;
 					}
 				}
@@ -114,6 +92,7 @@
 			}
 
 
+
 			/* (4) Groupes */
 			.groups{
 				display: block;
@@ -130,7 +109,7 @@
 						width: 1.5em;
 						height: 2em;
 
-						pointer-events: none;
+					pointer-events: none;
 
 					path{
 						fill: #333 !important;
@@ -161,12 +140,10 @@
 			.link_edit,
 			.link_remove{
 				display: inline-block;
-				position: absolute;
-					top: 0;
-					left: calc( 100% - 1.2em - 2*1em );
+				position: relative;
 					width: 1.2em;
 					height: 1.2em;
-				margin: 1em;
+				margin-left: 1em;
 
 				cursor: pointer;
 
@@ -189,7 +166,6 @@
 
 			/* (6) Lien vers la suppression */
 			.link_remove{
-				top: calc( 100% - 1.2em - 2*1em );
 
 				&:hover{
 					& > svg{
diff --git a/manager/repo/machine.php b/manager/repo/machine.php
index 6f19ed7..6147581 100644
--- a/manager/repo/machine.php
+++ b/manager/repo/machine.php
@@ -61,7 +61,7 @@
 		*/
 		public static function getAll(){
 			// On ecrit la requete
-			$request = Database::getPDO()->query("SELECT * FROM machine ORDER BY id_machine");
+			$request = Database::getPDO()->query("SELECT * FROM machine ORDER BY name");
 
 			// On recupere le resultat
 			$answer  = $request->fetchAll();
diff --git a/manager/repo/user.php b/manager/repo/user.php
index 60c515a..d1c515c 100755
--- a/manager/repo/user.php
+++ b/manager/repo/user.php
@@ -70,7 +70,7 @@
 		*/
 		public static function getAll(){
 			// On ecrit la requete
-			$request = Database::getPDO()->query("SELECT * FROM user ORDER BY id_user");
+			$request = Database::getPDO()->query("SELECT * FROM user ORDER BY username");
 
 			// On recupere le resutat
 			$answer  = $request->fetchAll();
diff --git a/src/static/container/card.svg b/src/static/container/card.svg
index e88865b..a43ea26 100644
--- a/src/static/container/card.svg
+++ b/src/static/container/card.svg
@@ -7,17 +7,17 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="22.857141"
+   height="32"
    id="Layer_1"
    version="1.1"
-   viewBox="0 0 32 22.857141"
+   viewBox="0 0 32 31.999999"
    width="32"
    xml:space="preserve"
    inkscape:version="0.48.4 r9939"
-   sodipodi:docname="1455547177_icon-card.svg"><metadata
+   sodipodi:docname="card.svg"><metadata
      id="metadata3168"><rdf:RDF><cc:Work
          rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
      id="defs3166" /><sodipodi:namedview
      pagecolor="#ffffff"
      bordercolor="#666666"
@@ -35,15 +35,16 @@
      fit-margin-left="0"
      fit-margin-right="0"
      fit-margin-bottom="0"
-     inkscape:zoom="10.429825"
-     inkscape:cx="65.516919"
-     inkscape:cy="-20.635069"
+     inkscape:zoom="14.75"
+     inkscape:cx="31.803873"
+     inkscape:cy="2.4807302"
      inkscape:window-x="0"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" /><g
+     inkscape:current-layer="Layer_1"
+     inkscape:snap-page="true" /><g
      id="g3154"
-     transform="matrix(0.07142857,0,0,0.07142857,-2.2857142,-6.8571427)"><path
+     transform="matrix(0.07142857,0,0,0.07142857,-2.2857139,-2.2857144)"><path
        d="M 452,96 H 60 c -15.5,0 -27.9,12.5 -28,28 l 0,0 v 0.3 263.4 0.3 l 0,0 c 0.2,15.5 12.5,28 28,28 h 392 c 15.6,0 28,-12.7 28,-28.3 v 0 -263.4 0 C 480,108.7 467.6,96 452,96 z M 77.1,128 h 357.7 c 6.9,0 12.1,5.1 13.1,12 v 20 H 64 V 139.7 C 65,132.9 70.3,128 77.1,128 z M 434.9,384 H 77.1 C 70.2,384 65,379.1 64,372.3 V 256 h 384 v 116 c -1,6.9 -6.3,12 -13.1,12 z"
        id="path3156"
        inkscape:connector-curvature="0" /><rect
diff --git a/src/static/container/group.svg b/src/static/container/group.svg
index bb9b763..b0deef7 100644
--- a/src/static/container/group.svg
+++ b/src/static/container/group.svg
@@ -7,14 +7,14 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="26.668774"
+   height="32"
    id="Layer_1"
    version="1.1"
-   viewBox="0 0 31.999998 26.668774"
+   viewBox="0 0 31.999998 32"
    width="31.999998"
    xml:space="preserve"
    inkscape:version="0.48.4 r9939"
-   sodipodi:docname="group2.svg"><metadata
+   sodipodi:docname="group.svg"><metadata
      id="metadata15"><rdf:RDF><cc:Work
          rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
@@ -35,15 +35,16 @@
      fit-margin-left="0"
      fit-margin-right="0"
      fit-margin-bottom="0"
-     inkscape:zoom="0.4609375"
-     inkscape:cx="191.97307"
-     inkscape:cy="160"
+     inkscape:zoom="20.85965"
+     inkscape:cx="14.59793"
+     inkscape:cy="17.35532"
      inkscape:window-x="0"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" /><g
+     inkscape:current-layer="Layer_1"
+     inkscape:snap-page="true" /><g
      id="g3"
-     transform="matrix(0.08333202,0,0,0.08333202,-5.3354935,-7.9973471)"><path
+     transform="matrix(0.08333202,0,0,0.08333202,-5.3354939,-5.3317337)"><path
        d="M 430.1,192 H 81.9 c -17.7,0 -18.6,9.2 -17.6,20.5 l 13,183 c 0.9,11.2 3.5,20.5 21.1,20.5 h 316.2 c 18,0 20.1,-9.2 21.1,-20.5 l 12.1,-185.3 c 0.9,-11.2 0,-18.2 -17.7,-18.2 z"
        id="path5"
        inkscape:connector-curvature="0" /><g
diff --git a/src/static/container/mail.svg b/src/static/container/mail.svg
index a8f0b31..7d80a0c 100755
--- a/src/static/container/mail.svg
+++ b/src/static/container/mail.svg
@@ -7,13 +7,13 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="22.857143"
+   height="32"
    version="1.1"
-   viewBox="0 0 32 22.857143"
+   viewBox="0 0 32 31.999999"
    width="32"
    id="svg2"
    inkscape:version="0.48.4 r9939"
-   sodipodi:docname="mail2.svg">
+   sodipodi:docname="mail.svg">
   <metadata
      id="metadata13">
     <rdf:RDF>
@@ -22,7 +22,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -44,17 +44,18 @@
      fit-margin-right="0"
      fit-margin-bottom="0"
      inkscape:zoom="14.75"
-     inkscape:cx="7"
+     inkscape:cx="-3.8813559"
      inkscape:cy="4.9999999"
      inkscape:window-x="0"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" />
+     inkscape:current-layer="svg2"
+     inkscape:snap-page="true" />
   <defs
      id="defs6" />
   <g
      id="Icons with numbers"
-     transform="matrix(2.2857143,0,0,2.2857143,-2.2857143,-6.8571429)"
+     transform="matrix(2.2857143,0,0,2.2857143,-2.2857144,-2.2857149)"
      style="fill:none;stroke:none">
     <g
        id="Group"
diff --git a/todo.md b/todo.md
index 494264e..218f7a1 100755
--- a/todo.md
+++ b/todo.md
@@ -18,6 +18,7 @@
 ########
 # FAIT #
 ########
+- [x] [repo+css+view] Split les listes en 2 colonnes
 - [x] [container.scss] Ajout de padding-top/bottom pour les input/button
 - [x] [container.scss] Inversion des etats pour boutons
 - [x] [container.scss] Modification du temps de transition (.2s -> .4s)
diff --git a/view/machines.php b/view/machines.php
index 6fdef25..eba0079 100755
--- a/view/machines.php
+++ b/view/machines.php
@@ -71,9 +71,25 @@
 				$clusters = $clusters->answer();
 				
 				echo "<article class='inline-box'>";
-					// Prenom Nom 
+					// Nom de la machine
 					echo "<span class='title'>#".$machine['name']."</span>";
 
+
+
+					// Icone vers la modification
+					echo "<span class='link_edit' data-machine='".$machine['id_machine']."'>";
+						echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side');
+					echo "</span>";
+
+					// Icone vers la suppression 
+					echo "<span class='link_remove' data-machine='".$machine['id_machine']."'>";
+						echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side');
+					echo "</span>";
+
+
+
+					
+
 					// Code RFID
 					echo "<span class='code'>";
 						echo ResourceDispatcher::getResource('f/svg/card/st/container');
@@ -91,16 +107,6 @@
 								foreach($clusters as $cluster)
 									echo "<span>".$cluster['name']."</span>";
 						echo"</span>";
-						
-					// Icone vers la modification
-					echo "<span class='link_edit' data-machine='".$machine['id_machine']."'>";
-						echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side');
-					echo "</span>";
-
-					// Icone vers la suppression 
-					echo "<span class='link_remove' data-machine='".$machine['id_machine']."'>";
-						echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side');
-					echo "</span>";
 
 
 				echo "</article>";
diff --git a/view/users.php b/view/users.php
index 3b9ef9a..22f350b 100755
--- a/view/users.php
+++ b/view/users.php
@@ -73,9 +73,24 @@
 				$clusters = $clusters->answer();
 
 				echo "<article class='inline-box'>";
+
 					// Prenom Nom 
 					echo "<span class='title'>".$user['firstname']." ".$user['lastname']." <span>#".$user['username']."</span></span>";
 
+
+
+					// Icone vers la modification
+					echo "<span class='link_edit' data-user='".$user['id_user']."'>";
+						echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side');
+					echo "</span>";
+
+					// Icone vers la suppression 
+					echo "<span class='link_remove' data-user='".$user['id_user']."'>";
+						echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side');
+					echo "</span>";
+
+
+
 					// Code RFID
 					echo "<span class='code'>";
 						echo ResourceDispatcher::getResource('f/svg/card/st/container');
@@ -102,16 +117,7 @@
 							foreach($clusters as $cluster)
 								echo "<span>".$cluster['name']."</span>";
 					echo"</span>";
-						
-					// Icone vers la modification
-					echo "<span class='link_edit' data-user='".$user['id_user']."'>";
-						echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side');
-					echo "</span>";
 
-					// Icone vers la suppression 
-					echo "<span class='link_remove' data-user='".$user['id_user']."'>";
-						echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side');
-					echo "</span>";
 
 				echo "</article>";
 			}