[webpack.ue.manage] first iface (to be updated) very ugly
This commit is contained in:
xdrm-brackets
parent
30940dda48
commit
4175d578b0
|
|
@ -1,29 +1,68 @@
|
|||
<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 -->
|
||||
<section
|
||||
v-for='c in gstore.manage.cours'
|
||||
data-anim-incoming='1'
|
||||
:data-anim-bounce='gstore.nav_anim.out?1:0'>
|
||||
:data-id='c.idCours'>
|
||||
|
||||
<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 class='taglist'>
|
||||
<span v-for='f in c.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<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'>
|
||||
<button class='neutral' @click='gstore.nav_out($router)'>Retour</button>
|
||||
</div>
|
||||
<div>TP</div>
|
||||
<div :data-prof='tp.idProf'>{{ tp.idProf ? `${tp.firstName} ${tp.lastName}` : 'Aucun enseignant affecté' }}</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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
<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'>
|
||||
<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>
|
||||
<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 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'>
|
||||
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
<section v-for='(ue, pi) in gstore.ues'
|
||||
:class="gstore.edit_i==pi ? 'search' : ''"
|
||||
:data-id='ue.code'
|
||||
:data-anim-outgoing='gstore.nav_anim.in?1:0'
|
||||
:data-label='ue.label'>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,20 +18,33 @@
|
|||
|
||||
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
|
||||
---------------------------------*/
|
||||
@import 'container/list';
|
||||
|
|
@ -40,3 +53,39 @@
|
|||
/* [2] Card style
|
||||
---------------------------------*/
|
||||
@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; }
|
||||
// }
|
||||
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
|
||||
|
||||
|
||||
/* [3] Card style -> container
|
||||
---------------------------------*/
|
||||
#CONTAINER.card > div.card.container{
|
||||
|
|
@ -22,7 +23,6 @@
|
|||
z-index: 101;
|
||||
overflow: auto;
|
||||
|
||||
|
||||
/* [3.1] Card style -> instant-search
|
||||
---------------------------------*/
|
||||
& > input.instant-search{
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
display: inline-block;
|
||||
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;
|
||||
|
||||
margin: 1em .5em;
|
||||
|
|
@ -57,11 +57,6 @@
|
|||
|
||||
}
|
||||
|
||||
@keyframes bounce-up{
|
||||
from{ transform: scale(.95); }
|
||||
to{ transform: scale(1); }
|
||||
}
|
||||
|
||||
/* (1) Card container */
|
||||
& > section{
|
||||
|
||||
|
|
@ -77,33 +72,11 @@
|
|||
border: 1px solid transparent;
|
||||
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; }
|
||||
&.valid{ box-shadow: 0; border: 1px solid $form-valid-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;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,45 +2,111 @@
|
|||
|
||||
|
||||
|
||||
|
||||
/* [3] List style -> container
|
||||
---------------------------------*/
|
||||
#CONTAINER > div.list{
|
||||
#CONTAINER.list{
|
||||
animation: bg-fade .2s ease-out forwards;
|
||||
}
|
||||
|
||||
#CONTAINER > div.list.container{
|
||||
display: flex;
|
||||
|
||||
// flex properties
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > *:first-child{ margin-top: 1em; }
|
||||
& > *:last-child{ margin-bottom: 3em; }
|
||||
|
||||
/* (1) List element */
|
||||
& > section{
|
||||
|
||||
display: block;
|
||||
flex: 1 1 95%;
|
||||
|
||||
margin: .3em 1em;
|
||||
display: flex;
|
||||
|
||||
margin: 0;
|
||||
padding: .8em 1em;
|
||||
|
||||
border-radius: 5px / 5px;
|
||||
|
||||
border-bottom: 1px solid #eee;
|
||||
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{
|
||||
|
||||
flex: 1 0 95%;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
margin: 0 1.2em;
|
||||
margin-top: .8em;
|
||||
margin: .8em 1.2em;
|
||||
|
||||
font-size: inherit;
|
||||
color: darken($secondary-color, 5%);
|
||||
color: #888;
|
||||
|
||||
}
|
||||
|
||||
/* (3) List separator */
|
||||
/* (4) List separator */
|
||||
& > hr{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
|
|||
Loading…
Reference in New Issue