[ue.view] updated 'required' colors + 'CM', 'TD', 'TP' with group count + when errors in bold red + error incicators

public_html/asset/svg/time.svg

@@ -0,0 +1,45 @@
+<?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"
+   enable-background="new 0 0 24 24"
+   height="24px"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 24 24"
+   width="24px"
+   xml:space="preserve"
+   sodipodi:docname="time.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata13"><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 /></cc:Work></rdf:RDF></metadata><defs
+     id="defs11" /><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="namedview9"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="m 12,2.0344069 c -5.5018378,0 -9.9631017,4.4620943 -9.9631017,9.9655931 0,5.503499 4.4612639,9.965593 9.9631017,9.965593 5.502668,0 9.963102,-4.462094 9.963102,-9.965593 0,-5.5034988 -4.460434,-9.9655931 -9.963102,-9.9655931 z m 3.664016,13.8762581 -0.290663,0.290663 c -0.241665,0.241666 -0.649424,0.253292 -0.903547,0.02408 l -3.753707,-3.28449 C 10.460316,12.71254 10.266817,12.244987 10.283427,11.902835 l 0.347965,-5.9245446 c 0.01827,-0.3429825 0.313086,-0.6220191 0.656068,-0.6220191 h 0.40942 c 0.342982,0 0.636967,0.2790366 0.653577,0.6211886 l 0.28485,4.9279861 c 0.01744,0.342982 0.217582,0.830466 0.444299,1.08708 l 2.610985,3.012931 c 0.226718,0.256614 0.215921,0.663542 -0.02657,0.905208 z"
+     id="fill-edit"
+     inkscape:connector-curvature="0"
+     style="clip-rule:evenodd;fill-rule:evenodd;stroke-width:0.83046609" /></svg>

webpack/component/ue/manage.vue

@@ -45,7 +45,7 @@
 
 
 			<!-- COURS -->
-			<section class='cours'
+			<section class='bcours'
 				v-for='(c,i) in gstore.manage.cours'
 				:data-id='c.idCours'>
 
@@ -78,7 +78,7 @@
 
 
 			<!-- TD -->
-			<section class='td'
+			<section class='btd'
 				v-for='(td,i) in gstore.manage.td'
 				:data-id='td.idTD'
 				data-anim-incoming='1'
@@ -113,7 +113,7 @@
 
 
 			<!-- TP -->
-			<section class='tp'
+			<section class='btp'
 				v-for='(tp,i) in gstore.manage.tp'
 				:data-id='tp.idTP'
 				data-anim-incoming='1'

webpack/component/ue/view.vue

@@ -62,15 +62,34 @@
 				<!-- endif -->
 
 				<!-- if VIEW MODE -->
-				<h1 v-show='gstore.edit_i!=pi' :class='ue.required?`pin`:`pin neutral`'><span :data-strike='ue.disabled?1:0'>{{ ue.label }}</span><span :data-visible='1'>({{ ue.code }})</span></h1>
+				<h1 v-show='gstore.edit_i!=pi' :class='ue.required?`pin`:`pin disabled`' :title='ue.required?`obligatoire`:`optionnelle`'><span :data-strike='ue.disabled?1:0'>{{ ue.label }}</span><span :data-visible='1'>({{ ue.code }})</span></h1>
 				<!-- if EDIT MODE -->
-				<h1 v-show='gstore.edit_i==pi' :class="ue.required ? 'warning' : ''">
+				<h1 v-show='gstore.edit_i==pi' :class='ue.required?`pin`:`pin disabled`'>
 					<input type='text' placeholder='Libellé' v-model='gstore.edit_label'>
 					<!-- <span :data-visible='1'>({{ ue.code }})</span> -->
 					<span data-visible='1'>(<input type='text' placeholder='code' v-model='gstore.edit_code'>)</span>
 				</h1>
 				<!-- endif -->
 
+				<!-- if VIEW MODE -->
+				<div class='table little' v-show='gstore.edit_i!=pi'>
+					<div>
+						<span class='active reflow' :data-error='ue.nbrCours!=ue.nbrProfCours || ue.modCours != 0?1:0'>{{ ue.nbrCours }} CM</span>
+						<span v-show='ue.nbrCours!=ue.nbrProfCours' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
+						<span v-show='ue.modCours != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
+					</div>
+					<div>
+						<span class='active reflow' :data-error='ue.nbrTD!=ue.nbrProfTD || ue.modTD != 0?1:0'>{{ ue.nbrTD }} TD</span>
+						<span v-show='ue.nbrTD!=ue.nbrProfTD' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
+						<span v-show='ue.modTD != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
+					</div>
+					<div>
+						<span class='active reflow' :data-error='ue.nbrTP!=ue.nbrProfTP || ue.modTP != 0?1:0'>{{ ue.nbrTP }} TP</span>
+						<span v-show='ue.nbrTP!=ue.nbrProfTP' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
+						<span v-show='ue.modTP != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
+					</div>
+				</div>
+
 
 				<!-- if VIEW MODE -->
 				<div v-show='gstore.edit_i!=pi' class='taglist'>
@@ -82,25 +101,6 @@
 				<div v-show='gstore.edit_i==pi' :class="gstore.edit_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.edit_err_valid?1:0'>{{ gstore.edit_err }}</div>
 				<!-- endif -->
 
-				<div class='footer'>
-						<!-- if VIEW MODE -->
-						<span v-show='gstore.edit_i!=pi' :class="(ue.volumeCours == 0) ? 'course' : 'course active'">{{ ue.volumeCours }}h <span>Cours</span></span>
-						<hr v-show='gstore.edit_i!=pi'>
-						<span v-show='gstore.edit_i!=pi' :class="(ue.volumeTD    == 0) ? 'td'     : 'td active'">{{ ue.volumeTD }}h <span>TD</span></span>
-						<hr v-show='gstore.edit_i!=pi'>
-						<span v-show='gstore.edit_i!=pi' :class="(ue.volumeTP    == 0) ? 'tp'     : 'tp active'">{{ ue.volumeTP }}h <span>TP</span></span>
-
-						<!-- if EDIT MODE -->
-						<span v-show='gstore.edit_i==pi' class='course'><input type='text' placeholder='???' v-model='gstore.edit_vol.c'><span>Cours</span></span>
-						<hr v-show='gstore.edit_i==pi'>
-						<span v-show='gstore.edit_i==pi' class='td'><input type='text' placeholder='???' v-model='gstore.edit_vol.td'><span>TD</span></span>
-						<hr v-show='gstore.edit_i==pi'>
-						<span v-show='gstore.edit_i==pi' class='tp'><input type='text' placeholder='???' v-model='gstore.edit_vol.tp'><span>TP</span></span>
-
-						<!-- endif -->
-				</div>
-
-
 
 				<!-- if VIEW MODE -->
 				<div class='footer' v-show='gstore.edit_i!=pi'>
@@ -114,7 +114,10 @@
 				<!-- endif -->
 
 				<div class='info'>
-					<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales
+					<strong class='cm reflow'>{{ ue.volumeCours}}</strong> CM
+					<strong class='td reflow'>{{ ue.volumeTD}}</strong> TD
+					<strong class='tp reflow'>{{ ue.volumeTP }}</strong> TP →
+					<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong>
 				</div>
 
 			</section>

webpack/scss/container/card.scss

@@ -215,8 +215,8 @@
 					z-index: 104;
 
 					&:hover{                  background-image: url('/asset/svg/pin-disabled.svg@555555'); }
-					&[data-active='1']{       background-image: url('/asset/svg/pin.svg@ea4b35'); }
+					&[data-active='1']{       background-image: url('/asset/svg/pin.svg@f4bd18'); }
-					&[data-active='1']:hover{ background-image: url('/asset/svg/pin.svg@c44130'); }
+					&[data-active='1']:hover{ background-image: url('/asset/svg/pin.svg@f4a118'); }
 				}
 
 			}
@@ -284,6 +284,8 @@
 			color: darken($primary-color, 5%);
 			font-size: 1em;
 
+			margin: .4em 0;
+
 			// flex
 			flex-direction:  row;
 			justify-content: flex-start;
@@ -372,9 +374,16 @@
 			align-items: center;
 			flex-wrap: nowrap;
 
+			&.little{
+				font-size: .7em;
+				white-space: nowrap;
+			}
+
 			/* (6.1) Column */
 			& > div{
 
+				flex: 1;
+
 				display: flex;
 				position: relative;
 					height: 2.3em;
@@ -389,7 +398,7 @@
 
 				// flex properties
 				flex-direction: row;
-				justify-content: space-between;
+				justify-content: center;
 				align-items: center;
 				flex-wrap: nowrap;
 
@@ -421,7 +430,7 @@
 				}
 
 				/* (6.2) Column Emphasis */
-				& > span:last-child{
+				& > span:last-child:not(.notlast){
 					display: block;
 					position: relative;
 					min-width: 4em;
@@ -599,20 +608,20 @@
 
 			display: block;
 			position: relative;
-				margin-top:  1.9em;
+				margin-top:  2.1em;
-				margin-left: -1.9em;
+				margin-left: -2.1em;
 				height:      auto;
-				width:       calc( 100% + 2*1.9em - 2*1em);
+				width:       calc( 100% + 2*2.1em - 2*1em);
 
-			margin-bottom: -1.9em;
+			margin-bottom: -2.1em;
 			padding: .3em 1em;
 
 			border-top: 1px solid #f3f3f3;
 
 			background-color: darken(#fafbfd,1%);
 
-			font-size: .8em;
+			font-size: .7em;
-			color: #999;
+			color: #bbb;
 		}
 
 	}

webpack/scss/container/list.scss

@@ -60,9 +60,9 @@
 			&.create:hover{ border-left-color: $form-valid-color; }
 
 			&:hover,
-			&.cours:hover{ border-left-color: $form-search-color;  }
+			&.bcours:hover{ border-left-color: $form-search-color;  }
-			&.td:hover{    border-left-color: $form-valid-color;   }
+			&.btd:hover{    border-left-color: $form-valid-color;   }
-			&.tp:hover{    border-left-color: $form-invalid-color; }
+			&.btp:hover{    border-left-color: $form-invalid-color; }
 
 		}
 

webpack/scss/global.scss

@@ -13,6 +13,7 @@
 @import 'global/tag';
 
 
+.error, [data-error='1']{ font-weight: bold; color: $form-invalid-color; }
 
 
 
@@ -61,4 +62,47 @@ a{
 .strike{
 	text-decoration: line-through;
 	opacity: .5;
+}
+
+
+[data-tooltip]{
+
+	position: relative;
+
+	cursor: pointer;
+
+	&:after{
+		content: attr(data-tooltip);
+
+		display: block;
+		position: absolute;
+			top: calc( 100% + .3em );
+			left: 50%;
+
+		margin-left: -.1em;
+
+		padding: .4em .6em;
+
+		border-radius: 3px / 3px;
+
+		box-shadow: 0 0 .5em 0 #fff;
+
+		font-size: .7em;
+		color: #ddd;
+
+		background-color: #444;
+
+		transform: translateX(-50%) translateY(-50%) scale(0);
+
+		transition: transform .1s ease-in-out;
+
+		z-index: 1000;
+	}
+
+	&:hover:not([data-tooltip='']):after{
+		transform: translateX(-50%) translateY(0) scale(1);
+	}
+
+
+
 }

webpack/scss/global/before-icon.scss

@@ -4,7 +4,12 @@
 
 /* (1) Warning icon */
 .warning,
-.pin{
+.user,
+.time,
+.pin,
+.cm,
+.td,
+.tp{
 
 	// add icon before
 	&:before{
@@ -21,6 +26,30 @@
 		background-size: auto 90%;
 	}
 
+	&.nospace:before{
+		margin-right: 0;
+	}
+
+	&.reflow{
+
+		white-space: nowrap;
+
+		&:before{
+			font-size: 1.2em;
+			background-position: center bottom;
+			background-size: auto 70%;
+		}
+
+	}
+
+	&.big{
+
+		&:before{
+			font-size: 1.5em;
+		}
+
+	}
+
 	// icon color variants
 	&.neutral:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-neutral-color}'); }
 	&.valid:before{   background-image: url('/asset/svg/warning.svg@#{$rd-form-valid-color}');   }
@@ -40,12 +69,118 @@
 
 	// add icon before
 	&:before{
-		background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
+		background-image: url('/asset/svg/pin.svg@f4bd18');
 	}
 
 	// icon color variants
+	&.disabled:before{ background-image: url('/asset/svg/pin-disabled.svg@#{$rd-form-neutral-color}'); }
 	&.neutral:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}'); }
 	&.valid:before{   background-image: url('/asset/svg/pin.svg@#{$rd-form-valid-color}');   }
 	&.search:before{  background-image: url('/asset/svg/pin.svg@#{$rd-form-search-color}');  }
 
+}
+
+
+
+
+/* (3) CM */
+.cm{
+
+	// add icon before
+	&:before{
+		background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}');
+	}
+
+	&.active:before{  background-image: url('/asset/svg/course.svg@5bb8f0');  }
+
+	// icon color variants
+	&.neutral:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-neutral-color}'); }
+	&.valid:before{   background-image: url('/asset/svg/course.svg@#{$rd-form-valid-color}');   }
+	&.search:before{  background-image: url('/asset/svg/course.svg@#{$rd-form-search-color}');  }
+
+
+}
+
+
+
+
+/* (4) TD */
+.td{
+
+	// add icon before
+	&:before{
+		background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}');
+	}
+
+	&.active:before{  background-image: url('/asset/svg/td.svg@20b565');  }
+
+	// icon color variants
+	&.neutral:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-neutral-color}'); }
+	&.valid:before{   background-image: url('/asset/svg/td.svg@#{$rd-form-valid-color}');   }
+	&.search:before{  background-image: url('/asset/svg/td.svg@#{$rd-form-search-color}');  }
+
+
+}
+
+
+
+
+/* (5) TP */
+.tp{
+
+	// add icon before
+	&:before{
+		background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}');
+	}
+
+	&.active:before{  background-image: url('/asset/svg/tp.svg@e85456');  }
+
+	// icon color variants
+	&.neutral:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-neutral-color}'); }
+	&.valid:before{   background-image: url('/asset/svg/tp.svg@#{$rd-form-valid-color}');   }
+	&.search:before{  background-image: url('/asset/svg/tp.svg@#{$rd-form-search-color}');  }
+
+
+}
+
+
+
+
+/* (6) USER */
+.user{
+
+	// add icon before
+	&:before{
+		background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}');
+	}
+
+
+	// icon color variants
+	&.neutral:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-neutral-color}'); }
+	&.invalid:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-invalid-color}'); }
+	&.valid:before{   background-image: url('/asset/svg/teacher.svg@#{$rd-form-valid-color}');   }
+	&.search:before{  background-image: url('/asset/svg/teacher.svg@#{$rd-form-search-color}');  }
+
+
+}
+
+
+
+
+/* (7) TIME */
+.time{
+
+	// add icon before
+	&:before{
+		background-image: url('/asset/svg/time.svg@#{$menu-item-inactive}');
+	}
+
+
+	// icon color variants
+	&.neutral:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-neutral-color}'); }
+	&.invalid:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-invalid-color}'); }
+	&.valid:before{   background-image: url('/asset/svg/time.svg@#{$rd-form-valid-color}');   }
+	&.search:before{  background-image: url('/asset/svg/time.svg@#{$rd-form-search-color}');  }
+
+
 }