From 216c50089485d04a5c616843339205de38546443 Mon Sep 17 00:00:00 2001 From: Wethmi Ranasinghe Date: Sun, 1 Sep 2024 23:27:40 +0530 Subject: [PATCH] Repository page Updated --- front-end/src/Pages/Dashboard.jsx | 6 ++- front-end/src/Pages/Deliverables.module.css | 1 + front-end/src/Pages/Gallery.jsx | 2 +- front-end/src/Pages/Home.jsx | 1 + front-end/src/Pages/News.jsx | 2 +- front-end/src/Pages/ProjectManagement.jsx | 3 ++ front-end/src/Pages/Repository.jsx | 17 ++++++++- front-end/src/Pages/Workplan.module.css | 1 + front-end/src/bodyComponents/SlideShow.jsx | 2 +- front-end/src/components/Contact.css | 1 + front-end/src/components/Dashboard.module.css | 8 ++++ front-end/src/components/Download.css | 1 + front-end/src/components/Gallery.css | 3 +- front-end/src/components/Header.css | 22 ++++++----- front-end/src/components/Header.jsx | 37 +++++++++++++++---- front-end/src/components/News.css | 3 +- front-end/src/components/Overview.css | 1 + .../components/ProjectManagement.module.css | 8 ++++ .../src/components/Repository.module.css | 10 +++++ front-end/src/components/Team.css | 1 + 20 files changed, 105 insertions(+), 25 deletions(-) create mode 100644 front-end/src/components/Dashboard.module.css create mode 100644 front-end/src/components/Repository.module.css diff --git a/front-end/src/Pages/Dashboard.jsx b/front-end/src/Pages/Dashboard.jsx index ab74d5ab..674759ea 100644 --- a/front-end/src/Pages/Dashboard.jsx +++ b/front-end/src/Pages/Dashboard.jsx @@ -1,7 +1,11 @@ +import style from "../components/Dashboard.module.css"; + function Dashboard() { return( <> -

Dashboard

+
+

Dashboard

+
); } diff --git a/front-end/src/Pages/Deliverables.module.css b/front-end/src/Pages/Deliverables.module.css index 03c77d7d..5ae82915 100644 --- a/front-end/src/Pages/Deliverables.module.css +++ b/front-end/src/Pages/Deliverables.module.css @@ -7,6 +7,7 @@ text-align: left; margin-bottom: 1%; font-size: 20px; + font-family: 'Caudex'; } /* Table containers */ diff --git a/front-end/src/Pages/Gallery.jsx b/front-end/src/Pages/Gallery.jsx index e7245bf6..6cb8dc92 100644 --- a/front-end/src/Pages/Gallery.jsx +++ b/front-end/src/Pages/Gallery.jsx @@ -21,7 +21,7 @@ const Gallery = () => { return( <> -
+

Gallery

diff --git a/front-end/src/Pages/Home.jsx b/front-end/src/Pages/Home.jsx index ce7bb48e..bc6f577a 100644 --- a/front-end/src/Pages/Home.jsx +++ b/front-end/src/Pages/Home.jsx @@ -107,6 +107,7 @@ function Home() {
Project description

+

Project Number: GAP-101128627

There is an increasing demand for cybersecurity professionals worldwide, however, in Asia Pacific the largest regional workforce gap of 1.42 million professionals exists. diff --git a/front-end/src/Pages/News.jsx b/front-end/src/Pages/News.jsx index 3ad566a8..b4d03a80 100644 --- a/front-end/src/Pages/News.jsx +++ b/front-end/src/Pages/News.jsx @@ -68,7 +68,7 @@ const News = () => { return ( <> -

+

News

{loggedInUser.isLoggedIn && (
diff --git a/front-end/src/Pages/ProjectManagement.jsx b/front-end/src/Pages/ProjectManagement.jsx index 7c72261e..e0ed923a 100644 --- a/front-end/src/Pages/ProjectManagement.jsx +++ b/front-end/src/Pages/ProjectManagement.jsx @@ -185,6 +185,9 @@ const onDeleteClick = async (task_ID) => { {/* all tasks */}
+
+

Project Management

+
diff --git a/front-end/src/Pages/Repository.jsx b/front-end/src/Pages/Repository.jsx index c02c66f4..85931d08 100644 --- a/front-end/src/Pages/Repository.jsx +++ b/front-end/src/Pages/Repository.jsx @@ -1,7 +1,22 @@ +import style from "../components/Repository.module.css"; + function Repository() { return( <> -

Repository

+
+

Repository

+
+
+ {/* Left Button */} + + + + + {/* Right Button */} + + + +
); } diff --git a/front-end/src/Pages/Workplan.module.css b/front-end/src/Pages/Workplan.module.css index 0ebcc521..229980b6 100644 --- a/front-end/src/Pages/Workplan.module.css +++ b/front-end/src/Pages/Workplan.module.css @@ -5,6 +5,7 @@ text-align: left; margin-bottom: 1%; font-size: 20px; + font-family: 'Caudex'; } /* Table containers */ diff --git a/front-end/src/bodyComponents/SlideShow.jsx b/front-end/src/bodyComponents/SlideShow.jsx index 78509446..a80f41ba 100644 --- a/front-end/src/bodyComponents/SlideShow.jsx +++ b/front-end/src/bodyComponents/SlideShow.jsx @@ -7,7 +7,7 @@ import 'react-slideshow-image/dist/styles.css' const Slideshow = ({imageList}) => { return ( -
+
{imageList.map((fadeImage, index) => (
diff --git a/front-end/src/components/Contact.css b/front-end/src/components/Contact.css index d2d2d69e..7eca88c2 100644 --- a/front-end/src/components/Contact.css +++ b/front-end/src/components/Contact.css @@ -14,6 +14,7 @@ text-align: left; margin-bottom: 3%; font-size: 20px; + font-family: 'Caudex'; } /* Contact details of the manager and coordinator alignment */ diff --git a/front-end/src/components/Dashboard.module.css b/front-end/src/components/Dashboard.module.css new file mode 100644 index 00000000..6b8b4fd7 --- /dev/null +++ b/front-end/src/components/Dashboard.module.css @@ -0,0 +1,8 @@ +.DashboardTitle{ + margin-top: 2%; + margin-left: 5%; + text-align: left; + margin-bottom: 3%; + font-size: 20px; + font-family: 'Caudex'; +} \ No newline at end of file diff --git a/front-end/src/components/Download.css b/front-end/src/components/Download.css index 688f7c39..582d72fb 100644 --- a/front-end/src/components/Download.css +++ b/front-end/src/components/Download.css @@ -5,6 +5,7 @@ text-align: left; margin-bottom: 3%; font-size: 20px; + font-family: 'Caudex'; } .upload-section { diff --git a/front-end/src/components/Gallery.css b/front-end/src/components/Gallery.css index 14b285c0..35694c45 100644 --- a/front-end/src/components/Gallery.css +++ b/front-end/src/components/Gallery.css @@ -1,9 +1,10 @@ -.Gallery{ +.GalleryTitle{ margin-top: 2%; margin-left: 5%; text-align: left; margin-bottom: 3%; font-size: 20px; + font-family: 'Caudex'; } .gallery-container{ diff --git a/front-end/src/components/Header.css b/front-end/src/components/Header.css index 074bab64..94a6cb3c 100644 --- a/front-end/src/components/Header.css +++ b/front-end/src/components/Header.css @@ -36,7 +36,7 @@ h2 { font-family:'Caudex'; text-align: center; - font-size: 1.7em; + font-size: 1.4em; margin-top: 0px; } @@ -76,13 +76,15 @@ display: flex; justify-content: space-between; align-items: center; - padding: 0px 0px; - margin-bottom: 0px; - margin-top: 20px; - box-sizing: border-box; + /* box-sizing: border-box; */ transition: transform 2s ease, opacity 0.5s ease; } +.Heading { + margin-top: -80px; /* Adjust the value as needed */ + margin-bottom: 10px; +} + .Erasmus-plus-Logo:hover { transform: scale(1.02); opacity: 0.8; @@ -108,7 +110,7 @@ display: flex; justify-content: right; align-items: center; - background-color: rgb(255, 255, 255, 0.9); + background-color: rgba(228, 246, 250, 0.9); /* padding: 1rem; */ padding: 20px 5px; height: 2rem; @@ -168,7 +170,7 @@ position: absolute; padding: 12px 0; left: 0; - background-color: rgb(255, 255, 255, 0.9); + background-color: rgba(228, 246, 250, 0.9); min-width: 100%; height: auto; z-index: 1; @@ -297,7 +299,7 @@ right: 0.5%; width: 250px; max-height: 500px; - z-index: 1000; /*change this */ + z-index: 5000; /*change this */ border: 1px solid #ccc; border-radius: 4px; background-color: rgb(255, 255, 255); @@ -378,7 +380,7 @@ width: 250px; height:100vh; max-height: 500px; - z-index: 1000; + z-index: 2000; border: 1px solid #ccc; border-radius: 4px; background-color: rgb(255, 255, 255); @@ -394,7 +396,7 @@ width: 250px; height:100vh; max-height: 500px; - z-index: 1000; + z-index: 2000; border: 1px solid #ccc; border-radius: 4px; background-color: rgb(255, 255, 255); diff --git a/front-end/src/components/Header.jsx b/front-end/src/components/Header.jsx index 83157da9..5da25b16 100644 --- a/front-end/src/components/Header.jsx +++ b/front-end/src/components/Header.jsx @@ -51,7 +51,9 @@ function Header(){ else { setIsVisible(true); } - }) + +}, [location.pathname, loggedInUserState, loggedInUser]); + function logOut(){ //TODO: okay to do this? @@ -79,11 +81,29 @@ function Header(){ setShowNotifications(previousShowNotifications=>!previousShowNotifications) } - - + // Function to close the sidebar when clicking outside of it +function closeOnClickOutside(selector, toggleClass) { + document.addEventListener('click', function(event) { + const element = document.querySelector(selector); + const isClickInside = element.contains(event.target); + const isClickOnToggleButton = event.target.closest('.adminNavBarRight li'); // Update with the toggle button selector + + if (!isClickInside && !isClickOnToggleButton) { + element.classList.add(toggleClass); // Add the class to hide the element + } + }); + } + + // Call the function for the notification and message boxes + useEffect(() => { + closeOnClickOutside('.sideBarNotifications-Open', 'sideBar-Close'); + closeOnClickOutside('.sideBarMessages-Open', 'sideBar-Close'); + closeOnClickOutside('.userAccount-Open', 'userAccount-Close'); +}, []); return(
+ {/* Navigation bar */}
  • Downloads
    • -
  • contact
    • +
  • Contact
    • @@ -214,17 +234,18 @@ function Header(){ {/* Erasmus logo */} Erasmus+ Logo - {/* Main heading */} -

    ERASMUS+ CYCLE

    {/* Cycle logo */} Cycle Logo
    - +
    + {/* Main heading */} +

    ERASMUS+ CYCLE

    + {/* Sub heading */}

    CYberseCurityLEarning: Master's degree in Cyber security

    - +
    ); diff --git a/front-end/src/components/News.css b/front-end/src/components/News.css index 2855dd1b..d3b16706 100644 --- a/front-end/src/components/News.css +++ b/front-end/src/components/News.css @@ -1,10 +1,11 @@ -.News{ +.NewsTitle{ margin-top: 2%; margin-left: 5%; text-align: left; margin-bottom: 3%; font-size: 20px; + font-family: 'Caudex'; } .AddNewsButton{ diff --git a/front-end/src/components/Overview.css b/front-end/src/components/Overview.css index 02541c62..a9e013e3 100644 --- a/front-end/src/components/Overview.css +++ b/front-end/src/components/Overview.css @@ -5,6 +5,7 @@ text-align: left; margin-bottom: 3%; font-size: 20px; + font-family: 'Caudex'; } /* CYCLE Overview part alignments */ diff --git a/front-end/src/components/ProjectManagement.module.css b/front-end/src/components/ProjectManagement.module.css index 0e3093f3..6d2fb1c9 100644 --- a/front-end/src/components/ProjectManagement.module.css +++ b/front-end/src/components/ProjectManagement.module.css @@ -1,3 +1,11 @@ +.ProjectManagementTitle{ + margin-top: 2%; + margin-left: 5%; + text-align: left; + margin-bottom: 1%; + font-size: 20px; + font-family: 'Caudex'; +} .showDiv{ display: block; diff --git a/front-end/src/components/Repository.module.css b/front-end/src/components/Repository.module.css new file mode 100644 index 00000000..26fa7cd7 --- /dev/null +++ b/front-end/src/components/Repository.module.css @@ -0,0 +1,10 @@ +.RepositoryTitle{ + margin-top: 2%; + margin-left: 5%; + text-align: left; + margin-bottom: 1%; + font-size: 20px; + font-family: 'Caudex'; + } + + diff --git a/front-end/src/components/Team.css b/front-end/src/components/Team.css index c332dc12..b9f645c1 100644 --- a/front-end/src/components/Team.css +++ b/front-end/src/components/Team.css @@ -4,6 +4,7 @@ text-align: left; margin-bottom: 3%; font-size: 20px; + font-family: 'Caudex'; } .UoPTeamTitle {