From ea2f2a84ae1df122a4f5e5e8f5ae649563470022 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Wed, 7 Mar 2018 16:45:59 +0100
Subject: [PATCH] new design with link solution ??

---
 webpack/component/ue/view.vue | 17 +++++++-----
 webpack/scss/container.scss   | 51 +++++++++++++++++------------------
 webpack/scss/global.scss      |  4 ++-
 3 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue
index 477eab1..09b51a9 100644
--- a/webpack/component/ue/view.vue
+++ b/webpack/component/ue/view.vue
@@ -11,13 +11,16 @@
 			<div class='main'>{{ ue.code }}</div>
 			<div>{{ ue.label }}</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 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>
 
 		</section>
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 6aeca7d..eff06dd 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -66,50 +66,47 @@
 
 
 			/* (3) Tag List */
-			&.tag.list[data-count]{
+			&.tag.list{
 				display: flex;
 
-				flex-direction: column;
+				flex-direction: row;
 				justify-content: flex-start;
 				align-items: flex-start;
+				flex-wrap: nowrap;
 
-
-				border-radius: 3px / 3px;
-				padding: .5em;
-
-				background-color: #ccc;
-
-				&:before{
-					content: attr(data-count);
-				}
+				flex-shrink: 1;
 
 				/* (3.1) Visible tags */
-				& > div.tag{
-					display: block;
+				& > .tag{
+					display: inline-block;
 					position: relative;
 
+					flex: 0 1 3em;
+
 					margin: 0 .2em;
 					padding: .2em .5em;
 
-					// border-radius: 3px / 3px;
-					// background-color: #f4f8f9;
+					border-radius: 3px / 3px;
+					background-color: #f4f8f9;
 
-					color: #999;
-					font-size: .8em;
+					color: #8298a3;
+					font-size: .9em;
 					white-space: nowrap;
-				}
+					text-align: center;
 
+					&[data-normal='1']{
+						color: #ffbb44;
+						background-color: #fff8ec;
+					}
 
-				/* (3.2) Hidden view */
-				&.hidden{
+					&[data-good='1']{
+						color: #7ace4c;
+						background-color: #f1faed;
+					}
 
-					height: 1.4em;
-					flex: 0 0 1.4em;
-
-					border-radius: 50% / 50%;
-
-					& > div.tag{
-						display: none;
+					&[data-none='1']{
+						color: #f33155;
+						background-color: #feeaee;
 					}
 
 				}
diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index 3a4fe17..2af7717 100644
--- a/webpack/scss/global.scss
+++ b/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;