[webpack.ue.view][webpack.ue.manage] created 'nav_in' base animation
This commit is contained in:
parent
7472c8627e
commit
e0d4c278f4
|
@ -2,24 +2,8 @@
|
||||||
|
|
||||||
<div id='CONTAINER' class='card'>
|
<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'>
|
<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'>
|
<section class='valid' data-create='' v-show='gstore.create_card'>
|
||||||
|
|
||||||
|
|
|
@ -40,6 +40,8 @@
|
||||||
<section v-for='(ue, pi) in gstore.ues'
|
<section v-for='(ue, pi) in gstore.ues'
|
||||||
:class="gstore.edit_i==pi ? 'search' : ''"
|
:class="gstore.edit_i==pi ? 'search' : ''"
|
||||||
:data-id='ue.code'
|
: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'>
|
:data-label='ue.label'>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
|
@ -164,6 +164,32 @@
|
||||||
&.valid{ box-shadow: 0; border: 1px solid $form-valid-color; }
|
&.valid{ box-shadow: 0; border: 1px solid $form-valid-color; }
|
||||||
&.search{ box-shadow: 0; border: 1px solid $form-search-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;
|
background-color: #fff;
|
||||||
|
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
|
@ -173,6 +199,8 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
z-index: 102;
|
||||||
|
|
||||||
|
|
||||||
&[data-create]{
|
&[data-create]{
|
||||||
border: 1px solid $form-valid-color;
|
border: 1px solid $form-valid-color;
|
||||||
|
|
Loading…
Reference in New Issue