fixed: issue IEDCMEC#237

Aaron-53 · Sep 18, 2024 · 318b13b · 318b13b
1 parent ad9a618
commit 318b13b
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 5 deletions.
diff --git a/src/Components/CollabFooter/CollabFooter.scss b/src/Components/CollabFooter/CollabFooter.scss
@@ -1,7 +1,7 @@
 // File: iedc-collab/src/Components/CollabFooter.scss
 
 .footer__main {
-  position: fixed; /* Ensures the footer stays at the bottom */
+  position: relative; /* Ensures the footer stays at the bottom */
   bottom: 0;
   width: 100%; /* Takes full width of the viewport */
   padding: 10px 20px; /* Adjusted padding for smaller size */

diff --git a/src/Pages/Developers/DeveloperCard.js b/src/Pages/Developers/DeveloperCard.js
@@ -12,7 +12,7 @@ const DeveloperCard = ({ user, handleClick }) => {
   const username = user.name !== undefined ? user.name.toLowerCase() : null
   return (
     <div
-      data-aos="zoom-in"
+      //data-aos="zoom-in"
       className="developer-card"
       key={user.id}
       style={{ cursor: "pointer" }}

diff --git a/src/Pages/Developers/Developers.js b/src/Pages/Developers/Developers.js
@@ -9,6 +9,8 @@ import SuspenseLoader from "../../Components/SuspenseLoader/SuspenseLoader";
 import { ProjectContext } from "../../contexts/ProjectContext";
 import { Pagination } from "@mui/material";
 import { ThemeContext } from "../../App";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const Developers = () => {
   const { developers, loading, setSelectedDevelopers } = useContext(
@@ -50,6 +52,21 @@ const Developers = () => {
     setFilteredDevelopers(filteredDevs);
   };
 
+  useEffect(() => {
+    AOS.init();
+    let resizeTimeout;
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        AOS.refresh();
+      }, 200);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   useEffect(() => {
     if (!developers) return;
 

diff --git a/src/Pages/Developers/Developers.scss b/src/Pages/Developers/Developers.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  overflow-x: hidden;
+  overflow: hidden;
   padding-bottom: 5%;
 }
 .drawer__container button:focus {
@@ -28,14 +28,14 @@
   column-gap: 10%;
   justify-content: center;
   /* Set a fixed height */
-  height: calc(4.1 * (107px + 30px)); /* Adjust based on your card height and row gap */
-  overflow-y: scroll; /* Enable vertical scrolling */
+  height: fit-content; /* Adjust based on your card height and row gap */
 }
 .developer-column{
   display:flex;
   align-items: center;
   justify-content: space-around;
   flex-direction: column;
+  gap: 50px;
 }
 .developer-card {
   width: 528px;

diff --git a/src/Pages/Projects/Projects.js b/src/Pages/Projects/Projects.js
@@ -9,6 +9,8 @@ import { ProjectContext } from "../../contexts/ProjectContext";
 import { Pagination } from "@mui/material";
 import Drawer from "../Developers/Drawer";
 import { ThemeContext } from "../../App";
+import AOS from "aos";
+import "aos/dist/aos.css";
 const Projects = () => {
   // const [projects, setProjects] = useState([]);
   const { projects, loading } = useContext(ProjectContext);
@@ -68,6 +70,21 @@ const Projects = () => {
     setPages(Math.ceil(filteredProjects.length / 12));
   };
 
+    useEffect(() => {
+      AOS.init();
+      let resizeTimeout;
+      const handleResize = () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          AOS.refresh();
+        }, 200);
+      };
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }, []);
+
   useEffect(() => {
     filterProjects();
     // eslint-disable-next-line react-hooks/exhaustive-deps