From 7fe44ae4e92e2bea4f221345c5f2ef8db09e7484 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Mon, 15 Feb 2016 12:27:01 +0100
Subject: [PATCH] - [x] [container.scss][view/users+machines] Charte avancee

---
 css/container.css  |  2 +-
 css/container.scss | 58 ++++++++++++++++++++++++++++++++++++++++++++++
 todo.md            |  1 +
 view/machines.php  |  9 +++----
 view/users.php     | 28 ++++++++++++++++++++--
 5 files changed, 91 insertions(+), 7 deletions(-)

diff --git a/css/container.css b/css/container.css
index c0b44df..9339632 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 .2s 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;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#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:.5em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus{border-color:#d44f18}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus{border-color:#19C566}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus{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:.5em 1em;border-radius:2px;border:1px solid #d44f18;background-color:#fff;color:#d44f18;transition:background .2s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:hover{background-color:#d44f18;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#19C566;color:#19C566}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form.valid>button:hover{background-color:#19C566;color:#fff}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:hover{background-color:#2193e6;color:#fff}
+#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 .2s 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;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d44f18;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#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:.5em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus{border-color:#d44f18}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus{border-color:#19C566}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus{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:.5em 1em;border-radius:2px;border:1px solid #d44f18;background-color:#fff;color:#d44f18;transition:background .2s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:hover{background-color:#d44f18;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#19C566;color:#19C566}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form.valid>button:hover{background-color:#19C566;color:#fff}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:hover{background-color:#2193e6;color:#fff}#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}
 /*# sourceMappingURL=container.css.map */
diff --git a/css/container.scss b/css/container.scss
index 21b48b6..1d45ea5 100755
--- a/css/container.scss
+++ b/css/container.scss
@@ -210,11 +210,22 @@
 			padding: 1em;
 
 			border-radius: 3px;
+			border-color: $form-invalid-color;
 			box-shadow: 0 0 1px #b7b7b7;
 
 			background-color: #fff;
 
 
+
+		&.valid{
+			border-color: $form-valid-color;
+		}
+
+		&.neutral{
+			border-color: $form-neutral-color;
+		}
+
+
 		/* (1) Champs de texte */
 		input[type=text],
 		input[type=mail],
@@ -319,6 +330,53 @@
 				color: #fff;
 			}
 		}
+
+		// "OU" separant les boutons
+		hr.OR{
+			display: block;
+			position: relative;
+				width: 100%;
+				height: 0;
+
+			border: 0;
+			border-bottom: 1px dashed $form-invalid-color;
+
+			&:before{
+				content: 'OU';
+				display: inline-block;
+				position: relative;
+					top: 50%;
+					left: 50%;
+					padding: 0 1em;
+	
+				background-color: #fff;
+
+				color: $form-invalid-color;
+
+				transform: translateX(-50%) translatey(-50%);
+			}
+
+		}
+
+		// "OU" valide
+		.valid > hr.OR,
+		hr.OR.valid{
+			border-bottom: 1px dashed $form-valid-color;
+			&:before{
+				color: $form-valid-color;
+			}
+
+		}
+
+		// "OU" neutre
+		.neutral > hr.OR,
+		hr.OR.neutral{
+			border-bottom: 1px dashed $form-neutral-color;
+			&:before{
+				color: $form-neutral-color;
+			}
+
+		}
 	}
 
 }
\ No newline at end of file
diff --git a/todo.md b/todo.md
index 54c9b43..16b2b2a 100755
--- a/todo.md
+++ b/todo.md
@@ -18,6 +18,7 @@
 ########
 # FAIT #
 ########
+- [x] [container.scss][view/users+machines] Charte avancee
 - [x] [container.scss] Refonte mineure formulaires, charte graphique en cours
 - [x] Creation de la base des managers et de l'API
 - [x] Conception des managers et de l'API
diff --git a/view/machines.php b/view/machines.php
index 660f6bb..6fdef25 100755
--- a/view/machines.php
+++ b/view/machines.php
@@ -151,8 +151,9 @@
 
 		echo "<form class='invalid'>";
 			echo "<input id='create_code' type='text' placeholder='Code'><br>";
+			echo "<hr class='OR' />";
 			echo "<input id='create_name' type='text' placeholder='Name'><br>";
-			echo "<button id='create_submit'>Créer</button>";
+			echo "<button id='create_submit'>Supprimer</button>";
 		echo "</form>";
 
 	echo '</section>';
@@ -173,9 +174,9 @@
 	echo "<section data-sublink='edit'>";
 
 		echo "<form class='neutral'>";
-			echo "<input id='create_code' type='text' placeholder='Code'><br>";
-			echo "<input id='create_name' type='text' placeholder='Name'><br>";
-			echo "<button id='create_submit'>Créer</button>";
+			echo "<input id='edit_code' type='text' placeholder='Code'><br>";
+			echo "<input id='edit_name' type='text' placeholder='Name'><br>";
+			echo "<button id='edit_submit'>Modifier</button>";
 		echo "</form>";
 
 	echo '</section>';
diff --git a/view/users.php b/view/users.php
index 5e76628..e748d50 100755
--- a/view/users.php
+++ b/view/users.php
@@ -137,7 +137,7 @@
 	echo "<section data-sublink='create'>";
 
 		echo "<form class='valid'>";
-			echo "<input id='create_code'      type='text' placeholder='Code'><br>";
+			echo "<input id='create_code'      type='text' placeholder='CO-DE-RF-ID'><br>";
 			echo "<input id='create_username'  type='text' placeholder='Username'><br>";
 			echo "<input id='create_firstname' type='text' placeholder='Firstname'><br>";
 			echo "<input id='create_lastname'  type='text' placeholder='Lastname'><br>";
@@ -164,9 +164,33 @@
 	=========================================================*/
 	echo "<section data-sublink='remove'>";
 
-		echo "<form>";
+		echo "<form class='invalid'>";
 			echo "<input id='remove_code'      type='text' placeholder='Code'><br>";
+			echo "<hr class='OR' />";
+			echo "<input id='remove_username'      type='text' placeholder='Username'><br>";
 			echo "<button id='remove_submit'>Supprimer</button>";
 		echo "</form>";
 
+	echo '</section>';
+
+
+
+
+
+
+
+
+
+
+
+
+	/* [4] Modification d'utilisateur
+	=========================================================*/
+	echo "<section data-sublink='edit'>";
+
+		echo "<form class='neutral'>";
+			echo "<input id='edit_code'      type='text' placeholder='Code'><br>";
+			echo "<button id='edit_submit'>Modifier</button>";
+		echo "</form>";
+
 	echo '</section>';
\ No newline at end of file