diff --git a/webpack/component/ue/manage.vue b/webpack/component/ue/manage.vue index 1e1a9d7..83d7549 100644 --- a/webpack/component/ue/manage.vue +++ b/webpack/component/ue/manage.vue @@ -2,24 +2,8 @@
-
- -
- -
{{ gname }}
- -
- {{ data.name }} -
- -
- -
-
- -
diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue index ae72e30..507b09d 100644 --- a/webpack/component/ue/view.vue +++ b/webpack/component/ue/view.vue @@ -40,6 +40,8 @@
diff --git a/webpack/data/ue.js b/webpack/data/ue.js index ce505e4..1b319c6 100644 --- a/webpack/data/ue.js +++ b/webpack/data/ue.js @@ -508,4 +508,47 @@ 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); + + }); + + }); \ No newline at end of file diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index f82bb7d..4e28eb6 100644 --- a/webpack/scss/container.scss +++ b/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;