mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webpack/component/teacher/view.vue
View File

@ -38,6 +38,9 @@
:data-lname='prof.lastName' :data-lname='prof.lastName'
:data-fname='prof.firstName'> :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> <span class='category'>{{ prof.categorie }}</span>
<h1 :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }}</h1> <h1 :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }}</h1>

10
webpack/scss/constants.scss
View File

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

75
webpack/scss/container.scss
View File

@ -163,12 +163,48 @@
&.search-hidden, &.search-hidden,
&.filter-hidden{ display: none; } &.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, & > span.category,
& > select.category{ & > select.category{
display: block; display: block;
position: relative; position: relative;
width: calc( 100% - 3em );
margin-bottom: .5em; margin-bottom: .5em;
@ -179,7 +215,7 @@
} }
/* (2-edot) Card generic title (select) */ /* (4-edit) Card generic title (select) */
& > select.category{ & > select.category{
margin: 0; margin: 0;
@ -202,7 +238,7 @@
} }
/* (3) Card title */ /* (5) Card title */
& > h1{ & > h1{
display: flex; display: flex;
@ -232,7 +268,7 @@
text-anchor: center; text-anchor: center;
} }
/* (3-edit) Card title -> edit inputs */ /* (5-edit) Card title -> edit inputs */
input{ input{
display: inline-block; display: inline-block;
@ -257,7 +293,7 @@
} }
/* (4) Card 2-column array */ /* (6) Card 2-column array */
& > div.table{ & > div.table{
display: flex; display: flex;
@ -275,7 +311,7 @@
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
/* (5) Column */ /* (6.1) Column */
& > div{ & > div{
display: flex; display: flex;
@ -296,7 +332,7 @@
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
/* (5.1) Column Emphasis */ /* (6.1.1) Column Emphasis */
& > span, & > span,
& > span:first-child{ & > span:first-child{
display: block; display: block;
@ -307,7 +343,7 @@
font-size: 1.5em; font-size: 1.5em;
letter-spacing: .05em; letter-spacing: .05em;
/* (5.1-edit) Editable text entry */ /* (6.1.1-edit) Editable text entry */
& > input{ & > input{
display: inline-block; display: inline-block;
width: 2em; width: 2em;
@ -323,7 +359,7 @@
} }
} }
/* (5.2) Column Emphasis */ /* (6.2) Column Emphasis */
& > span:last-child{ & > span:last-child{
display: block; display: block;
position: relative; position: relative;
@ -343,7 +379,7 @@
} }
/* (6) Card footer */ /* (7) Card footer */
& > div.footer{ & > div.footer{
display: flex; display: flex;
@ -370,7 +406,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
/* (6.1) Card footer element */ /* (7.1) Card footer element */
& > span{ & > span{
display: flex; 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{ & > hr{
display: block; display: block;
position: relative; position: relative;
@ -432,17 +473,9 @@
border: 0; border: 0;
background-color: darken(#fff, 10%); background-color: darken(#fff, 10%);
} }
/* (6-edit) Card button submit */
& > button{
margin: auto;
}
} }
/* (8) Card sub */
/* (6) Card sub */
& > div.sub{ & > div.sub{
display: inline-block; display: inline-block;