[webpack.teacher.view] added 'create' card
This commit is contained in:
xdrm-brackets
parent
f0a2e57394
commit
8dff413fce
|
|
@ -6,6 +6,38 @@
|
|||
|
||||
<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-for='prof in gstore.professors'
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
|
||||
display: block;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
margin: 1em .5em;
|
||||
|
|
@ -149,12 +149,18 @@
|
|||
|
||||
color: $primary-color;
|
||||
|
||||
// flex
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
// hidden mode
|
||||
&.search-hidden,
|
||||
&.filter-hidden{ display: none; }
|
||||
|
||||
/* (2) Card generic title */
|
||||
& > span.category{
|
||||
& > span.category,
|
||||
& > select.category{
|
||||
|
||||
display: block;
|
||||
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{
|
||||
|
||||
display: block;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
color: darken($primary-color, 5%);
|
||||
font-size: 1em;
|
||||
|
||||
// flex
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&.warning:before{
|
||||
content: '';
|
||||
|
||||
|
|
@ -193,9 +227,30 @@
|
|||
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{
|
||||
|
||||
display: flex;
|
||||
|
|
@ -213,7 +268,7 @@
|
|||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
/* (4) Column */
|
||||
/* (5) Column */
|
||||
& > div{
|
||||
|
||||
display: flex;
|
||||
|
|
@ -234,7 +289,8 @@
|
|||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
/* (4.1) Column Emphasis */
|
||||
/* (5.1) Column Emphasis */
|
||||
& > span,
|
||||
& > span:first-child{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -243,9 +299,24 @@
|
|||
|
||||
font-size: 1.5em;
|
||||
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{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -259,11 +330,13 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* (5) Card footer */
|
||||
/* (6) Card footer */
|
||||
& > div.footer{
|
||||
|
||||
display: flex;
|
||||
|
|
@ -290,7 +363,7 @@
|
|||
flex-wrap: nowrap;
|
||||
|
||||
|
||||
/* (5.1) Card footer element */
|
||||
/* (6.1) Card footer element */
|
||||
& > span{
|
||||
|
||||
display: flex;
|
||||
|
|
@ -342,7 +415,7 @@
|
|||
|
||||
}
|
||||
|
||||
/* (5.2) Card footer separator */
|
||||
/* (6.2) Card footer separator */
|
||||
& > hr{
|
||||
display: block;
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
|
||||
color: darken($form-neutral-color, 15%);
|
||||
|
||||
|
|
@ -222,3 +223,9 @@ a{
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Textes
|
||||
.grey{
|
||||
color: $secondary-color;
|
||||
}
|
||||
Loading…
Reference in New Issue