From f14b6d4bbf870b887fb712b41f749da3b5bb4ef0 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Tue, 17 Apr 2018 17:38:32 +0200
Subject: [PATCH] [scss.container.list] fixed layout + added togglable arrows
 for filtering (ordering actually) + [ue.manage] added back button

---
 public_html/asset/svg/back.svg       | 44 ++++++++++++++++++++++++++++
 webpack/component/ue/manage.vue      | 32 +++++++++++++++-----
 webpack/scss/container/list.scss     | 44 ++++++++++++++++++----------
 webpack/scss/global/before-icon.scss | 23 +++++++++++++++
 4 files changed, 121 insertions(+), 22 deletions(-)
 create mode 100644 public_html/asset/svg/back.svg

diff --git a/public_html/asset/svg/back.svg b/public_html/asset/svg/back.svg
new file mode 100644
index 0000000..c48c3f5
--- /dev/null
+++ b/public_html/asset/svg/back.svg
@@ -0,0 +1,44 @@
+<?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"
+   height="32px"
+   id="Layer_1"
+   style="enable-background:new 0 0 32 32;"
+   version="1.1"
+   viewBox="0 0 32 32"
+   width="32px"
+   xml:space="preserve"
+   sodipodi:docname="back.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata9"><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></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs7" /><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="namedview5"
+     showgrid="false"
+     inkscape:zoom="7.375"
+     inkscape:cx="16"
+     inkscape:cy="16"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="M 12,6 C 11.469,6 11.005141,6.1930781 10.619141,6.5800781 L 2.6621094,14.537109 C 2.3341094,14.865109 2,15.271 2,16 c 0,0.729 0.2794844,1.080266 0.6464844,1.447266 l 7.9726566,7.972656 C 11.005141,25.806922 11.469,26 12,26 c 1.188,0 2,-1.016 2,-2 0,-0.516 -0.186078,-0.986859 -0.580078,-1.380859 L 8.8007812,18 H 28 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 H 8.8007812 L 13.419922,9.3808594 C 13.813922,8.9868594 14,8.516 14,8 14,7.016 13.187,6 12,6 Z"
+     id="fill-edit"
+     inkscape:connector-curvature="0" /></svg>
\ No newline at end of file
diff --git a/webpack/component/ue/manage.vue b/webpack/component/ue/manage.vue
index 319ec41..e77aad4 100644
--- a/webpack/component/ue/manage.vue
+++ b/webpack/component/ue/manage.vue
@@ -5,13 +5,17 @@
 		<div class='list container' data-anim-incoming='1' :data-anim-bounce='gstore.nav_anim.out?1:0'>
 
 
+			<section class='filter'>
+				<button class='back reflow search' @click='$router.back()'>Retour</button>
+			</section>
+
 			<!-- FILTERS -->
 			<section class='filter'>
 
-				<div>enseignant</div>
-				<div class='null'></div>
-				<div>volume horaire</div>
-				<div>formations</div>
+				<div data-filter='1'>enseignant     <span class='arrow' data-way='down'></span></div>
+				<div></div>
+				<div data-filter='0'>volume horaire <span class='arrow' data-way='down'></span></div>
+				<div data-filter='0'>formations     <span class='arrow' data-way='down'></span></div>
 
 			</section>
 
@@ -47,7 +51,13 @@
 			<!-- COURS -->
 			<section class='bcours'
 				v-for='(c,i) in gstore.manage.cours'
-				:data-id='c.idCours'>
+				:data-id='c.idCours'
+				data-anim-incoming='1'
+				:data-anim-bounce='gstore.nav_anim.out?1:0'
+
+				:data-vol='c.volume'
+				:data-form='c.formations.join(`|`)'
+				data-typ='cm'>
 
 				<div class='icon remove' @click='gstore.rem(0, i)'></div>
 				<select v-model='c.new_prof' @change='gstore.upd_prof(0, i)'>
@@ -82,7 +92,11 @@
 				v-for='(td,i) in gstore.manage.td'
 				:data-id='td.idTD'
 				data-anim-incoming='1'
-				:data-anim-bounce='gstore.nav_anim.out?1:0'>
+				:data-anim-bounce='gstore.nav_anim.out?1:0'
+
+				:data-vol='td.volume'
+				:data-form='td.formations.join(`|`)'
+				data-typ='td'>
 
 				<div class='icon remove' @click='gstore.rem(1, i)'></div>
 				<select v-model='td.new_prof' @change='gstore.upd_prof(1, i)'>
@@ -117,7 +131,11 @@
 				v-for='(tp,i) in gstore.manage.tp'
 				:data-id='tp.idTP'
 				data-anim-incoming='1'
-				:data-anim-bounce='gstore.nav_anim.out?1:0'>
+				:data-anim-bounce='gstore.nav_anim.out?1:0'
+
+				:data-vol='tp.volume'
+				:data-form='tp.formations.join(`|`)'
+				data-typ='td'>
 
 				<div class='icon remove' @click='gstore.rem(2, i)'></div>
 				<select v-model='tp.new_prof' @change='gstore.upd_prof(2, i)'>
diff --git a/webpack/scss/container/list.scss b/webpack/scss/container/list.scss
index 4f77e2a..9884b13 100644
--- a/webpack/scss/container/list.scss
+++ b/webpack/scss/container/list.scss
@@ -138,7 +138,7 @@
 
 	/* (2) Filter */
 	& > section.filter{
-		// padding-bottom: 0;
+
 
 		background-color: transparent;
 
@@ -149,25 +149,39 @@
 		font-weight: bold;
 		text-shadow: 1px 1px 2px #fff;
 
-		& > div:after{
-			content: '';
-			display: inline-block;
-			position: absolute;
-				width: 1.5em;
-				height: 1.5em;
+		& > div{
 
-			margin-top: -.25em;
-			margin-left: .5em;
+			& > span.arrow{
+				display: inline-block;
+				position: relative;
+					width: 1.5em;
+					height: 1.5em;
 
-			background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
-			background-size: auto 100%;
+				margin-bottom: -.3em;
+
+				background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
+				background-size: auto 100%;
+
+
+				&[data-way='up']{   background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
+				&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@aaaaaa'); }
+
+				cursor: pointer;
+			}
+
+			// selected filter
+			&[data-filter='1']{
+				color: $primary-color;
+
+				& > span.arrow{
+					&[data-way='up']{   background-image: url('/asset/svg/up_arrow.svg@555555'); }
+					&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@555555'); }
+				}
+
+			}
 
-			&[data-filter='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
 		}
 
-
-		& > div.null:after{ content: none; }
-
 	}
 
 	/* Tags color -> darker */
diff --git a/webpack/scss/global/before-icon.scss b/webpack/scss/global/before-icon.scss
index 2f1a016..01801ae 100644
--- a/webpack/scss/global/before-icon.scss
+++ b/webpack/scss/global/before-icon.scss
@@ -8,6 +8,7 @@
 .time,
 .pin,
 .cm,
+.back,
 .td,
 .tp{
 
@@ -183,4 +184,26 @@
 	&.search:before{  background-image: url('/asset/svg/time.svg@#{$rd-form-search-color}');  }
 
 
+}
+
+
+
+
+/* (8) BACK */
+.back{
+
+	// add icon before
+	&:before{
+		background-image: url('/asset/svg/back.svg@#{$menu-item-inactive}');
+	}
+
+	// icon color variants
+	&.neutral:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-neutral-color}'); }
+	&.invalid:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-invalid-color}'); }
+	&.valid:before{   background-image: url('/asset/svg/back.svg@#{$rd-form-valid-color}');   }
+	&.search:before{  background-image: url('/asset/svg/back.svg@#{$rd-form-search-color}');  }
+
+	// hover
+	&:hover:before{ background-image: url('/asset/svg/back.svg@ffffff'); }
+
 }
\ No newline at end of file