[webpack.teacher.view] added 'create' card
This commit is contained in:
parent
f0a2e57394
commit
8dff413fce
|
@ -6,6 +6,38 @@
|
||||||
|
|
||||||
<div class='card container'>
|
<div class='card container'>
|
||||||
|
|
||||||
|
<section
|
||||||
|
data-id='create'
|
||||||
|
data-category=''
|
||||||
|
data-lname=''
|
||||||
|
data-fname=''>
|
||||||
|
|
||||||
|
<select class='category'>
|
||||||
|
<option value='1'>blsdblasd1</option>
|
||||||
|
<option value='2'>blsdblasd2</option>
|
||||||
|
<option value='3'>blsdblasd3</option>
|
||||||
|
<option value='4'>blsdblasd4</option>
|
||||||
|
</select>
|
||||||
|
<h1>
|
||||||
|
<input type='text' placeholder='Prénom Nom' value='Prénom Nom'>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class='table'>
|
||||||
|
<div>
|
||||||
|
<span><input type='text' placeholder='???' value='192'></span>
|
||||||
|
<span>heures à faire</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class='sub valid'>Créer l'enseignant</button>
|
||||||
|
|
||||||
|
<div class='footer'>
|
||||||
|
<span class='course'><span>Cours</span></span><hr>
|
||||||
|
<span class='td'><span>TD</span></span><hr>
|
||||||
|
<span class='tp'><span>TP</span></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
|
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
|
||||||
|
|
||||||
<section v-for='prof in gstore.professors'
|
<section v-for='prof in gstore.professors'
|
||||||
|
|
|
@ -135,7 +135,7 @@
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
display: block;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin: 1em .5em;
|
margin: 1em .5em;
|
||||||
|
@ -149,12 +149,18 @@
|
||||||
|
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
|
|
||||||
|
// flex
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
// hidden mode
|
// hidden mode
|
||||||
&.search-hidden,
|
&.search-hidden,
|
||||||
&.filter-hidden{ display: none; }
|
&.filter-hidden{ display: none; }
|
||||||
|
|
||||||
/* (2) Card generic title */
|
/* (2) Card generic title */
|
||||||
& > span.category{
|
& > span.category,
|
||||||
|
& > select.category{
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -168,15 +174,43 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (2) Card title */
|
/* (2-edot) Card generic title (select) */
|
||||||
|
& > select.category{
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
// remove border
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
// remove arrow
|
||||||
|
appearance: none;
|
||||||
|
-moz-appearance: none; /* Firefox */
|
||||||
|
-webkit-appearance: none; /* Safari and Chrome */
|
||||||
|
|
||||||
|
background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em center no-repeat;
|
||||||
|
background-size: auto 80%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* (3) Card title */
|
||||||
& > h1{
|
& > h1{
|
||||||
|
|
||||||
display: block;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
color: darken($primary-color, 5%);
|
color: darken($primary-color, 5%);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
|
||||||
|
// flex
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
&.warning:before{
|
&.warning:before{
|
||||||
content: '';
|
content: '';
|
||||||
|
|
||||||
|
@ -193,9 +227,30 @@
|
||||||
text-anchor: center;
|
text-anchor: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* (3-edit) Card title -> edit inputs */
|
||||||
|
input{
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width: 10em;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
color: darken($primary-color, 5%);
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (3) Card 2-column array */
|
/* (4) Card 2-column array */
|
||||||
& > div.table{
|
& > div.table{
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -213,7 +268,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
/* (4) Column */
|
/* (5) Column */
|
||||||
& > div{
|
& > div{
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -234,7 +289,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
/* (4.1) Column Emphasis */
|
/* (5.1) Column Emphasis */
|
||||||
|
& > span,
|
||||||
& > span:first-child{
|
& > span:first-child{
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -243,9 +299,24 @@
|
||||||
|
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
letter-spacing: .05em;
|
letter-spacing: .05em;
|
||||||
|
|
||||||
|
/* (5.1-edit) Editable text entry */
|
||||||
|
& > input{
|
||||||
|
display: inline-block;
|
||||||
|
width: 2em;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
font-size: .9em;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (4.2) Column Emphasis */
|
/* (5.2) Column Emphasis */
|
||||||
& > span:last-child{
|
& > span:last-child{
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -259,11 +330,13 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (5) Card footer */
|
/* (6) Card footer */
|
||||||
& > div.footer{
|
& > div.footer{
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -290,7 +363,7 @@
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
|
||||||
/* (5.1) Card footer element */
|
/* (6.1) Card footer element */
|
||||||
& > span{
|
& > span{
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -342,7 +415,7 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (5.2) Card footer separator */
|
/* (6.2) Card footer separator */
|
||||||
& > hr{
|
& > hr{
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -367,6 +440,22 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* (6-edit) Card button submit */
|
||||||
|
& > button.sub{
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: -.5em;
|
||||||
|
|
||||||
|
padding: .2em 1em;
|
||||||
|
|
||||||
|
color: lighten($primary-color, 20%);
|
||||||
|
|
||||||
|
align-self: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -119,6 +119,7 @@ input[type=submit].neutral{
|
||||||
|
|
||||||
background: $bg-color center center no-repeat;
|
background: $bg-color center center no-repeat;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
color: darken($form-neutral-color, 15%);
|
color: darken($form-neutral-color, 15%);
|
||||||
|
|
||||||
|
@ -221,4 +222,10 @@ a{
|
||||||
&:hover:after{
|
&:hover:after{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Textes
|
||||||
|
.grey{
|
||||||
|
color: $secondary-color;
|
||||||
}
|
}
|
Loading…
Reference in New Issue