[webpack.teacher.view] added 'remove' and 'edit' icons (to implement)

This commit is contained in:
xdrm-brackets 2018-03-07 12:12:50 +01:00
parent 68d0461d7c
commit ba30174b02
3 changed files with 62 additions and 26 deletions

View File

@ -38,6 +38,9 @@
:data-lname='prof.lastName'
:data-fname='prof.firstName'>
<div class='remove' :data-remove='prof.idProfesseur' @click="gstore.remove($event.currentTarget.getAttribute('data-remove'))"></div>
<div class='edit' :data-edit='prof.idProfesseur' @click="gstore.edit($event.currentTarget.getAttribute('data-edit'))"></div>
<span class='category'>{{ prof.categorie }}</span>
<h1 :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }}</h1>

View File

@ -10,7 +10,7 @@ $error-color: #cc5857;
/* FORMULAIRES */
$form-valid-color: #20d696;
$form-neutral-color: #b8c0c8;
$form-search-color: #e5c41d;
$form-search-color: #1d74e5;
$form-invalid-color: #ea4b35;
$form-grey-color: lighten($secondary-color, 5%);
@ -19,10 +19,10 @@ $form-grey-color: lighten($secondary-color, 5%);
// POUR RESOURCE_DISPATCHER
$rd-form-valid-color: '27a560';
$rd-form-neutral-color: '2193e6';
$rd-form-search-color: '5630ed';
$rd-form-invalid-color: 'd52918';
$rd-form-valid-color: '20d696';
$rd-form-neutral-color: 'b8c0c8';
$rd-form-search-color: '1d74e5';
$rd-form-invalid-color: 'ea4b35';
// Menu
$menu-bg: #fff;

View File

@ -163,12 +163,48 @@
&.search-hidden,
&.filter-hidden{ display: none; }
/* (2) Card generic title */
/* (2) REMOVE+EDIT button */
& > div.remove[data-remove],
& > div.edit[data-edit]{
display: inline-block;
position: absolute;
top: 1.3em;
left: calc( 100% - 2em );
width: 1em;
height: 1em;
background: url('/asset/svg/remove.svg@bbbbbb') center center no-repeat;
background-size: auto 100%;
cursor: pointer;
&:hover{
background-image: url('/asset/svg/remove.svg@#{$rd-form-invalid-color}');
}
}
/* (3) EDIT button */
& > div.edit[data-edit]{
left: calc( 100% - 2em - 1.3em );
background-image: url('/asset/svg/td.svg@bbbbbb');
background-size: 80% auto;
&:hover{
background-image: url('/asset/svg/td.svg@#{$rd-form-search-color}');
}
}
/* (4) Card generic title */
& > span.category,
& > select.category{
display: block;
position: relative;
width: calc( 100% - 3em );
margin-bottom: .5em;
@ -179,7 +215,7 @@
}
/* (2-edot) Card generic title (select) */
/* (4-edit) Card generic title (select) */
& > select.category{
margin: 0;
@ -202,7 +238,7 @@
}
/* (3) Card title */
/* (5) Card title */
& > h1{
display: flex;
@ -232,7 +268,7 @@
text-anchor: center;
}
/* (3-edit) Card title -> edit inputs */
/* (5-edit) Card title -> edit inputs */
input{
display: inline-block;
@ -257,7 +293,7 @@
}
/* (4) Card 2-column array */
/* (6) Card 2-column array */
& > div.table{
display: flex;
@ -275,7 +311,7 @@
align-items: center;
flex-wrap: nowrap;
/* (5) Column */
/* (6.1) Column */
& > div{
display: flex;
@ -296,7 +332,7 @@
align-items: center;
flex-wrap: nowrap;
/* (5.1) Column Emphasis */
/* (6.1.1) Column Emphasis */
& > span,
& > span:first-child{
display: block;
@ -307,7 +343,7 @@
font-size: 1.5em;
letter-spacing: .05em;
/* (5.1-edit) Editable text entry */
/* (6.1.1-edit) Editable text entry */
& > input{
display: inline-block;
width: 2em;
@ -323,7 +359,7 @@
}
}
/* (5.2) Column Emphasis */
/* (6.2) Column Emphasis */
& > span:last-child{
display: block;
position: relative;
@ -343,7 +379,7 @@
}
/* (6) Card footer */
/* (7) Card footer */
& > div.footer{
display: flex;
@ -370,7 +406,7 @@
flex-wrap: nowrap;
/* (6.1) Card footer element */
/* (7.1) Card footer element */
& > span{
display: flex;
@ -422,7 +458,12 @@
}
/* (6.2) Card footer separator */
/* (7.1-edit) Card button submit */
& > button{
margin: auto;
}
/* (7.2) Card footer separator */
& > hr{
display: block;
position: relative;
@ -432,17 +473,9 @@
border: 0;
background-color: darken(#fff, 10%);
}
/* (6-edit) Card button submit */
& > button{
margin: auto;
}
}
/* (6) Card sub */
/* (8) Card sub */
& > div.sub{
display: inline-block;