[webpack.teacher.view] added generic CSS+HTML semantic for 'filter' + 'instant search'

public_html/asset/svg/checkbox.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="1024"
+   width="768"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="checkbox.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="0.23046875"
+     inkscape:cx="384"
+     inkscape:cy="512"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 640,192 256,576 128,448 0,576 256,832 768,320 Z"
+     id="fill-edit"
+     inkscape:connector-curvature="0" />
+</svg>

webpack/component/teacher/view.vue

@@ -1,6 +1,11 @@
 <template>
 
-	<div id='CONTAINER' class='card'>
+	<div id='CONTAINER'>
+
+		<input class='card instant-search neutral' type='text' placeholder='Recherche instantannée'>
+
+		<div class='card container'>
+
 
 			<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
 
@@ -30,6 +35,31 @@
 
 		</div>
 
+
+
+		<div class='card filter'>
+			<div title='UEs'>
+				<span class='active'>Systèmes d'Information</span>
+				<span>Introduction aux systèmes numériques</span>
+				<span class='active'>Graphes</span>
+				<span>Introduction à la méthode B</span>
+			</div>
+
+			<div title='Formations'>
+				<span>Master TI</span>
+				<span class='active'>Master TI - Année 2</span>
+				<span>Master TI - Année 2</span>
+			</div>
+
+			<div title='Catégories'>
+				<span>Maîtres de conférence</span>
+				<span class='active'>Intervenant externe</span>
+				<span>Autres</span>
+			</div>
+		</div>
+
+	</div>
+
 </template>
 
 

webpack/scss/container.scss

@@ -7,14 +7,14 @@
 	position: absolute;
 		top: $header-height;
 		left: $menu-width;
-		min-height: calc( 100% - #{$header-height} );
+		height: calc( 100% - #{$header-height} );
 		width: calc( 100% - #{$menu-width} );
-		height: auto;
 
 
 	background-color: $bg-color;
 
 	overflow: hidden;
+	overflow-y: auto;
 
 	z-index: 100;
 
@@ -24,7 +24,7 @@
 
 /* [1] List style
 ---------------------------------*/
-#CONTAINER.list{
+#CONTAINER > div.list{
 	display: flex;
 
 	// flex properties
@@ -77,11 +77,45 @@
 
 
 
-/* [2] Card style
+
+
+
+
+/* [2] Card style -> instant-search
 ---------------------------------*/
-#CONTAINER.card{
+#CONTAINER > input.card.instant-search{
+
+	display: block;
+	position: absolute;
+		top: .5em;
+		left: .5em;
+		//           100% - filtr - padding - border
+		width: calc( 100% - 20em - 1em - 6*1em );
+		height: calc( 3em - 2*.5em  - 2*1px);
+
+	margin: 0;
+	padding: .5em 1em;
+
+	border-radius: 3px / 3px;
+	background-color: #fff;
+
+	box-shadow: 0 2px 2px darken(#fff, 10%);
+
+}
+
+
+
+
+/* [3] Card style -> container
+---------------------------------*/
+#CONTAINER > div.card.container{
 
 	display: flex;
+	position: absolute;
+		top: 3em;
+		left: 0;
+		width: calc( 100% - 20em );
+		min-height: calc( 100% - 3em );
 
 	// flex properties
 	flex-direction:  row;
@@ -89,6 +123,9 @@
 	align-items:     flex-start;
 	flex-wrap:       wrap;
 
+	z-index: 101;
+	overflow: hidden;
+
 
 	/* (1) Card container */
 	& > section{
@@ -96,6 +133,7 @@
 		// flex-grow: 1;
 		flex-basis: 15em;
 		flex-shrink: 1;
+		flex-grow: 1;
 
 		display: block;
 		position: relative;
@@ -318,3 +356,104 @@
 	}
 
 }
+
+
+
+
+/* [4] Card style -> filter
+---------------------------------*/
+#CONTAINER > div.card.filter{
+
+	display: flex;
+	position: fixed;
+		top: #{$header-height + 1em};
+		left: calc( 100% - 20em + 1em );
+		//           deflt - marg - scrollBarOffset
+		width: calc( 20em - 2*1em - 1em );
+		height: calc( 100% - 2*1em - #{$header-height} );
+
+	border-radius: 3px / 3px;
+	background-color: #fff;
+
+	box-shadow: 0 2px 2px darken(#fff, 10%);
+
+	// flex
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	flex-wrap: nowrap;
+
+
+	/* (1) Filter Group */
+	& > div[title]{
+
+		display: block;
+		position: relative;
+
+		margin: 1em;
+
+		/* (1.1) Title content */
+		&:before{
+			content: attr(title);
+
+			display: block;
+			position: relative;
+
+			margin-bottom: 1em;
+
+			font-size: .8em;
+			color: darken($secondary-color, 10%);
+			text-transform: uppercase;
+			letter-spacing: .05em;
+
+		}
+
+		/* (1.2) Filter element */
+		& > span{
+
+			display: block;
+			position: relative;
+
+			text-indent: 1.5em;
+			margin-bottom: 1em;
+
+			cursor: default;
+
+			&:hover{ text-decoration: underline; }
+
+			/* (1.3) Pseudo-checkbox */
+			&:before{
+				content: '';
+
+				display: block;
+				position: absolute;
+					width: calc( 1em - 2*2px );
+					height: calc( 1em - 2*2px );
+
+				border-radius: 3px / 3px;
+				border: 2px solid $secondary-color;
+
+				background: #fff center center no-repeat;
+				background-size: auto 80%;
+
+				transition: background .2s ease-in-out,
+							border-color .2s ease-in-out;
+
+				cursor: pointer;
+			}
+
+			/* (1.4) Active pseudo-checkbox */
+			&.active:before{
+
+				background-image: url('/asset/svg/checkbox.svg@ffffff');
+				background-color: $form-valid-color;
+				border-color: $form-valid-color;
+
+			}
+
+		}
+
+	}
+
+
+}

webpack/scss/global.scss

@@ -15,11 +15,11 @@ select.neutral{
 	padding: .5em 1em;
 
 	border-radius: 3px;
-	border: 1px dashed $form-neutral-color;
+	border: 1px solid $form-neutral-color;
 
 	background-color: #fff;
 
-	color: $form-neutral-color;
+	color: lighten($primary-color, 15%);
 
 	transition: border .2s ease-in-out,
 				color .2s ease-in-out;