Restauration container.scss

css/container.scss

@@ -23,7 +23,7 @@
 		flex-wrap: wrap;
 
 		.inline-box{
-			flex: 100% 1 1;
+			flex: 0 0 1;
 		}
 
 		// Barre de recherche
@@ -33,6 +33,7 @@
 				// width: calc( 100% - 2*1em - 2*1em );
 				flex: calc( 100% - 2*1em - 2*1em );
 				height: 1em;
+			margin: 1em;
 			padding: .5em 1em;
 			padding-left: 2em;
 
@@ -75,19 +76,14 @@
 	/* [2] INLINE-BOX pour afficher les listes de donnees
 	=========================================================*/
 	& > section > .inline-box{
-		display: flex;
+		display: inline-block;
 		position: relative;
 			// width: calc( 50% - 2*1em - 2*1em );
-			flex: 100% 1 1;
-			height: 2em;
-			margin: .5em 0;
+			flex: calc( 50% - 2*1em - 2*1em );
+			margin: 1em;
 			padding: 1em;
 
-			/* flex properties */
-			flex-direction: row;
-			align-items: center;
-
-			border-radius: 2px;
+			border-radius: 3px;
 			box-shadow: 0 0 1px #b7b7b7;
 
 			background-color: #fff;
@@ -102,25 +98,30 @@
 				color: inherit;
 			}
 
-			& > span{
-				display: inline-block;
-				position: relative;
-					width: 100%;
-					height: 2em;
-					margin: 0;
-					padding: 0;
-
-				line-height: 2em;
-			}
-
 			/* (1) Titre de l'element */
 			.title{
+				display: inline-block;
+
+				font-size: 1.15em;
+				font-weight: bold;
+
+				color: darken($theme-color, 2);
+				white-space: nowrap;
+
+				& > span{
+					font-size: .8em;
+					color: #333;
+				}
 			}
 
 			/* (2) Code RFID */
 			/* (3) Adresse mail */
 			.code,
 			.mail{
+				display: block;
+				margin: 1em;
+				color: #333;
+				white-space: nowrap;
 
 				// svg (icone)
 				svg{
@@ -147,7 +148,10 @@
 
 			/* (4) Groupes */
 			.groups{
-
+				display: block;
+				margin: 1em;
+				color: #333;
+				white-space: nowrap;
 
 				// svg (icone)
 				svg{
@@ -168,11 +172,68 @@
 					}
 				}
 
+				& > span{
+					display: inline-block;
+					position: relative;
+					padding: .1em .5em;
+					margin-right: calc( .4em + 2em );
+
+					border-radius: 3px 0 0 3px;
+					border: 1px solid #bdbdbd;
+					box-shadow: inset 0 0 2px #fafafa;
+
+					background-color: #f9f9f9;
+
+					color: #333;
+
+					cursor: default;
+
+					&.add-group,
+					&.add-member{
+						border-radius: 3px;
+
+						cursor: pointer;
+					}
+
+					& > span.rem-group,
+					& > span.rem-member{
+						display: block;
+						position: absolute;
+							top: -1px;
+							left: 100%;
+							width: 1em;
+							height: calc( 100% - .1em - 2px );
+							padding: .1em .5em;
+
+						border-radius: 0 3px 3px 0;
+						border: 1px solid #bdbdbd;
+						box-shadow: inset 0 0 2px #fafafa;
+
+						background: url('/src/static/sub-menu-side/remove.svg') center center no-repeat;
+						background-size: auto 70%;
+						background-color: #f9f9f9;
+
+						color: inherit;
+
+						cursor: pointer;
+
+						&:hover{
+							background-image: url('/src/static/sub-menu-side/remove.svg?'+$form-invalid-color);
+						}
+
+
+					}
+
+				}
+
 			}
 
 			/* (5) Lien vers la modification */
 			.link_edit,
 			.link_remove{
+				display: inline-block;
+				float: right;
+				position: relative;
 					width: 1em;
 					height: 1em;
 				margin-left: 1em;

test/automate.php

@@ -330,8 +330,8 @@
 	}//createWarehouse();
 
 	debug();
-	$myView = new View('users.userlist', []);
-	$myView->view();
+	// $myView = new View('users.userlist', []);
+	// $myView->view();
 
 
 ?>