[webpack.ue.manage] first iface (to be updated) very ugly

This commit is contained in:
xdrm-brackets 2018-03-14 19:57:31 +01:00
parent 30940dda48
commit 4175d578b0
5 changed files with 192 additions and 66 deletions

View File

@ -1,29 +1,68 @@
<template> <template>
<div id='CONTAINER' class='card'> <div id='CONTAINER' class='list'>
<div class='list container'> <div class='list container' data-anim-incoming='1' :data-anim-bounce='gstore.nav_anim.out?1:0'>
<!-- <button @click='gstore.nav_out($router)'>Retour</button> -->
<!-- FILTERS -->
<!-- <section class='filter'>
<div>enseignant</div>
<div>volume horaire</div>
<div>formations</div>
</section> -->
<section class='filter'></section>
<!-- COURS --> <!-- COURS -->
<section <section
v-for='c in gstore.manage.cours' v-for='c in gstore.manage.cours'
data-anim-incoming='1' :data-id='c.idCours'>
:data-anim-bounce='gstore.nav_anim.out?1:0'>
<div :data-prof='c.idProf'>{{ `${c.firstName} ${c.lastName}` || 'blabla' }}</div> <div>Cours</div>
<div :data-prof='c.idProf'>{{ c.idProf ? `${c.firstName} ${c.lastName}` : 'Aucun enseignant affecté' }}</div>
<div>{{ c.volume }}</div> <div>{{ c.volume }}</div>
<div class='taglist'>
<span v-for='f in c.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
</div>
</section> </section>
<!-- TD --> <!-- TD -->
<section
v-for='td in gstore.manage.td'
:data-id='td.idTD'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'>
<div>TD</div>
<div :data-prof='td.idProf'>{{ td.idProf ? `${td.firstName} ${td.lastName}` : 'Aucun enseignant affecté' }}</div>
<div>{{ td.volume }}</div>
<div class='taglist'>
<span v-for='f in td.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
</div>
</section>
<!-- TP --> <!-- TP -->
<section
v-for='tp in gstore.manage.tp'
:data-id='tp.idTP'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'>
<div class='footer'> <div>TP</div>
<button class='neutral' @click='gstore.nav_out($router)'>Retour</button> <div :data-prof='tp.idProf'>{{ tp.idProf ? `${tp.firstName} ${tp.lastName}` : 'Aucun enseignant affecté' }}</div>
</div> <div>{{ tp.volume }}</div>
<div class='taglist'>
<span v-for='f in tp.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
</div>
</section>
</div> </div>

View File

@ -2,10 +2,10 @@
<div id='CONTAINER' class='card'> <div id='CONTAINER' class='card'>
<div class='card container'> <div class='card container' :data-anim-outgoing='gstore.nav_anim.in?1:0'>
<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='ue_view_instant_search'> <input data-anim='0' class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='ue_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 une UE'>+</button> <button data-anim='0' class='card toggle valid' :data-active='gstore.create_card?1:0' @click='gstore.create_card=!gstore.create_card' title='Créer une UE'>+</button>
<section class='valid' data-create='' v-show='gstore.create_card'> <section class='valid' data-create='' v-show='gstore.create_card'>
@ -40,7 +40,6 @@
<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-outgoing='gstore.nav_anim.in?1:0'
:data-label='ue.label'> :data-label='ue.label'>

View File

@ -18,20 +18,33 @@
z-index: 100; z-index: 100;
// card container
&.card{
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
} }
@keyframes bg-fade{
to{ background-color: lighten($bg-color, 5%); }
}
// bounce
@keyframes bounce-up{
from{ transform: scale(.95); }
to{ transform: scale(1); }
}
// 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; }
}
/* [1] List style /* [1] List style
---------------------------------*/ ---------------------------------*/
@import 'container/list'; @import 'container/list';
@ -39,4 +52,40 @@
/* [2] Card style /* [2] Card style
---------------------------------*/ ---------------------------------*/
@import 'container/card'; @import 'container/card';
// animation for navigation -> each card-list element
#CONTAINER > div.container{
& > section:not([data-anim='0']),
& > input:not([data-anim='0']),
& > h1:not([data-anim='0']),
& > button:not([data-anim='0']){
animation: bounce-up .2s ease-out;
}
&[data-anim-outgoing='1']{
& > section,
& > input,
& > h1,
& > button{ animation: outgoing .4s ease-in-out forwards; }
}
&[data-anim-incoming='1']{
& > section,
& > input,
& > h1,
& > button{ animation: incoming .4s ease-in-out; }
}
// &[data-anim-bounce='1']{
// & > section,
// & > input,
// & > h1,
// & > button{ animation: bounce-up .6s ease-in-out reverse forwards; }
// }
}

View File

@ -2,6 +2,7 @@
/* [3] Card style -> container /* [3] Card style -> container
---------------------------------*/ ---------------------------------*/
#CONTAINER.card > div.card.container{ #CONTAINER.card > div.card.container{
@ -22,7 +23,6 @@
z-index: 101; z-index: 101;
overflow: auto; overflow: auto;
/* [3.1] Card style -> instant-search /* [3.1] Card style -> instant-search
---------------------------------*/ ---------------------------------*/
& > input.instant-search{ & > input.instant-search{
@ -30,7 +30,7 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
flex: 1 0 70%; // 70% to almost fill the line flex: 1 0 80%; // 70% to almost fill the line
height: 1.2em; height: 1.2em;
margin: 1em .5em; margin: 1em .5em;
@ -57,11 +57,6 @@
} }
@keyframes bounce-up{
from{ transform: scale(.95); }
to{ transform: scale(1); }
}
/* (1) Card container */ /* (1) Card container */
& > section{ & > section{
@ -77,33 +72,11 @@
border: 1px solid transparent; border: 1px solid transparent;
box-shadow: 0 1px 1px darken(#fff, 20%); box-shadow: 0 1px 1px darken(#fff, 20%);
&:not([data-anim='0']){
animation: bounce-up .2s ease-out;
}
&.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; } &.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; }
&.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 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 forwards; }
&[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; }
&[data-anim-bounce='1']{ animation: bounce-up .6s ease-in-out reverse forwards; }
background-color: #fff; background-color: #fff;

View File

@ -2,45 +2,111 @@
/* [3] List style -> container /* [3] List style -> container
---------------------------------*/ ---------------------------------*/
#CONTAINER > div.list{ #CONTAINER.list{
animation: bg-fade .2s ease-out forwards;
}
#CONTAINER > div.list.container{
display: flex; display: flex;
// flex properties // flex properties
flex-direction: column; flex-direction: row;
justify-content: flex-start; justify-content: stretch;
align-items: flex-start;
flex-wrap: wrap;
& > *:first-child{ margin-top: 1em; }
& > *:last-child{ margin-bottom: 3em; }
/* (1) List element */ /* (1) List element */
& > section{ & > section{
display: block; flex: 1 1 95%;
margin: .3em 1em; display: flex;
margin: 0;
padding: .8em 1em; padding: .8em 1em;
border-radius: 5px / 5px; border-bottom: 1px solid #eee;
background-color: #fff; background-color: #fff;
// no border-bottom for last child
&:last-of-type{ border-bottom: 0; }
// flex properties
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
/* (1.1) Element item */
& > div{
flex: 1 1 0;
// fix
&.taglist{ margin: 0; }
}
/* (1.2) Hover animation */
transition: border-left-color .3s ease-in-out;
&:not(.filter){
border-left: .2em solid #fff;
&:hover{ border-left-color: $form-search-color; }
}
} }
/* (2) List title */
/* (2) Filter */
& > section.filter{
padding-bottom: 0;
background-color: transparent;
text-transform: uppercase;
color: #aaa;
font-size: .8em;
font-weight: bold;
text-shadow: 1px 1px 2px #fff;
& > div:after{
content: '';
display: inline-block;
position: absolute;
width: 1.5em;
height: 1.5em;
margin-top: -.25em;
margin-left: .5em;
background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
background-size: auto 100%;
&[data-filter='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
}
}
/* (3) List title */
& > h1{ & > h1{
flex: 1 0 95%;
display: inline-block; display: inline-block;
margin: 0 1.2em; margin: .8em 1.2em;
margin-top: .8em;
font-size: inherit; font-size: inherit;
color: darken($secondary-color, 5%); color: #888;
} }
/* (3) List separator */ /* (4) List separator */
& > hr{ & > hr{
display: block; display: block;
position: relative; position: relative;