From afd543f0c158ccd62143f6ec61b035cde6feddc4 Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Mon, 31 May 2021 18:02:54 +0200
Subject: [PATCH] Replaced the project slider
---
client/package.json | 1 -
.../layout/ProjectsSlider/index.tsx | 58 ++++++++++---------
.../ProjectsSlider/projects-slider.scss | 54 ++++++++++++-----
client/yarn.lock | 12 ----
4 files changed, 72 insertions(+), 53 deletions(-)
diff --git a/client/package.json b/client/package.json
index 37832f4..4ed0e7c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -17,7 +17,6 @@
"@types/react-router-dom": "^5.1.7",
"emoji-picker-react": "^3.4.4",
"react": "^17.0.2",
- "react-alice-carousel": "^2.5.1",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
diff --git a/client/src/components/layout/ProjectsSlider/index.tsx b/client/src/components/layout/ProjectsSlider/index.tsx
index a457ee8..398fb96 100644
--- a/client/src/components/layout/ProjectsSlider/index.tsx
+++ b/client/src/components/layout/ProjectsSlider/index.tsx
@@ -1,42 +1,46 @@
-import Carousel from 'react-alice-carousel';
+import { useCallback, useRef } from 'react';
import ProjectSlide, { ProjectSlideProps } from 'components/ui/ProjectSlide';
import './projects-slider.scss';
-import 'react-alice-carousel/lib/alice-carousel.css';
-
-const responsive = {
- 0: { items: 1 },
- 560: { items: 2 },
- 1200: { items: 3 },
-};
interface Props {
projects: ProjectSlideProps[]
}
export default function ProjectsSlider({ projects }: Props) {
+ const slider = useRef<HTMLDivElement | null>(null);
+
+ const onChange = useCallback(amount => {
+ const current = parseFloat(slider.current?.style.getPropertyValue('--position') ?? '0') || 0;
+ const next = Math.min(Math.max(current + amount, 0), projects.length - 1);
+ slider.current?.style.setProperty('--position', next.toString());
+ }, [slider, projects]);
+
return (
- <>
- {
- projects.length ?
- <div className="project-slider">
- <Carousel
- mouseTracking
- responsive={responsive}
- disableDotsControls
- disableButtonsControls
- touchTracking
- >
- {
- projects.map(project => <ProjectSlide key={project.project.id} {...project} />)
- }
- </Carousel>
- </div> :
- <div>No Projects found.</div>
- }
- </>
+ projects.length
+ ? (
+ <div className="project-slider" ref={slider}>
+ <div className="prev-button" onClick={() => onChange(-1)}>
+ <
+ </div>
+ <div className = "next-button" onClick={() => onChange(1)}>
+ >
+ </div>
+ {
+ projects.map(project =>
+ <div
+ key={project.project.id}
+ className="slide"
+ >
+ <ProjectSlide {...project} />
+ </div>
+ )
+ }
+ </div>
+ )
+ : <div>No Projects found.</div>
);
}
diff --git a/client/src/components/layout/ProjectsSlider/projects-slider.scss b/client/src/components/layout/ProjectsSlider/projects-slider.scss
index dd72eed..66e4c5c 100644
--- a/client/src/components/layout/ProjectsSlider/projects-slider.scss
+++ b/client/src/components/layout/ProjectsSlider/projects-slider.scss
@@ -4,22 +4,50 @@
.project-slider {
overflow: hidden;
- padding: 200px;
- margin: -210px;
- margin-right: -50px;
- padding-right: 50px;
+ white-space: nowrap;
+ padding: 30px 30px;
+ margin: -30px -30px;
+ position: relative;
- .alice-carousel__wrapper {
- overflow: visible;
+ .prev-button, .next-button {
+ display: flex;
+ user-select: none;
+ font-size: 2rem;
+ cursor: pointer;
+ position: absolute;
+ opacity: 0.75;
+ background-color: s.$light;
+ z-index: 100;
+ width: 50px;
+ height: 100px;
+ border-radius: 25px;
+ top: 50%;
+ transform: translateY(-50%);
+ justify-content: center;
+ align-items: center;;
}
- .project-slide {
- user-select: none;
- -moz-user-select: none;
- -webkit-user-drag: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- margin: 10px;
+ .prev-button {
+ left: 10px;
+ }
+
+ .next-button {
+ right: 10px;
+ }
+
+ .slide {
+ display: inline-block;
+ margin: 12px;
+ width: calc(100% - 24px);
+ transform: translateX(calc(var(--position) * (-100% - 24px)));
+
+ @include mx.breakpoint(medium) {
+ width: calc(50% - 24px);
+ }
+
+ @include mx.breakpoint(xlarge) {
+ width: calc(33.3% - 24px);
+ }
}
}
diff --git a/client/yarn.lock b/client/yarn.lock
index 6b373f6..e8e63f2 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -9080,13 +9080,6 @@ raw-body@2.4.0:
iconv-lite "0.4.24"
unpipe "1.0.0"
-react-alice-carousel@^2.5.1:
- version "2.5.1"
- resolved "https://registry.yarnpkg.com/react-alice-carousel/-/react-alice-carousel-2.5.1.tgz#d8b27f942d342bf57367eb2c3301358a28758381"
- integrity sha512-UeAd+O83TEiCxbDMMd9xAOLRr+xPNFPai9W6cNQgmIfEBgOiKDdntpTnhhwfXKoirXxQcbPlg9eG7FG9D1M4SA==
- dependencies:
- vanilla-swipe "^2.2.0"
-
react-app-polyfill@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
@@ -11123,11 +11116,6 @@ value-equal@^1.0.1:
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-vanilla-swipe@^2.2.0:
- version "2.3.0"
- resolved "https://registry.yarnpkg.com/vanilla-swipe/-/vanilla-swipe-2.3.0.tgz#a2cd466aabed00c1e8abd7b69a86940bf9319516"
- integrity sha512-4m8vZ/kckRG7RQUYNg+0lGILMHT08KEgwePlRLzediDSu7aQFBLB0V2n36vUmYqq5CVWASOzZ8zpnQFZXIbHbA==
-
vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
--
GitLab