Merge pull request #105 from BSims623/scroll

Single Project Page Navigation & Slider Component
code4sac · Aug 3, 2024 · 452e715 · 452e715
2 parents 15889dc + 040d778
commit 452e715
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 101 deletions.
diff --git a/src/app/home/homeSectionPartnerships.jsx b/src/app/home/homeSectionPartnerships.jsx
@@ -8,12 +8,10 @@ import Link from "next/link";
 export default function HomeSectionPartnership({sectionType}) {
   return (
     <section className={`general-section-${sectionType} partnership-section`}>
-      <div className={`general-section-${sectionType}-container`}>
         <div className={'home-section-heading-underline-partnership'}>
           <h1 className={`heading-large-section-sub`}>Our Collaborations and Partnerships</h1>
         </div>
-        <div className={`partnership-section-paragraph-container`}>
-          <p className={`home-numbered-paragraph-partnerships`}>We have had the privilege of working with a
+        <p className={`home-numbered-paragraph-partnerships`}>We have had the privilege of working with a
             diverse array of companies, organizations, and government entities, some of which are showcased
             below.</p>
           <div className={`home-projects-section-partnerships`}>
@@ -39,8 +37,6 @@ export default function HomeSectionPartnership({sectionType}) {
                    alt="DBA"/>
             </Link>
           </div>
-        </div>
-      </div>
     </section>
   );
 }
diff --git a/src/app/home/homeSectionProjects.jsx b/src/app/home/homeSectionProjects.jsx
@@ -1,27 +1,14 @@
 'use client'
-import 'keen-slider/keen-slider.min.css'
-import {useKeenSlider} from 'keen-slider/react'
-import { useState } from 'react';
+import { Slider } from '@/components/ui';
 import Button from '@/components/Buttons';
 
+
 /**
  * Home projects section.
  * @returns {JSX.Element}
  */
 export default function HomeSectionProjects({sectionType}) {
 
-  const [currentSlide, setCurrentSlide] = useState(0)
-  const [loaded, setLoaded] = useState(false)
-  const [sliderRef, instanceRef] = useKeenSlider({
-    initial: 0,
-    slideChanged(slider) {
-      setCurrentSlide(slider.track.details.rel)
-    },
-    created() {
-      setLoaded(true)
-    },
-  })
-
   return (
     <section className={`general-section-${sectionType} home-projects-section`}>
       <div className={`home-projects-info-container`}>
@@ -40,9 +27,8 @@ export default function HomeSectionProjects({sectionType}) {
       </div>
 
       <div className="test">
-        <div className="navigation-wrapper">
-          <div ref={sliderRef} className="keen-slider">
-            <div className="keen-slider__slide">
+        <Slider containerClass={"navigation-wrapper"}>
+          <div className="keen-slider__slide">
               <div className="slide-content">
                 <h2 className="sub-heading">TrashAI</h2>
                 <p className="home-section-dark-paragraph">
@@ -80,28 +66,9 @@ export default function HomeSectionProjects({sectionType}) {
                 alt="Open Data Day"
                 className="home-section-project-image"
               />
-            </div>
-          </div>
-        </div>
-        {loaded && instanceRef.current && (
-          <div className="dots">
-            {[
-              ...Array(instanceRef.current.track.details.slides.length).keys(),
-            ].map((idx) => {
-              return (
-                <button
-                  key={idx}
-                  onClick={() => {
-                    instanceRef.current?.moveToIdx(idx)
-                  }}
-                  className={"dot" + (currentSlide === idx ? " active" : "")}
-                ></button>
-              )
-            })}
-          </div>
-        )}
+            </div>  
+        </Slider>
       </div>
     </section>
   )
-}
-
+}
diff --git a/src/app/projects/[project]/singleProjectsScreenshots.jsx b/src/app/projects/[project]/singleProjectsScreenshots.jsx
@@ -1,13 +1,15 @@
+import { Slider } from "@/components/ui";
+
 export default function SingleProjectsScreenshots({ sectionType, data }) {
   let shownImages = data.meta.screenshots.map((screenshot) => (
             <div
               key={data.full_name.concat(screenshot)} 
-              className={`project-screenshot`} 
+              className={`keen-slider__slide project-screenshot`} 
               style={{backgroundImage: `url(https://raw.githubusercontent.com/${data.full_name}/main/${screenshot})`}}>
             </div>
           ));
   for (let i = shownImages.length; i < 6; i++) {
-    shownImages.push(<div className = {`project-blank-screenshot`} key = {data.full_name + i}></div>);
+    shownImages.push(<div className = {`keen-slider__slide project-blank-screenshot`} key = {data.full_name + i}></div>);
   }
 
 
@@ -23,6 +25,7 @@ export default function SingleProjectsScreenshots({ sectionType, data }) {
       <div className={`project-screenshots-images-container`}>
         {shownImages}
       </div>
+      <Slider containerClass={"project-screenshots-slider-container"}>{shownImages}</Slider>
       </section>
   );
 }
diff --git a/src/app/projects/[project]/singleProjectsSectionStart.jsx b/src/app/projects/[project]/singleProjectsSectionStart.jsx
@@ -8,7 +8,7 @@ import Button from "@/components/Buttons";
  */
 export default function SingleProjectsSectionStart({ sectionType, data }) {
   return (
-    <section className={`project-section-start`}>
+    <section id="project-section-start" className={`project-section-start`}>
       <div 
         className={`project-main-image`}
         style={{backgroundImage: `url(https://raw.githubusercontent.com/${data.full_name}/main/${data.meta.image_url})`}}

diff --git a/src/app/projects/projectsCardsContainer.jsx b/src/app/projects/projectsCardsContainer.jsx
@@ -31,7 +31,7 @@ const ProjectsCardsContainer = ({error, isLoading, projectsData, sectionType}) =
                 projectTitle={project.meta.title}
                 projectText={project.meta.description}
                 imgUrl={`https://raw.githubusercontent.com/${project.full_name}/main/${project.meta.screenshots[0]}`}
-                pageUrl={`/projects/${project.name}`}
+                pageUrl={`/projects/${project.name}/#project-section-start`}
                 githubUrl={project.html_url}
                 tags={project.meta.tags.split(",")}
                 lastUpdatedTimestamp={moment(project.updated_at)}

diff --git a/src/components/app/AppNavbar/ExtendedNavbarMenu.jsx b/src/components/app/AppNavbar/ExtendedNavbarMenu.jsx
@@ -16,7 +16,7 @@ const ExtendedNavbarMenu = (visible) => {
     <div className="dropdown-menu" style={visible ? {} : {display: 'none'}}>
       <div className={'navbar-extended-mobile-container'}>
         <div className={`navbar-extended-mobile-content`} style={mobileNavPosition ? {display: 'none'} : {}}>
-          <Link className={'mobile-nav-link'} href="/public">Home</Link>
+          <Link className={'mobile-nav-link'} href="/">Home</Link>
           <Link className={'mobile-nav-link'} href="/about">About</Link>
           <Link className={'mobile-nav-link'} href="/contact">Contact</Link>
           <Link className={'mobile-nav-link'} href="#">Donate</Link>

diff --git a/src/components/ui/Slider.jsx b/src/components/ui/Slider.jsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import 'keen-slider/keen-slider.min.css';
+import { useKeenSlider } from 'keen-slider/react'; // import from 'keen-slider/react.es' for to get an ES module
+
+export default function Slider ({containerClass, children}) {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [loaded, setLoaded] = useState(false);
+  const [sliderRef, instanceRef] = useKeenSlider({
+    initial: 0,
+    slideChanged(slider) {
+      setCurrentSlide(slider.track.details.rel)
+    },
+    created() {
+      setLoaded(true)
+    },
+  });
+
+  return (
+    <div className={containerClass}>
+        <div ref={sliderRef} className="keen-slider">
+            {children}
+        </div>
+        {loaded && instanceRef.current && (
+          <div className="dots">
+            {[
+              ...Array(instanceRef.current.track.details.slides.length).keys(),
+            ].map((idx) => {
+              return (
+                <button
+                  key={idx}
+                  onClick={() => {
+                    instanceRef.current?.moveToIdx(idx)
+                  }}
+                  className={"dot" + (currentSlide === idx ? " active" : "")}
+                ></button>
+              )
+            })}
+          </div>
+        )}
+    </div>
+  )
+}
diff --git a/src/components/ui/index.js b/src/components/ui/index.js
@@ -0,0 +1 @@
+export { default as Slider } from './Slider';
diff --git a/styles/abstracts/variables.scss b/styles/abstracts/variables.scss
@@ -9,9 +9,11 @@ $secondary-200: #FFF3CD;
 $neutral-300: #a9aab1;
 $secondary-300: #ffe69c;
 $neutral-400: #a9aab1;
+$primary-400: #5C85FF;
 $neutral-500: #72727e;
 $primary-500: #112971;
 $secondary-500: #ffc107;
+$primary-600: #002DB3;
 $neutral-700: #797a7b;
 $neutral-800: #1d1d20;
 $neutral-900: #060718;

diff --git a/styles/components/slider.scss b/styles/components/slider.scss
@@ -0,0 +1,47 @@
+.navigation-wrapper {
+    position: relative;
+}
+
+.project-screenshots-slider-container {
+    .project-screenshot, .project-blank-screenshot {
+        border: 1px solid $neutral-700;
+        border-radius: 8px;
+    }
+
+    .dot {
+        background: $primary-600;
+    }
+
+    .dot.active {
+        background: $primary-400;
+    }
+
+    @media (min-width: $screen-md) {
+        display: none;
+    }
+}  
+
+.dots {
+    display: flex;
+    padding: 10px 0;
+    justify-content: center;
+}
+
+.dot {
+    border: none;
+    width: 10px;
+    height: 10px;
+    background: $secondary-50;
+    border-radius: 50%;
+    margin: 0 5px;
+    padding: 5px;
+    cursor: pointer;
+}
+
+.dot:focus {
+    outline: none;
+}
+
+.dot.active {
+    background: $secondary-500;
+}  
diff --git a/styles/main.scss b/styles/main.scss
@@ -14,6 +14,7 @@
 @import "styles/components/footer.scss";
 @import "styles/components/instructions.scss";
 @import "styles/components/page-section.scss";
+@import "styles/components/slider.scss";
 @import "styles/components/button.scss";
 @import "styles/layout/section.scss";
 @import "styles/layout/header.scss";
diff --git a/styles/pages/home.scss b/styles/pages/home.scss
@@ -279,55 +279,19 @@ Home page layout.
   }
 }
 
-.navigation-wrapper {
-  position: relative;
-}
-
-.dots {
-  display: flex;
-  padding: 10px 0;
-  justify-content: center;
-}
-
-.dot {
-  border: none;
-  width: 10px;
-  height: 10px;
-  background: $secondary-50;
-  border-radius: 50%;
-  margin: 0 5px;
-  padding: 5px;
-  cursor: pointer;
-}
-
-.dot:focus {
-  outline: none;
-}
-
-.dot.active {
-  background: $secondary-500;
-}
-
 .partnership-section {
   padding: 64px 80px;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 60px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 40px;
 
   @media (max-width: $screen-lg) {
-    flex-direction: column;
     padding: 64px 40px;
+    align-items: center;
   }
 }
 
-.partnership-section-paragraph-container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .home-section-heading-underline-partnership::after {
   content: "";
   position: absolute;
@@ -390,17 +354,17 @@ Home page layout.
 }
 
 .home-projects-section-partnerships {
-  padding: 64px 32px 64px 32px;
+  padding-left: 32px;
   display: flex;
   flex-direction: row;
   align-items: center;
   align-content: flex-start;
   gap: 48px;
 
-  @media (max-width: $screen-md) {
+  @media (max-width: $screen-lg) {
     flex-direction: column;
     justify-content: center;
-    padding: 48px 40px;
+    padding: 0;
     gap: 60px;
   }
 }