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 @@
-
-
-
-
-
-
-
-
+
{{ $route.params.code }}
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 @@
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;