From 35377f28cb87053f7f59f48a3ce4ce3fe8529fce Mon Sep 17 00:00:00 2001 From: Anshika Date: Tue, 11 Mar 2025 11:20:19 +0530 Subject: [PATCH] fix: Profile card alignment, background & 2D-Tree scaling --- frontend/package.json | 2 +- frontend/src/assets/Style/home.css | 3 ++ frontend/src/assets/Style/profile.css | 67 +++++++++++++++++++++------ frontend/src/assets/Style/tree.css | 11 +++-- frontend/src/components/2DTree.jsx | 21 +++++++-- frontend/src/pages/Home.jsx | 23 +++++++-- frontend/src/pages/Search.jsx | 16 ++++--- 7 files changed, 107 insertions(+), 36 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 3a984b19..bd8038ba 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/src/assets/Style/home.css b/frontend/src/assets/Style/home.css index 5e382fcc..6555df3a 100644 --- a/frontend/src/assets/Style/home.css +++ b/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%; diff --git a/frontend/src/assets/Style/profile.css b/frontend/src/assets/Style/profile.css index c8346b10..1b2326cb 100644 --- a/frontend/src/assets/Style/profile.css +++ b/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%; - } \ No newline at end of file + } */ + + .iconbutton { + color: #0000005d; + font-size: 1.5rem; + font-weight: 900; + position: relative; + left: 50%; + transform: translateX(-50%); /* Ensures perfect centering */ +} diff --git a/frontend/src/assets/Style/tree.css b/frontend/src/assets/Style/tree.css index 62136dad..a481adc5 100644 --- a/frontend/src/assets/Style/tree.css +++ b/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; diff --git a/frontend/src/components/2DTree.jsx b/frontend/src/components/2DTree.jsx index 5ea4dd9b..51b22130 100644 --- a/frontend/src/components/2DTree.jsx +++ b/frontend/src/components/2DTree.jsx @@ -66,10 +66,23 @@ const TwoDTree = ({ data }) => { setShowModal(false) } }; + // const dimensions = { + // width: 800, + // height: 600 + // }; + const dimensions = { - width: 800, - height: 600 + width: window.innerWidth, // Full screen width + height: window.innerHeight // Full screen height }; + + + + return ( <> {showModal && ( @@ -83,12 +96,12 @@ const TwoDTree = ({ data }) => { zoom={1.5} zoomable={true} linkClassName={"custom-link"} - depthFactor={500} + depthFactor={300} linkProps={getLinkProps} // initialDepth={2} // pathFunc="straight" nodeSize={{ x: 100, y: 20 }} - translate={{ x: 200, y: 530 }} + // translate={{ x: 200, y: 530 }} // draggable={false} dimensions={dimensions} // orientation={"vertical"} diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index c519a5c6..88a64885 100644 --- a/frontend/src/pages/Home.jsx +++ b/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 ( <> diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx index cf5e2ecc..e098b83e 100644 --- a/frontend/src/pages/Search.jsx +++ b/frontend/src/pages/Search.jsx @@ -65,18 +65,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 (