From e04649a8f534d0ef92acbb7503a9a305039a5ba8 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Wed, 7 Mar 2018 18:49:28 +0100
Subject: [PATCH] [webpack.teacher.view] can now toggle 'CREATE' card + fixed
 layout now 'CREATE' card is !!exactly!! the same size as others

---
 webpack/component/teacher/view.vue |  6 ++-
 webpack/data/teacher.js            | 35 +++++++-------
 webpack/scss/container.scss        | 73 +++++++++++++++---------------
 webpack/scss/global.scss           | 48 +++++++++++++++-----
 4 files changed, 96 insertions(+), 66 deletions(-)

diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue
index 20d3d1a..d557ad4 100644
--- a/webpack/component/teacher/view.vue
+++ b/webpack/component/teacher/view.vue
@@ -2,11 +2,13 @@
 
 	<div id='CONTAINER'>
 
-		<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
 
 		<div class='card container'>
 
-			<section class='valid' data-create=''>
+			<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
+			<button class='card toggle valid' :data-active='gstore.create_card?1:0' @click='gstore.create_card=!gstore.create_card'>+</button>
+
+			<section class='valid' data-create='' v-show='gstore.create_card'>
 
 				<select class='category' v-model='gstore.create_cat'>
 					<option selected='selected' disabled='disabled' value='-'>Catégorie d'enseignant</option>
diff --git a/webpack/data/teacher.js b/webpack/data/teacher.js
index 878bc27..41831bb 100644
--- a/webpack/data/teacher.js
+++ b/webpack/data/teacher.js
@@ -209,49 +209,52 @@ gstore.add('is_handler', function(e){
 
 /* (5) Manage instant create
 ---------------------------------------------------------*/
-/* (1) Initialize inputs */
+/* (1) Initialize toggle show */
+gstore.add('create_card', false);
+
+/* (2) Initialize inputs */
 gstore.add('create_cat',  '-');
 gstore.add('create_name', '');
 gstore.add('create_cas',  '');
 gstore.add('create_h',    '');
 
-/* (2) Initialize error message */
+/* (3) Initialize error message */
 gstore.add('create_err_valid', false);
 gstore.add('create_err', '');
 
-/* (3) Define create handler */
+/* (4) Define create handler */
 gstore.add('ic_handler', function(prof_id){
 
-	/* (3.1) Trim text input */
+	/* (4.1) Trim text input */
 	gstore.get.create_name = gstore.get.create_name.trim();
 	gstore.get.create_cas  = gstore.get.create_cas.trim().toLowerCase();
 	gstore.get.create_h    = gstore.get.create_h.trim();
 
-	/* (3.2) Store values locally */
+	/* (4.2) Store values locally */
 	var cat  = gstore.get.create_cat;
 	var name = gstore.get.create_name.split(' ');
 	var cas  = gstore.get.create_cas;
 	var hour = gstore.get.create_h;
 
-	/* (3.3) Init client-side check */
+	/* (4.3) Init client-side check */
 	var errors = [];
 
-	/* (3.3.1) Check category */
+	/* (4.3.1) Check category */
 	if( isNaN(cat) ) errors.push('La catégorie de l\'enseignant est manquante');
 
-	/* (3.3.2) Check name */
+	/* (4.3.2) Check name */
 	if( name.length !== 2 || name[0].length < 2 || name[1].length < 2 )
 		errors.push('Le nom doit suivre le format "Prénom Nom"');
 
-	/* (3.3.3) Check CAS login */
+	/* (4.3.3) Check CAS login */
 	if( !/^([a-z]{4,16})?$/.test(cas) )
 		errors.push('L\'identifiant doit être vide ou comprendre de 4 à 16 lettres');
 
-	/* (3.3.4) Check hours */
+	/* (4.3.4) Check hours */
 	if( hour === '' || isNaN(hour) || hour < 0 )
 		errors.push('Le nombre d\'heures doit être un entier positif.');
 
-	/* (3.4) Show first error only (for 2s) */
+	/* (4.4) Show first error only (for 2s) */
 	if( errors.length > 0 ){
 
 		gstore.get.create_err = errors[0];
@@ -262,7 +265,7 @@ gstore.add('ic_handler', function(prof_id){
 
 
 
-	/* (4.1) Création de la requête */
+	/* (4.5.1) Création de la requête */
 	var rq = {
 		firstName: name[0],
 		lastName:  name[1],
@@ -276,24 +279,24 @@ gstore.add('ic_handler', function(prof_id){
 	if( cas.length > 0 ) rq.casLogin = cas;
 
 
-	/* (4.2) Send request */
+	/* (4.5.2) Send request */
 	api.call('POST professor', rq, function(rs){
 
 		console.log(rs);
 
-		/* (4.2.1) Manage 'already exist' error */
+		/* (4.5.2.1) Manage 'already exist' error */
 		if( rs.error == 29 ){
 			gstore.get.create_err = 'Le couple Nom-Prénom est déja utilisé.';
 			return setTimeout(() => gstore.add('create_err', ''), 2000);
 		}
 
-		/* (4.2.2) Manage other errors */
+		/* (4.5.2.2) Manage other errors */
 		if( rs.error !== 0 ){
 			gstore.get.create_err = 'erreur ('+rs.error+') Impossible de créer l\'enseignant';
 			return setTimeout(() => gstore.add('create_err', ''), 2000);
 		}
 
-		/* (4.2.3) Show that user is created */
+		/* (4.5.2.3) Show that user is created */
 		// display all is ok
 		gstore.add('create_err_valid', true);
 		gstore.add('create_err', 'L\'enseignant a été créé, il s\'affichera au prochain rechargement');
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index aa7805d..76b0856 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -79,43 +79,16 @@
 
 
 
-
-
-/* [2] Card style -> instant-search
----------------------------------*/
-#CONTAINER > input.card.instant-search{
-
-	display: block;
-	position: absolute;
-		top: .5em;
-		left: .5em;
-		//           100% - filtr - padding - border
-		width: calc( 100% - 20em - 1em - 6*1em );
-		height: calc( 3em - 2*.5em  - 2*1px);
-
-	margin: 0;
-	padding: .5em 1em;
-
-	border-radius: 3px / 3px;
-	background-color: #fff;
-
-	box-shadow: 0 2px 2px darken(#fff, 10%);
-
-}
-
-
-
-
 /* [3] Card style -> container
 ---------------------------------*/
 #CONTAINER > div.card.container{
 
 	display: flex;
 	position: absolute;
-		top: 3em;
+		top: 0;
 		left: 0;
 		width: calc( 100% - 20em );
-		min-height: calc( 100% - 3em );
+		min-height: 100%;
 
 	// flex properties
 	flex-direction:  row;
@@ -127,13 +100,41 @@
 	overflow: hidden;
 
 
+	/* [3.1] Card style -> instant-search
+	---------------------------------*/
+	& > input.instant-search{
+
+		display: inline-block;
+		position: relative;
+
+		//                   - marg  - padd   - [NEW] - separ
+		flex: 0 1 calc( 100% - 2*1em - 2*.5em - 2em - 2*1em );
+
+		margin: 1em .5em;
+		padding: .5em 1em;
+
+		border-radius: 3px / 3px;
+		background-color: #fff;
+
+		box-shadow: 0 2px 2px darken(#fff, 10%);
+
+		& + button.card.toggle{
+			display: inline-block;
+			position: relative;
+
+			flex: 0 1 calc( 2em - 2*.5em );
+
+			margin: 1em .5em;
+			font-weight: bold;
+
+		}
+
+	}
+
 	/* (1) Card container */
 	& > section{
 
-		// flex-grow: 1;
-		flex-basis: 15em;
-		flex-shrink: 1;
-		flex-grow: 1;
+		flex: 1 1 0;
 
 		display: flex;
 		position: relative;
@@ -142,7 +143,7 @@
 		padding: 1.5em;
 
 		border-radius: 3px / 3px;
-		// border: 1px solid darken(#fff, 10%);
+		border: 1px solid transparent;
 		box-shadow: 0 1px 1px darken(#fff, 20%);
 
 		box-shadow: 0 1px 1px darken(#fff, 20%);
@@ -240,8 +241,8 @@
 			margin:  0;
 			padding: 0;
 			margin-left:   -.4em; // emulate no <select>
-			margin-top:    -.8em; // replace as if not a select
-			margin-bottom: -.4em; // fix layout for following elements
+			margin-top:    -1em; // replace as if not a select
+			margin-bottom: -.3em; // fix layout for following elements
 
 			// remove border
 			border: 0;
diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index 3a4fe17..f8b7b37 100644
--- a/webpack/scss/global.scss
+++ b/webpack/scss/global.scss
@@ -115,13 +115,13 @@ input[type=submit].neutral{
 	padding: .5em 1em;
 
 	border-radius: 3px;
-	border: 1px solid $form-neutral-color;
+	border:        1px solid $form-neutral-color;
 
-	background: $bg-color center center no-repeat;
+	background:     #fff center center no-repeat;
 	text-transform: uppercase;
-	font-weight: normal;
+	font-weight:    normal;
 
-	color: darken($form-neutral-color, 15%);
+	color: $primary-color;
 
 	cursor: pointer;
 
@@ -129,10 +129,10 @@ input[type=submit].neutral{
 				border-color .1s ease-in-out,
 				background .2s ease-in-out;
 
-	&:hover, &:focus{
-		color: darken($form-neutral-color, 35%);
-		border-color: $primary-color;
-		background-color: #fff;
+	&:hover, &[data-active='1']{
+		color: #fff;
+		border-color: $form-neutral-color;
+		background-color: $form-neutral-color;
 	}
 }
 
@@ -142,7 +142,13 @@ button.grey,             .grey > button,
 input[type=button].grey, .grey > input[type=button],
 input[type=submit].grey, .grey > input[type=submit]{
 
-	border-color: $form-grey-color;
+	color: $form-grey-color;
+
+	&:hover, &[data-active='1']{
+		color:          #fff;
+		border-color:     $form-grey-color;
+		background-color: $form-grey-color;
+	}
 
 	cursor: default;
 }
@@ -152,7 +158,13 @@ button.valid,             .valid > button,
 input[type=button].valid, .valid > input[type=button],
 input[type=submit].valid, .valid > input[type=submit]{
 
-	border-color: $form-valid-color;
+	color: $form-valid-color;
+
+	&:hover, &[data-active='1']{
+		color:          #fff;
+		border-color:     $form-valid-color;
+		background-color: $form-valid-color;
+	}
 
 }
 
@@ -161,7 +173,13 @@ button.invalid,             .invalid > button,
 input[type=button].invalid, .invalid > input[type=button],
 input[type=submit].invalid, .invalid > input[type=submit]{
 
-	border-color: $form-invalid-color;
+	color: $form-invalid-color;
+
+	&:hover, &[data-active='1']{
+		color:          #fff;
+		border-color:     $form-invalid-color;
+		background-color: $form-invalid-color;
+	}
 
 }
 
@@ -170,7 +188,13 @@ button.search,             .search > button,
 input[type=button].search, .search > input[type=button],
 input[type=submit].search, .search > input[type=submit]{
 
-	border-color: $form-search-color;
+	color: $form-search-color;
+
+	&:hover, &[data-active='1']{
+		color:          #fff;
+		border-color:     $form-search-color;
+		background-color: $form-search-color;
+	}
 
 }