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 @@
- -
- - -

- - () -

- -
-
- - heures à faire -
-
- -
{{ gstore.create_err }}
- - -
- -
- - - - +

{{ $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;