new design with link solution ??

webpack/component/ue/view.vue

@@ -1,38 +1,29 @@
 <template>
 
-    <div id='CONTAINER' class='card' style="top: 0; height: 100%">
+    <div id='CONTAINER' class='list'>
 
-        <div class="card container" style="width: 100%">
-            <section v-if='gstore.ues.length <= 0'>Aucun enseignant trouvé</section>
+		<!-- <input class='list instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
+
+		<section v-if='gstore.ues.length <= 0'>Aucun enseignant trouvé</section> -->
 
 		<section v-for='ue in gstore.ues' :data-id='ue.code'>
-                <span class='category'>{{ ue.code }}</span>
-                <h1>{{ ue.label }}</h1>
 
-                <div class='table'>
-                    <div>
-                        <span>{{ue.volumeCours}}</span>
-                        <span>heures de cours</span>
-                    </div>
-                    <div>
-                        <span>{{ue.volumeTD}}</span>
-                        <span>heures de TD</span>
-                    </div>
-                    <div>
-                        <span>{{ue.volumeTP}}</span>
-                        <span>heures de TP</span>
-                    </div>
+			<div class='main'>{{ ue.code }}</div>
+			<div>{{ ue.label }}</div>
+
+			<div class='tag list'>
+				<a class='tag'
+					:data-none='ue.volumeCours>0?0:1'
+					:data-good='ue.volumeCours >= Math.max(ue.volumeTD+ue.volumeTP)?1:0'>{{ ue.volumeCours }}h</a>
+				<a class='tag'
+					:data-none='ue.volumeTD>0?0:1'
+					:data-good='ue.volumeTD >= Math.max(ue.volumeCours+ue.volumeTP)?1:0'>{{ ue.volumeTD }}h</a>
+				<a class='tag'
+					:data-none='ue.volumeTP>0?0:1'
+					:data-good='ue.volumeTP >= Math.max(ue.volumeCours+ue.volumeTD)?1:0' >{{ ue.volumeTP }}h</a>
 			</div>
 
-                <div class='sub'><strong>ZOU</strong> équivalents TD</div>
-
-                <div class='footer'>
-                    <span :class="(ue.volumeCours == 0) ? 'course' : 'course active'">{{ ue.volumeCours }}</span><hr>
-                    <span :class="(ue.volumeTD    == 0) ? 'td'     : 'td active'">{{ ue.volumeTD }}</span><hr>
-                    <span :class="(ue.volumeTP    == 0) ? 'tp'     : 'tp active'">{{ ue.volumeTP }}</span>
-                </div>
 		</section>
-        </div>
 
     </div>
 

webpack/scss/container.scss

@@ -24,7 +24,7 @@
 
 /* [1] List style
 ---------------------------------*/
-#CONTAINER > div.list{
+#CONTAINER.list{
 	display: flex;
 
 	// flex properties
@@ -34,43 +34,112 @@
 	& > *:first-child{ margin-top: 1em; }
 	& > *:last-child{ margin-bottom: 3em; }
 
-	/* (1) List element */
+	/* (1) List line */
 	& > section{
 
-		display: block;
+		display: flex;
 
 		margin: .3em 1em;
-		padding: .8em 1em;
+		padding: .5em 1em;
 
 		border-radius: 5px / 5px;
 
 		background-color: #fff;
 
-	}
+		// flex
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		flex-wrap: nowrap;
 
-	/* (2) List title */
-	& > h1{
+
+		/* (2) List item */
+		& > div{
 			display: inline-block;
-
-		margin: 0 1.2em;
-		margin-top: .8em;
-
-		font-size: inherit;
-		color: darken($secondary-color, 5%);
-
-	}
-
-	/* (3) List separator */
-	& > hr{
-		display: block;
 			position: relative;
 
-		margin: 1em 1.5em;
+			flex: 1 1 0;
 
-		border: 0;
-		border-bottom: 2px solid darken($bg-color, 5%);
+			margin: .5em .5em;
+
+			font-size: .9em;
+
+
+			/* (3) Tag List */
+			&.tag.list{
+				display: flex;
+
+				flex-direction: row;
+				justify-content: flex-start;
+				align-items: flex-start;
+				flex-wrap: nowrap;
+
+				flex-shrink: 1;
+
+				/* (3.1) Visible tags */
+				& > .tag{
+					display: inline-block;
+					position: relative;
+
+					flex: 0 1 3em;
+
+					margin: 0 .2em;
+					padding: .2em .5em;
+
+					border-radius: 3px / 3px;
+					background-color: #f4f8f9;
+
+					color: #8298a3;
+					font-size: .9em;
+					white-space: nowrap;
+					text-align: center;
+
+					&[data-normal='1']{
+						color: #ffbb44;
+						background-color: #fff8ec;
 					}
 
+					&[data-good='1']{
+						color: #7ace4c;
+						background-color: #f1faed;
+					}
+
+					&[data-none='1']{
+						color: #f33155;
+						background-color: #feeaee;
+					}
+
+				}
+
+			}
+
+		}
+
+	}
+
+	// /* (2) List title */
+	// & > h1{
+	// 	display: inline-block;
+
+	// 	margin: 0 1.2em;
+	// 	margin-top: .8em;
+
+	// 	font-size: inherit;
+	// 	color: darken($secondary-color, 5%);
+
+	// }
+
+	// /* (3) List separator */
+	// & > hr{
+	// 	display: block;
+	// 	position: relative;
+
+	// 	margin: 1em 1.5em;
+
+	// 	border: 0;
+	// 	border-bottom: 2px solid darken($bg-color, 5%);
+	// }
+
 }
 
 

webpack/scss/global.scss

@@ -206,6 +206,8 @@ a{
 	color: inherit;
 	text-decoration: none;
 
+	cursor: pointer;
+
 	&:after{
 		content: '';
 		display: block;
@@ -213,7 +215,7 @@ a{
 		width: 0%;
 		height: .1em;
 
-		background-color: #ddd;
+		background-color: currentColor;
 
 		transition: width .1s ease-in-out;