From 50b857c3a6d9c21f5b5ce9a61fb00e0a49444283 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Wed, 7 Mar 2018 11:56:36 +0100
Subject: [PATCH] first commit - draft

---
 webpack/component/ue/view.vue |  44 +++++--------
 webpack/scss/container.scss   | 112 ++++++++++++++++++++++++++++------
 2 files changed, 108 insertions(+), 48 deletions(-)

diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue
index c549486..477eab1 100644
--- a/webpack/component/ue/view.vue
+++ b/webpack/component/ue/view.vue
@@ -1,38 +1,26 @@
 <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-for='ue in gstore.ues' :data-id='ue.code'>
-                <span class='category'>{{ ue.code }}</span>
-                <h1>{{ ue.label }}</h1>
+		<section v-if='gstore.ues.length <= 0'>Aucun enseignant trouvé</section> -->
 
-                <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>
+		<section v-for='ue in gstore.ues' :data-id='ue.code'>
 
-                <div class='sub'><strong>ZOU</strong> équivalents TD</div>
+			<div class='main'>{{ ue.code }}</div>
+			<div>{{ ue.label }}</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>{{ ue.volumeCours }}</div>
+			<div>{{ ue.volumeTD }}</div>
+			<div>{{ ue.volumeTP }}</div>
+			<div class='tag list hidden' data-count='6'>
+				<div class='tag'>L1 Info</div>
+				<div class='tag'>M1 Info</div>
+				<div class='tag'>M2 Info (S2)</div>
+			</div>
+
+		</section>
 
     </div>
 
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 4c52063..e09d3f3 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -24,7 +24,7 @@
 
 /* [1] List style
 ---------------------------------*/
-#CONTAINER > div.list{
+#CONTAINER.list{
 	display: flex;
 
 	// flex properties
@@ -34,42 +34,114 @@
 	& > *: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{
-		display: inline-block;
 
-		margin: 0 1.2em;
-		margin-top: .8em;
+		/* (2) List item */
+		& > div{
+			display: inline-block;
+			position: relative;
 
-		font-size: inherit;
-		color: darken($secondary-color, 5%);
+			flex: 1 1 0;
+
+			margin: .5em .5em;
+
+			font-size: .9em;
+
+
+			/* (3) Tag List */
+			&.tag.list[data-count]{
+				display: flex;
+
+				flex-direction: column;
+				justify-content: flex-start;
+				align-items: flex-start;
+
+
+				border-radius: 3px / 3px;
+				padding: .5em;
+
+				background-color: #ccc;
+
+				&:before{
+					content: attr(data-count);
+				}
+
+				/* (3.1) Visible tags */
+				& > div.tag{
+					display: block;
+					position: relative;
+
+					margin: 0 .2em;
+					padding: .2em .5em;
+
+					// border-radius: 3px / 3px;
+					// background-color: #f4f8f9;
+
+					color: #999;
+					font-size: .8em;
+					white-space: nowrap;
+				}
+
+
+				/* (3.2) Hidden view */
+				&.hidden{
+
+					height: 1.4em;
+					flex: 0 0 1.4em;
+
+					border-radius: 50% / 50%;
+
+					& > div.tag{
+						display: none;
+					}
+
+				}
+
+			}
+
+		}
 
 	}
 
-	/* (3) List separator */
-	& > hr{
-		display: block;
-		position: relative;
+	// /* (2) List title */
+	// & > h1{
+	// 	display: inline-block;
 
-		margin: 1em 1.5em;
+	// 	margin: 0 1.2em;
+	// 	margin-top: .8em;
 
-		border: 0;
-		border-bottom: 2px solid darken($bg-color, 5%);
-	}
+	// 	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%);
+	// }
 
 }