[webpack.ue.view][webpack.ue.manage] created 'nav_in' base animation

webpack/component/ue/manage.vue

@@ -2,24 +2,8 @@
 
 	<div id='CONTAINER' class='card'>
 
-		<div class='card filter'>
-
-			<div v-for='(filter_grp, gname) in gstore.filters' :title='gname'>
-
-				<div class='fold-toggle' :data-show='gstore.filters[gname][0].visible?1:0' @click='gstore.show_fgroup(gname)' :data-count='gstore.filters[gname][0].active.length'>{{ gname }}</div>
-
-				<div class='fold'>
-					<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='gstore.toggle_filter(gname, i); gstore.filter_handler(gname);' :title='data.code'>{{ data.name }}</span>
-				</div>
-
-			</div>
-
-		</div>
-
 		<div class='card container'>
 
-			<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' title='Créer un enseignant'>+</button>
 
 			<section class='valid' data-create='' v-show='gstore.create_card'>
 

webpack/component/ue/view.vue

@@ -40,6 +40,8 @@
 			<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-label='ue.label'>
 
 

webpack/data/ue.js

@@ -509,3 +509,46 @@ gstore.add('ia_handler', function(ue_i){
 	});
 
 });
+
+
+
+
+
+/* (9) Manage navigation in
+---------------------------------------------------------*/
+/* (1) Initialize current opened UE */
+gstore.add('open_anim', {
+	center: -1,
+	scale: -1
+});
+
+/* (2) Define admin handler */
+gstore.add('nav_in', function($router, ue_i){
+
+	/* (1) Abort if wrong 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;
+
+	/* (3) Scale element */
+	(new Promise((resolve,reject) => {
+		setTimeout(() => {
+			gstore.get.open_anim.scale = ue_i;
+			resolve();
+		}, 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);
+
+	});
+
+
+});

webpack/scss/container.scss

@@ -164,6 +164,32 @@
 		&.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);
+			}
+
+		}
+
 		background-color: #fff;
 
 		color: $primary-color;
@@ -173,6 +199,8 @@
 		justify-content: space-between;
 		flex-wrap:       nowrap;
 
+		z-index: 102;
+
 
 		&[data-create]{
 			border: 1px solid $form-valid-color;