[webpack.ue.manage] first iface (to be updated) very ugly

webpack/component/ue/manage.vue

@@ -1,29 +1,68 @@
 <template>
 
-	<div id='CONTAINER' class='card'>
+	<div id='CONTAINER' class='list'>
 
-		<div class='list container'>
+		<div class='list container' data-anim-incoming='1' :data-anim-bounce='gstore.nav_anim.out?1:0'>
+
+			<!-- <button @click='gstore.nav_out($router)'>Retour</button> -->
+
+			<!-- FILTERS -->
+			<!-- <section class='filter'>
+
+				<div>enseignant</div>
+				<div>volume horaire</div>
+				<div>formations</div>
+
+			</section> -->
+			<section class='filter'></section>
 
 			<!-- COURS -->
 			<section
 				v-for='c in gstore.manage.cours'
-				data-anim-incoming='1'
+				:data-id='c.idCours'>
-				:data-anim-bounce='gstore.nav_anim.out?1:0'>
 
-				<div :data-prof='c.idProf'>{{ `${c.firstName} ${c.lastName}` || 'blabla' }}</div>
+				<div>Cours</div>
+				<div :data-prof='c.idProf'>{{ c.idProf ? `${c.firstName} ${c.lastName}` : 'Aucun enseignant affecté' }}</div>
 				<div>{{ c.volume }}</div>
+				<div class='taglist'>
+					<span v-for='f in c.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
+				</div>
 
 			</section>
 
 
 			<!-- TD -->
+			<section
+				v-for='td in gstore.manage.td'
+				:data-id='td.idTD'
+				data-anim-incoming='1'
+				:data-anim-bounce='gstore.nav_anim.out?1:0'>
+
+				<div>TD</div>
+				<div :data-prof='td.idProf'>{{ td.idProf ? `${td.firstName} ${td.lastName}` : 'Aucun enseignant affecté' }}</div>
+				<div>{{ td.volume }}</div>
+				<div class='taglist'>
+					<span v-for='f in td.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
+				</div>
+
+			</section>
 
 
 			<!-- TP -->
+			<section
+				v-for='tp in gstore.manage.tp'
+				:data-id='tp.idTP'
+				data-anim-incoming='1'
+				:data-anim-bounce='gstore.nav_anim.out?1:0'>
 
-			<div class='footer'>
+				<div>TP</div>
-				<button class='neutral' @click='gstore.nav_out($router)'>Retour</button>
+				<div :data-prof='tp.idProf'>{{ tp.idProf ? `${tp.firstName} ${tp.lastName}` : 'Aucun enseignant affecté' }}</div>
+				<div>{{ tp.volume }}</div>
+				<div class='taglist'>
+					<span v-for='f in tp.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
 				</div>
+
+			</section>
 		</div>
 
 

webpack/component/ue/view.vue

@@ -2,10 +2,10 @@
 
     <div id='CONTAINER' class='card'>
 
-        <div class='card container'>
+        <div class='card container' :data-anim-outgoing='gstore.nav_anim.in?1:0'>
 
-			<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='ue_view_instant_search'>
+			<input  data-anim='0' class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='ue_view_instant_search'>
-			<button class='card toggle valid' :data-active='gstore.create_card?1:0' @click='gstore.create_card=!gstore.create_card' title='Créer une UE'>+</button>
+			<button data-anim='0' class='card toggle valid' :data-active='gstore.create_card?1:0' @click='gstore.create_card=!gstore.create_card' title='Créer une UE'>+</button>
 
 			<section class='valid' data-create='' v-show='gstore.create_card'>
 
@@ -40,7 +40,6 @@
 			<section v-for='(ue, pi) in gstore.ues'
 				:class="gstore.edit_i==pi ? 'search' : ''"
 				:data-id='ue.code'
-				:data-anim-outgoing='gstore.nav_anim.in?1:0'
 				:data-label='ue.label'>
 
 

webpack/scss/container.scss

@@ -18,18 +18,31 @@
 
 	z-index: 100;
 
-
-	// card container
-	&.card{
-		display: flex;
-
-		flex-direction: row;
-		justify-content: flex-start;
-		flex-wrap: wrap;
 }
 
+
+
+@keyframes bg-fade{
+	to{ background-color: lighten($bg-color, 5%); }
 }
 
+// bounce
+@keyframes bounce-up{
+	from{ transform: scale(.95); }
+	to{   transform: scale(1);  }
+}
+
+// animation for incoming element
+@keyframes incoming{
+	from{ transform: translateY(-2em);  opacity: 0; }
+	to{ transform: translateY(0); opacity: 1; }
+}
+
+// animation for outgoing element
+@keyframes outgoing{
+	from{ transform: translateY(0);  opacity: 1; }
+	to{   transform: translateY(2em); opacity: 0; }
+}
 
 
 /* [1] List style
@@ -40,3 +53,39 @@
 /* [2] Card style
 ---------------------------------*/
 @import 'container/card';
+
+
+
+
+
+// animation for navigation -> each card-list element
+#CONTAINER > div.container{
+
+	& > section:not([data-anim='0']),
+	& > input:not([data-anim='0']),
+	& > h1:not([data-anim='0']),
+	& > button:not([data-anim='0']){
+		animation: bounce-up .2s ease-out;
+	}
+
+
+	&[data-anim-outgoing='1']{
+		& > section,
+		& > input,
+		& > h1,
+		& > button{ animation: outgoing .4s ease-in-out forwards; }
+	}
+	&[data-anim-incoming='1']{
+		& > section,
+		& > input,
+		& > h1,
+		& > button{ animation: incoming .4s ease-in-out; }
+	}
+	// &[data-anim-bounce='1']{
+	// 	& > section,
+	// 	& > input,
+	// 	& > h1,
+	// 	& > button{ animation: bounce-up .6s ease-in-out reverse forwards; }
+	// }
+
+}

webpack/scss/container/card.scss

@@ -2,6 +2,7 @@
 
 
 
+
 /* [3] Card style -> container
 ---------------------------------*/
 #CONTAINER.card > div.card.container{
@@ -22,7 +23,6 @@
 	z-index: 101;
 	overflow: auto;
 
-
 	/* [3.1] Card style -> instant-search
 	---------------------------------*/
 	& > input.instant-search{
@@ -30,7 +30,7 @@
 		display: inline-block;
 		position: relative;
 
-		flex: 1 0 70%; // 70% to almost fill the line
+		flex: 1 0 80%; // 70% to almost fill the line
 		height: 1.2em;
 
 		margin: 1em .5em;
@@ -57,11 +57,6 @@
 
 	}
 
-	@keyframes bounce-up{
-		from{ transform: scale(.95); }
-		to{   transform: scale(1);  }
-	}
-
 	/* (1) Card container */
 	& > section{
 
@@ -77,33 +72,11 @@
 		border: 1px solid transparent;
 		box-shadow: 0 1px 1px darken(#fff, 20%);
 
-		&:not([data-anim='0']){
-			animation: bounce-up .2s ease-out;
-		}
-
 
 		&.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; }
 		&.valid{   box-shadow: 0; border: 1px solid $form-valid-color; }
 		&.search{  box-shadow: 0; border: 1px solid $form-search-color; }
 
-		// animation for incoming element
-		@keyframes incoming{
-			from{ transform: translateY(-2em);  opacity: 0; }
-			to{ transform: translateY(0); opacity: 1; }
-		}
-
-		// animation for outgoing element
-		@keyframes outgoing{
-			from{ transform: translateY(0);  opacity: 1; }
-			to{   transform: translateY(2em); opacity: 0; }
-		}
-
-		// animation to nav in
-		&[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out forwards; }
-		&[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; }
-
-		&[data-anim-bounce='1']{ animation: bounce-up .6s ease-in-out reverse forwards; }
-
 
 		background-color: #fff;
 

webpack/scss/container/list.scss

@@ -2,45 +2,111 @@
 
 
 
+
 /* [3] List style -> container
 ---------------------------------*/
-#CONTAINER > div.list{
+#CONTAINER.list{
+	animation: bg-fade .2s ease-out forwards;
+}
+
+#CONTAINER > div.list.container{
 	display: flex;
 
 	// flex properties
-	flex-direction: column;
+	flex-direction:  row;
-	justify-content: flex-start;
+	justify-content: stretch;
+	align-items:     flex-start;
+	flex-wrap:       wrap;
 
-	& > *:first-child{ margin-top: 1em; }
-	& > *:last-child{ margin-bottom: 3em; }
 
 	/* (1) List element */
 	& > section{
 
-		display: block;
+		flex: 1 1 95%;
 
-		margin: .3em 1em;
+		display: flex;
+
+		margin: 0;
 		padding: .8em 1em;
 
-		border-radius: 5px / 5px;
+		border-bottom: 1px solid #eee;
-
 		background-color: #fff;
 
+		// no border-bottom for last child
+		&:last-of-type{ border-bottom: 0; }
+
+		// flex properties
+		flex-direction:  row;
+		justify-content: flex-start;
+		align-items:     center;
+		flex-wrap:       nowrap;
+
+		/* (1.1) Element item */
+		& > div{
+			flex: 1 1 0;
+
+			// fix
+			&.taglist{ margin: 0; }
 		}
 
-	/* (2) List title */
+		/* (1.2) Hover animation */
+		transition: border-left-color .3s ease-in-out;
+		&:not(.filter){
+			border-left: .2em solid #fff;
+
+			&:hover{ border-left-color: $form-search-color; }
+
+		}
+	}
+
+
+	/* (2) Filter */
+	& > section.filter{
+		padding-bottom: 0;
+
+		background-color: transparent;
+
+		text-transform: uppercase;
+
+		color:       #aaa;
+		font-size:   .8em;
+		font-weight: bold;
+		text-shadow: 1px 1px 2px #fff;
+
+		& > div:after{
+			content: '';
+			display: inline-block;
+			position: absolute;
+				width: 1.5em;
+				height: 1.5em;
+
+			margin-top: -.25em;
+			margin-left: .5em;
+
+			background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
+			background-size: auto 100%;
+
+			&[data-filter='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
+		}
+
+	}
+
+
+	/* (3) List title */
 	& > h1{
+
+		flex: 1 0 95%;
+
 		display: inline-block;
 
-		margin: 0 1.2em;
+		margin: .8em 1.2em;
-		margin-top: .8em;
 
 		font-size: inherit;
-		color: darken($secondary-color, 5%);
+		color: #888;
 
 	}
 
-	/* (3) List separator */
+	/* (4) List separator */
 	& > hr{
 		display: block;
 		position: relative;