Merge pull request #36 from JustalK/pre-dev

[FEATURE] Adding all the functionnality of the slider
JustalK · Nov 2, 2020 · 8acacde · 8acacde
2 parents 2e2552b + 678eb83
commit 8acacde
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 16 deletions.
diff --git a/dev/index.js b/dev/index.js
diff --git a/src/assets/less/back.less b/src/assets/less/back.less
@@ -24,8 +24,8 @@
 .back {
 	& a {
 		position: absolute;
-		left: 40px;
-		top: 35px;
+		left: -120px;
+		top: 50px;
 		width: 50px;
 		height: 50px;
 		cursor: pointer;
@@ -41,8 +41,8 @@
 
 	& span {
 		position: absolute;
-		left: 76px;
-		top: 76px;
+		left: -86px;
+		top: 89px;
 		transform: rotateZ(-45deg);
 		font-size: 14px;
 		color: @background-bloc-2;

diff --git a/src/assets/less/libs/mixins.less b/src/assets/less/libs/mixins.less
@@ -13,6 +13,10 @@
 	width: 100%;
 }
 
+.if(@condition, @equal, @property, @value) when (@condition = @equal) {
+	@{property}: @value;
+}
+
 .transition(@args) {
 	-webkit-transition: @args;
 	-moz-transition: @args;

diff --git a/src/assets/less/portfolio.less b/src/assets/less/portfolio.less
@@ -5,6 +5,7 @@
 	height: 100%;
 	max-width: 1000px;
 	margin: auto;
+	position: relative;
 
 	& > span {
 		margin-top: 20px;

diff --git a/src/assets/less/sliders.less b/src/assets/less/sliders.less
@@ -10,8 +10,78 @@
 	}
 }
 
+.position-arrow(@pos_y) {
+	position: absolute;
+	@{pos_y}: -120px;
+	width: 100px;
+	height: 100%;
+	cursor: pointer;
+
+	& > span {
+		.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
+
+		position: absolute;
+		transform: translateY(-100%);
+		top: 50%;
+		@{pos_y}: 0;
+		font-size: 14px;
+		line-height: 18px;
+		color: @background-bloc-0;
+		user-select: none;
+	}
+
+	&::before {
+		content: '';
+		.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
+
+		position: absolute;
+		width: 50px;
+		height: 1px;
+		background: @background-bloc-0;
+		top: 50%;
+		@{pos_y}: 0;
+		.if(@pos_y, right, transform, translateY(-50%) rotateZ(-25deg));
+		.if(@pos_y, left, transform, translateY(-50%) rotateZ(25deg));
+
+		transform-origin: @pos_y;
+	}
+
+	&::after {
+		content: '';
+		.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
+
+		position: absolute;
+		width: 50%;
+		height: 1px;
+		background: @background-bloc-0;
+		top: 50%;
+		transform: translateY(-50%);
+		@{pos_y}: 0;
+		transform-origin: @pos_y;
+	}
+
+	&:hover {
+		&::before,
+		&::after {
+			transform: translateY(-50%);
+			@{pos_y}: -10px;
+			background: @text-color-white;
+			width: 100%;
+		}
+
+		& > span {
+			@{pos_y}: calc(50% - 10px);
+			.if(@pos_y, right, transform, translateX(50%) translateY(-100%));
+			.if(@pos_y, left, transform, translateX(-50%) translateY(-100%));
+
+			color: @text-color-white;
+		}
+	}
+}
+
 #PROJECTS {
-	transition: all 0.5s cubic-bezier(0.8, 0, 0.25, 1);
+	.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
+
 	height: 600px;
 	min-height: 600px;
 	position: relative;
@@ -22,6 +92,14 @@
 		margin: 0;
 	}
 
+	& .previous {
+		.position-arrow(left);
+	}
+
+	& .next {
+		.position-arrow(right);
+	}
+
 	& li {
 		float: left;
 		width: 48%;

diff --git a/src/components/sliders.vue b/src/components/sliders.vue
@@ -2,6 +2,11 @@
 	<div
 		id="PROJECTS"
 		class="projects">
+		<div
+			class="previous"
+			@click.stop="change_page('previous')">
+			<span>previous</span>
+		</div>
 		<ul>
 			<li
 				v-for="p in projects"
@@ -17,6 +22,12 @@
 				</a>
 			</li>
 		</ul>
+		<div
+			class="next"
+			@click.stop="change_page('next')">
+			<span>next</span>
+			<div />
+		</div>
 	</div>
 </template>
 <script>
@@ -43,6 +54,9 @@ export default {
 			return {
 				'background-image': 'url(\'' + project.images[0].path + '\')'
 			};
+		},
+		change_page(direction) {
+			this.$emit('change_page', direction);
 		}
 	}
 };

diff --git a/src/pages/portfolio.vue b/src/pages/portfolio.vue
@@ -11,7 +11,8 @@
 			:text="this.help" />
 		<components_sliders
 			:projects="projects"
-			:are_projects_loading="are_projects_loading" />
+			:are_projects_loading="are_projects_loading"
+			@change_page="change_page" />
 		<components_pubs />
 	</div>
 </template>
@@ -36,8 +37,10 @@ export default {
 		return {
 			title: '',
 			tags: [],
+			tags_selected: [],
 			projects: [],
 			description: '',
+			slide: 0,
 			are_projects_loading: false,
 			help: 'Use the filter to list the projects by technology or skill.'
 		};
@@ -59,7 +62,8 @@ export default {
 			this.update_projects(projects);
 		},
 		async get_all_projects_with_tags(tags) {
-			const projects = await api.get_projects_by_page(0, tags);
+			this.update_slide(0);
+			const projects = await api.get_projects_by_page(this.slide, tags);
 			this.update_projects(projects);
 		},
 		async get_page(name) {
@@ -69,6 +73,12 @@ export default {
 		update_tags(tags) {
 			this.tags = tags;
 		},
+		update_tags_selected(tags_selected) {
+			this.tags_selected = tags_selected;
+		},
+		update_slide(slide) {
+			this.slide = slide;
+		},
 		update_projects(projects) {
 			this.projects = projects;
 		},
@@ -82,10 +92,11 @@ export default {
 				this.$router.push({ name: 'home' });
 			},1000);
 		},
-		async filter(id_tags_selected) {
+		async filter(tags_selected) {
 			this.projects_are_loading();
+			this.update_tags_selected(tags_selected);
 			setTimeout(async () => {
-				await this.get_all_projects_with_tags(id_tags_selected);
+				await this.get_all_projects_with_tags(this.tags_selected);
 			}, 1000);
 			setTimeout(async () => {
 				this.projects_are_not_loading();
@@ -96,6 +107,18 @@ export default {
 		},
 		projects_are_not_loading() {
 			this.are_projects_loading = false;
+		},
+		change_page(direction) {
+			const next_slide = direction === 'left' ? this.slide - 1 : this.slide + 1;
+			this.update_slide(next_slide);
+			this.projects_are_loading();
+			setTimeout(async () => {
+				const projects = await api.get_projects_by_page(this.slide, this.tags_selected);
+				this.update_projects(projects);
+			}, 1000);
+			setTimeout(async () => {
+				this.projects_are_not_loading();
+			}, 1250);
 		}
 	}
 };