[webpack.teacher.view] added 'create' card

webpack/component/teacher/view.vue

@@ -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'

webpack/scss/container.scss

@@ -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;
+
+		}
+
 	}
 
 }

webpack/scss/global.scss

@@ -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;
+}