From b85a158078b4b60d939824ad71a9c2267ee45feb Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Tue, 13 Mar 2018 15:43:43 +0100
Subject: [PATCH] [webpack.ue.view][webpack.ue.manage] created 'nav_in' base
 animation (subtle)

---
 webpack/component/ue/manage.vue | 32 +--------------------------
 webpack/component/ue/view.vue   |  3 +--
 webpack/data/ue.js              | 17 +++++---------
 webpack/scss/container.scss     | 39 +++++++++++++--------------------
 4 files changed, 23 insertions(+), 68 deletions(-)

diff --git a/webpack/component/ue/manage.vue b/webpack/component/ue/manage.vue
index 83d7549..32f4db3 100644
--- a/webpack/component/ue/manage.vue
+++ b/webpack/component/ue/manage.vue
@@ -4,37 +4,7 @@
 
 		<div class='card container'>
 
-
-			<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>
-					<option v-for='cat in gstore.categories' :value='cat.idCategorie'>{{ cat.labelCategorie }}</option>
-				</select>
-				<h1>
-					<input type='text' placeholder='Prénom Nom' v-model='gstore.create_name'>
-					<span data-visible='1'>(<input type='text' placeholder='identifiant' v-model='gstore.create_cas'>)</span>
-				</h1>
-
-				<div class='table'>
-					<div>
-						<span><input type='text' placeholder='???' v-model='gstore.create_h'></span>
-						<span>heures à faire</span>
-					</div>
-				</div>
-
-				<div :class="gstore.create_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.create_err_valid?1:0'>{{ gstore.create_err }}</div>
-
-				<div class='footer'>
-					<button class='valid' @click='gstore.ic_handler()'>Créer l'enseignant</button>
-				</div>
-			</section>
-
-			<section>
-
-
-
-
+			<section data-anim-incoming='1'>
 				<h1 >{{ $route.params.code }}</h1>
 
 
diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue
index 507b09d..789ad29 100644
--- a/webpack/component/ue/view.vue
+++ b/webpack/component/ue/view.vue
@@ -40,8 +40,7 @@
 			<section v-for='(ue, pi) in gstore.ues'
 				:class="gstore.edit_i==pi ? 'search' : ''"
 				:data-id='ue.code'
-				:data-anim-center='gstore.open_anim.center == pi ? 1 : 0'
-				:data-anim-scale='gstore.open_anim.scale == pi ? 1 : 0'
+				:data-anim-outgoing='gstore.open_anim.fade < 0 ? 0 : 1'
 				:data-label='ue.label'>
 
 
diff --git a/webpack/data/ue.js b/webpack/data/ue.js
index 1b319c6..ca4d41e 100644
--- a/webpack/data/ue.js
+++ b/webpack/data/ue.js
@@ -518,8 +518,7 @@ gstore.add('ia_handler', function(ue_i){
 ---------------------------------------------------------*/
 /* (1) Initialize current opened UE */
 gstore.add('open_anim', {
-	center: -1,
-	scale: -1
+	fade: -1
 });
 
 /* (2) Define admin handler */
@@ -529,24 +528,20 @@ gstore.add('nav_in', function($router, ue_i){
 	if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null)
 		return;
 
-	/* (2) Set element to center */
-	gstore.get.open_anim.center = ue_i;
+	/* (2) Set element to fade others */
+	gstore.get.open_anim.fade = ue_i;
 
 	/* (3) Scale element */
 	(new Promise((resolve,reject) => {
 		setTimeout(() => {
-			gstore.get.open_anim.scale = ue_i;
-			resolve();
+			$router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
+			gstore.get.open_anim.fade  = -1;
 		}, 500 );
 
 	/* (4) Load page */
 	})).then(() => {
 
-		setTimeout(() => {
-			$router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
-			gstore.get.open_anim.center = -1;
-			gstore.get.open_anim.scale  = -1;
-		}, 400);
+		console.log('blu');
 
 	});
 
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 4e28eb6..4b8432a 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -164,32 +164,23 @@
 		&.valid{   box-shadow: 0; border: 1px solid $form-valid-color; }
 		&.search{  box-shadow: 0; border: 1px solid $form-search-color; }
 
-		// animation to center of container
-		&[data-anim-center='1']{
-			position: absolute;
-				top: 50%;
-				left: 50%;
-
-			transform: translateX(-50%) translateY(-50%) scale(1);
-
-			padding: 1.5em;
-
-			border: 1px solid #bbb;
-			box-shadow: 0 0 5vw #ddd;
-
-			z-index: 103;
-
-			transition: transform .2s ease-in-out,
-						padding   .4s ease-in-out;
-
-			// animation to scale to container
-			&[data-anim-scale='1']{
-				padding: 10em;
-				transform: translateX(-50%) translateY(-50%) scale(1.5);
-			}
-
+		// animation for incoming element
+		@keyframes incoming{
+			from{ transform: translateY(-2em);  opacity: 0; }
+			to{ transform: translateY(0); opacity: 1; }
 		}
 
+		// animation for outgoing element
+		@keyframes outgoing{
+			from{ transform: translateY(0);  opacity: 1; }
+			to{ transform: translateY(2em); opacity: 0; }
+		}
+
+		// animation to nav in
+		&[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out; }
+		&[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; }
+
+
 		background-color: #fff;
 
 		color: $primary-color;