Merge pull request #110 from dkstlzk/main

fix: Profile card alignment, background & 2D-Tree scaling

Author: a19hu

frontend/package.json

@@ -38,7 +38,7 @@
     "xlsx": "^0.18.5"
   },
   "scripts": {
-    "start": "PORT=8003 react-scripts start",
+    "start": "cross-env PORT=8003 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/src/assets/Style/home.css

@@ -1,7 +1,10 @@
 .home{
   filter: blur(10px);
+  width: 100%;
+  height: 100vh;
   position: relative;
  }
+
  .typewriterStyle{
   position: absolute;
 top: 4%;

frontend/src/assets/Style/profile.css

@@ -1,40 +1,79 @@
 .modalprofile {
-    position:fixed;
-    top: 36%;
-    right: 1%;
-    height: 100%;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Ensures proper centering */
     display: flex;
     align-items: center;
-  }
-  
-  .modal-contentprofile {
+    justify-content: center;
+    height: auto;
+    z-index: 1000;
+    width: fit-content; /* Adjusts width dynamically */
+    min-width: 300px;
+    max-width: 90vw; /* Prevents it from being too wide */
+}
+
+.modal-contentprofile {
     background-color: rgb(165, 201, 221);
-    border-radius: 5px;
+    border-radius: 10px;
     box-shadow: 2px 5px 10px rgba(20, 20, 20, 0.261);
     padding: 20px;
+    width: 300px; /* Ensures uniform size */
+    text-align: center;
+}
 
-  }
+/* 
   .closespro {
     position: relative;
     top: -180px;
     font-size: 1.7rem;
     cursor: pointer;
-  }
-  .imagepro{
+  } */
+
+  .closespro {
+    position: absolute;
+    top: 10px;
+    right: 15px; /* Aligns it to the top-right */
+    font-size: 1.7rem;
+    cursor: pointer;
+}
+
+
+  /* .imagepro{
     position: relative;
     border-radius: 50%;
    height: 200px;
    width: 200px;
-  }
+  } */
+
+  .imagepro {
+    display: block;
+    margin: 0 auto; /* Ensures the image is centered */
+    border-radius: 50%;
+    height: 200px;
+    width: 200px;
+}
+
+
   .linkedicon{
     /* color: #0077B5; */
     font-size: 1.5rem;
     cursor: pointer;
   }
-  .iconbutton{
+
+  /* .iconbutton{
     color: #0000005d;
     font-size: 1.5rem;
     font-weight: 900;
     position: relative;
     left: 30%;
-  }
+  } */
+
+  .iconbutton {
+    color: #0000005d;
+    font-size: 1.5rem;
+    font-weight: 900;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%); /* Ensures perfect centering */
+}

frontend/src/assets/Style/tree.css

@@ -1,12 +1,13 @@
-.tree_{
+.tree_ {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  justify-content: center;  /* Centers the tree horizontally */
+  align-items: center;   /* Adjusts alignment */
   height: 100vh;
   width: 100vw;
-  min-width: 2400px;
-  min-height: 100vh;
+  overflow: auto;  /* Ensure it scrolls properly */
 }
+
+
 .tree_ ul {
   padding-top: 20px; 
   position: relative;

frontend/src/components/2DTree.jsx

@@ -117,6 +117,34 @@ const TwoDTree = ({ data }) => {
     strokeWidth: 10,
   });
 
+  const handleNodeMouseOver = (nodeDatum, event) => {
+    if (nodeDatum.name !== 'All') {
+      setroll(nodeDatum)
+      setShowModal(true)
+
+    }
+  };
+  const handleNodeMouseOut = (nodeData, event) => {
+    if (nodeData.name !== 'All') {
+      setShowModal(false)
+    }
+  };
+  // const dimensions = {
+  //   width: 800,
+  //   height: 600
+  // };
+  
+  const dimensions = {
+    width: window.innerWidth,  // Full screen width
+    height: window.innerHeight // Full screen height
+  };
+  
+  <Tree 
+    data={new_data}
+    translate={{ x: dimensions.width / 2, y: dimensions.height / 2 }} // Center both horizontally & vertically
+    dimensions={dimensions}
+  />
+  
   return (
     <>
       {/* {showModal && <Profile rollNo={roll.rollNo} />} */}

frontend/src/pages/Home.jsx

@@ -8,14 +8,27 @@ const Home = ({data}) => {
   const team=()=>{
     setteamshow(!teamshow)
   }
-  const mystyle={
-    backgroundImage: `url(${background})`,
-    backdropFilter: "blur(6px)",
+  // const mystyle={
+  //   backgroundImage: `url(${background})`,
+  //   backdropFilter: "blur(6px)",
+  //   backgroundSize: "cover",
+  //   backgroundRepeat: "no-repeat",
+  //   height: "100vh",
+  //   opacity: '0.8',
+  //  };
+
+  const mystyle = {
+    backgroundImage: `url(${background})`, // Corrected syntax
     backgroundSize: "cover",
+    backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
     height: "100vh",
-    opacity: '0.8',
-   };
+    width: "100%",
+    opacity: 0.8,
+  };
+  
+
+
   return (
 
     <>

frontend/src/pages/Search.jsx

@@ -67,18 +67,20 @@ const Search = () => {
      })
 
     return navigate('/')
-
   }
-  const mystyle={
-    backgroundImage: `url(${background})`,
+
+  const mystyle = {
+    backgroundImage: `url(${background})`, // Corrected syntax
     backgroundSize: "cover",
+    backdropFilter: "blur(6px)",
+    backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
     height: "100vh",
-    opacity: '0.8',
-    minWidth: "2400px", 
     width: "100%",
-    
-   };
+    opacity: 0.8,
+  };
+  
+
   return (
     <div className='topmargin'>
     <ToastContainer />