[webpack.teacher.view] can now toggle 'CREATE' card + fixed layout now 'CREATE' card is !!exactly!! the same size as others
This commit is contained in:
xdrm-brackets
parent
c21b744986
commit
e04649a8f5
|
|
@ -2,11 +2,13 @@
|
|||
|
||||
<div id='CONTAINER'>
|
||||
|
||||
<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
|
||||
|
||||
<div class='card container'>
|
||||
|
||||
<section class='valid' data-create=''>
|
||||
<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'>+</button>
|
||||
|
||||
<section class='valid' data-create='' v-show='gstore.create_card'>
|
||||
|
||||
<select class='category' v-model='gstore.create_cat'>
|
||||
<option selected='selected' disabled='disabled' value='-'>Catégorie d'enseignant</option>
|
||||
|
|
|
|||
|
|
@ -209,49 +209,52 @@ gstore.add('is_handler', function(e){
|
|||
|
||||
/* (5) Manage instant create
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Initialize inputs */
|
||||
/* (1) Initialize toggle show */
|
||||
gstore.add('create_card', false);
|
||||
|
||||
/* (2) Initialize inputs */
|
||||
gstore.add('create_cat', '-');
|
||||
gstore.add('create_name', '');
|
||||
gstore.add('create_cas', '');
|
||||
gstore.add('create_h', '');
|
||||
|
||||
/* (2) Initialize error message */
|
||||
/* (3) Initialize error message */
|
||||
gstore.add('create_err_valid', false);
|
||||
gstore.add('create_err', '');
|
||||
|
||||
/* (3) Define create handler */
|
||||
/* (4) Define create handler */
|
||||
gstore.add('ic_handler', function(prof_id){
|
||||
|
||||
/* (3.1) Trim text input */
|
||||
/* (4.1) Trim text input */
|
||||
gstore.get.create_name = gstore.get.create_name.trim();
|
||||
gstore.get.create_cas = gstore.get.create_cas.trim().toLowerCase();
|
||||
gstore.get.create_h = gstore.get.create_h.trim();
|
||||
|
||||
/* (3.2) Store values locally */
|
||||
/* (4.2) Store values locally */
|
||||
var cat = gstore.get.create_cat;
|
||||
var name = gstore.get.create_name.split(' ');
|
||||
var cas = gstore.get.create_cas;
|
||||
var hour = gstore.get.create_h;
|
||||
|
||||
/* (3.3) Init client-side check */
|
||||
/* (4.3) Init client-side check */
|
||||
var errors = [];
|
||||
|
||||
/* (3.3.1) Check category */
|
||||
/* (4.3.1) Check category */
|
||||
if( isNaN(cat) ) errors.push('La catégorie de l\'enseignant est manquante');
|
||||
|
||||
/* (3.3.2) Check name */
|
||||
/* (4.3.2) Check name */
|
||||
if( name.length !== 2 || name[0].length < 2 || name[1].length < 2 )
|
||||
errors.push('Le nom doit suivre le format "Prénom Nom"');
|
||||
|
||||
/* (3.3.3) Check CAS login */
|
||||
/* (4.3.3) Check CAS login */
|
||||
if( !/^([a-z]{4,16})?$/.test(cas) )
|
||||
errors.push('L\'identifiant doit être vide ou comprendre de 4 à 16 lettres');
|
||||
|
||||
/* (3.3.4) Check hours */
|
||||
/* (4.3.4) Check hours */
|
||||
if( hour === '' || isNaN(hour) || hour < 0 )
|
||||
errors.push('Le nombre d\'heures doit être un entier positif.');
|
||||
|
||||
/* (3.4) Show first error only (for 2s) */
|
||||
/* (4.4) Show first error only (for 2s) */
|
||||
if( errors.length > 0 ){
|
||||
|
||||
gstore.get.create_err = errors[0];
|
||||
|
|
@ -262,7 +265,7 @@ gstore.add('ic_handler', function(prof_id){
|
|||
|
||||
|
||||
|
||||
/* (4.1) Création de la requête */
|
||||
/* (4.5.1) Création de la requête */
|
||||
var rq = {
|
||||
firstName: name[0],
|
||||
lastName: name[1],
|
||||
|
|
@ -276,24 +279,24 @@ gstore.add('ic_handler', function(prof_id){
|
|||
if( cas.length > 0 ) rq.casLogin = cas;
|
||||
|
||||
|
||||
/* (4.2) Send request */
|
||||
/* (4.5.2) Send request */
|
||||
api.call('POST professor', rq, function(rs){
|
||||
|
||||
console.log(rs);
|
||||
|
||||
/* (4.2.1) Manage 'already exist' error */
|
||||
/* (4.5.2.1) Manage 'already exist' error */
|
||||
if( rs.error == 29 ){
|
||||
gstore.get.create_err = 'Le couple Nom-Prénom est déja utilisé.';
|
||||
return setTimeout(() => gstore.add('create_err', ''), 2000);
|
||||
}
|
||||
|
||||
/* (4.2.2) Manage other errors */
|
||||
/* (4.5.2.2) Manage other errors */
|
||||
if( rs.error !== 0 ){
|
||||
gstore.get.create_err = 'erreur ('+rs.error+') Impossible de créer l\'enseignant';
|
||||
return setTimeout(() => gstore.add('create_err', ''), 2000);
|
||||
}
|
||||
|
||||
/* (4.2.3) Show that user is created */
|
||||
/* (4.5.2.3) Show that user is created */
|
||||
// display all is ok
|
||||
gstore.add('create_err_valid', true);
|
||||
gstore.add('create_err', 'L\'enseignant a été créé, il s\'affichera au prochain rechargement');
|
||||
|
|
|
|||
|
|
@ -79,43 +79,16 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [2] Card style -> instant-search
|
||||
---------------------------------*/
|
||||
#CONTAINER > input.card.instant-search{
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
left: .5em;
|
||||
// 100% - filtr - padding - border
|
||||
width: calc( 100% - 20em - 1em - 6*1em );
|
||||
height: calc( 3em - 2*.5em - 2*1px);
|
||||
|
||||
margin: 0;
|
||||
padding: .5em 1em;
|
||||
|
||||
border-radius: 3px / 3px;
|
||||
background-color: #fff;
|
||||
|
||||
box-shadow: 0 2px 2px darken(#fff, 10%);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* [3] Card style -> container
|
||||
---------------------------------*/
|
||||
#CONTAINER > div.card.container{
|
||||
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 3em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc( 100% - 20em );
|
||||
min-height: calc( 100% - 3em );
|
||||
min-height: 100%;
|
||||
|
||||
// flex properties
|
||||
flex-direction: row;
|
||||
|
|
@ -127,13 +100,41 @@
|
|||
overflow: hidden;
|
||||
|
||||
|
||||
/* [3.1] Card style -> instant-search
|
||||
---------------------------------*/
|
||||
& > input.instant-search{
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
// - marg - padd - [NEW] - separ
|
||||
flex: 0 1 calc( 100% - 2*1em - 2*.5em - 2em - 2*1em );
|
||||
|
||||
margin: 1em .5em;
|
||||
padding: .5em 1em;
|
||||
|
||||
border-radius: 3px / 3px;
|
||||
background-color: #fff;
|
||||
|
||||
box-shadow: 0 2px 2px darken(#fff, 10%);
|
||||
|
||||
& + button.card.toggle{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
flex: 0 1 calc( 2em - 2*.5em );
|
||||
|
||||
margin: 1em .5em;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* (1) Card container */
|
||||
& > section{
|
||||
|
||||
// flex-grow: 1;
|
||||
flex-basis: 15em;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
flex: 1 1 0;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -142,7 +143,7 @@
|
|||
padding: 1.5em;
|
||||
|
||||
border-radius: 3px / 3px;
|
||||
// border: 1px solid darken(#fff, 10%);
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 1px 1px darken(#fff, 20%);
|
||||
|
||||
box-shadow: 0 1px 1px darken(#fff, 20%);
|
||||
|
|
@ -240,8 +241,8 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: -.4em; // emulate no <select>
|
||||
margin-top: -.8em; // replace as if not a select
|
||||
margin-bottom: -.4em; // fix layout for following elements
|
||||
margin-top: -1em; // replace as if not a select
|
||||
margin-bottom: -.3em; // fix layout for following elements
|
||||
|
||||
// remove border
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -117,11 +117,11 @@ input[type=submit].neutral{
|
|||
border-radius: 3px;
|
||||
border: 1px solid $form-neutral-color;
|
||||
|
||||
background: $bg-color center center no-repeat;
|
||||
background: #fff center center no-repeat;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
|
||||
color: darken($form-neutral-color, 15%);
|
||||
color: $primary-color;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -129,10 +129,10 @@ input[type=submit].neutral{
|
|||
border-color .1s ease-in-out,
|
||||
background .2s ease-in-out;
|
||||
|
||||
&:hover, &:focus{
|
||||
color: darken($form-neutral-color, 35%);
|
||||
border-color: $primary-color;
|
||||
background-color: #fff;
|
||||
&:hover, &[data-active='1']{
|
||||
color: #fff;
|
||||
border-color: $form-neutral-color;
|
||||
background-color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,7 +142,13 @@ button.grey, .grey > button,
|
|||
input[type=button].grey, .grey > input[type=button],
|
||||
input[type=submit].grey, .grey > input[type=submit]{
|
||||
|
||||
color: $form-grey-color;
|
||||
|
||||
&:hover, &[data-active='1']{
|
||||
color: #fff;
|
||||
border-color: $form-grey-color;
|
||||
background-color: $form-grey-color;
|
||||
}
|
||||
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -152,7 +158,13 @@ button.valid, .valid > button,
|
|||
input[type=button].valid, .valid > input[type=button],
|
||||
input[type=submit].valid, .valid > input[type=submit]{
|
||||
|
||||
color: $form-valid-color;
|
||||
|
||||
&:hover, &[data-active='1']{
|
||||
color: #fff;
|
||||
border-color: $form-valid-color;
|
||||
background-color: $form-valid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -161,7 +173,13 @@ button.invalid, .invalid > button,
|
|||
input[type=button].invalid, .invalid > input[type=button],
|
||||
input[type=submit].invalid, .invalid > input[type=submit]{
|
||||
|
||||
color: $form-invalid-color;
|
||||
|
||||
&:hover, &[data-active='1']{
|
||||
color: #fff;
|
||||
border-color: $form-invalid-color;
|
||||
background-color: $form-invalid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -170,7 +188,13 @@ button.search, .search > button,
|
|||
input[type=button].search, .search > input[type=button],
|
||||
input[type=submit].search, .search > input[type=submit]{
|
||||
|
||||
color: $form-search-color;
|
||||
|
||||
&:hover, &[data-active='1']{
|
||||
color: #fff;
|
||||
border-color: $form-search-color;
|
||||
background-color: $form-search-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue