diff --git a/client/package.json b/client/package.json index 37832f4b9815423d7e6c8bd96157b8ca1af532dd..4ed0e7c0b9c39557a49db8869fd9309ca06a2a03 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 a457ee8efd7c41adeaa62cd9c1db221eb4b1fffa..398fb966323f5c86a8c60c48ea567e14cd61d1bc 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 dd72eed83479c50be86a2be5ada2afb3f5238d3e..66e4c5cbf9afcaa90a34c59a52fdbfb22eeb41af 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 6b373f6dac6e278b95c5ecbc5934741aff932538..e8e63f2a94d27383b5bfebc1dc841bcbc530d0a7 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"