From 9fb073d10a892f7bdccc154e4c096d3a6320303e Mon Sep 17 00:00:00 2001 From: Wethmi Ranasinghe Date: Tue, 17 Sep 2024 19:11:40 +0530 Subject: [PATCH 1/3] Documentation Improved --- .../com/example/demo/appuser/AppUser.java | 1 - .../com/example/demo/task/TaskService.java | 1 + front-end/src/Pages/Contact.jsx | 4 +-- front-end/src/Pages/Dashboard.jsx | 1 + front-end/src/Pages/Deliverables.jsx | 5 +-- front-end/src/Pages/Downloads.jsx | 15 ++++++++ front-end/src/Pages/Gallery.jsx | 31 +++++++++++++++-- front-end/src/Pages/Home.jsx | 5 ++- front-end/src/Pages/Login.jsx | 5 ++- front-end/src/Pages/NewsContext.jsx | 13 ++++--- front-end/src/Pages/ProjectManagement.jsx | 8 ++--- front-end/src/Pages/Repository.jsx | 11 ++++-- front-end/src/Pages/Workplan.jsx | 2 +- .../Deliverables.module.css | 0 front-end/src/components/Header.css | 2 +- front-end/src/components/Header.jsx | 7 ++-- .../src/{Pages => components}/Home.module.css | 34 +++++++++++++++---- .../{Pages => components}/Login.module.css | 1 + front-end/src/components/News.css | 21 ++++++++++-- front-end/src/components/Overview.css | 26 ++++++++++---- .../components/ProjectManagement.module.css | 24 +++++++++---- .../src/components/Repository.module.css | 3 ++ front-end/src/components/Team.css | 29 ++++++++++------ .../{Pages => components}/Workplan.module.css | 0 24 files changed, 181 insertions(+), 68 deletions(-) rename front-end/src/{Pages => components}/Deliverables.module.css (100%) rename front-end/src/{Pages => components}/Home.module.css (68%) rename front-end/src/{Pages => components}/Login.module.css (99%) rename front-end/src/{Pages => components}/Workplan.module.css (100%) diff --git a/back-end/src/main/java/com/example/demo/appuser/AppUser.java b/back-end/src/main/java/com/example/demo/appuser/AppUser.java index b1bddb04..99afa186 100644 --- a/back-end/src/main/java/com/example/demo/appuser/AppUser.java +++ b/back-end/src/main/java/com/example/demo/appuser/AppUser.java @@ -36,7 +36,6 @@ public class AppUser implements UserDetails { ) @Id @GeneratedValue( - strategy = GenerationType.SEQUENCE, generator = "member_sequence" ) diff --git a/back-end/src/main/java/com/example/demo/task/TaskService.java b/back-end/src/main/java/com/example/demo/task/TaskService.java index efac1d08..30441412 100644 --- a/back-end/src/main/java/com/example/demo/task/TaskService.java +++ b/back-end/src/main/java/com/example/demo/task/TaskService.java @@ -66,3 +66,4 @@ public List findUserTasks(Long userID) { // } } + diff --git a/front-end/src/Pages/Contact.jsx b/front-end/src/Pages/Contact.jsx index b4573cdf..ae09140d 100644 --- a/front-end/src/Pages/Contact.jsx +++ b/front-end/src/Pages/Contact.jsx @@ -4,8 +4,8 @@ import contactImg from '../assets/contactImg.jpg'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faUser, faPhone, faEnvelope} from '@fortawesome/free-solid-svg-icons'; +/*Contact Page*/ function Contact() { - return( <>
{/* Page title */} @@ -55,12 +55,10 @@ function Contact() {
- {/* Contact Us form */} -

Contact Us

For inquiries or support, contact us and we'll respond promptly

diff --git a/front-end/src/Pages/Dashboard.jsx b/front-end/src/Pages/Dashboard.jsx index 674759ea..6733d14f 100644 --- a/front-end/src/Pages/Dashboard.jsx +++ b/front-end/src/Pages/Dashboard.jsx @@ -1,5 +1,6 @@ import style from "../components/Dashboard.module.css"; +/*Dashboard Page */ function Dashboard() { return( <> diff --git a/front-end/src/Pages/Deliverables.jsx b/front-end/src/Pages/Deliverables.jsx index 395b9143..83dc3bc5 100644 --- a/front-end/src/Pages/Deliverables.jsx +++ b/front-end/src/Pages/Deliverables.jsx @@ -9,12 +9,13 @@ //Auto focus the for input import { useEffect, useState } from 'react'; -import style from './Deliverables.module.css' +import style from '../components/Deliverables.module.css' import axios from "axios" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faEye, faTrash } from '@fortawesome/free-solid-svg-icons'; import { loggedInUser } from '../components/Header'; +/*Deliverables Page */ function Deliverables() { /******************** Load information whenever the page loads ********************************* */ @@ -389,4 +390,4 @@ const onViewClick = (deliverable) => { ); } - export default Deliverables; \ No newline at end of file +export default Deliverables; \ No newline at end of file diff --git a/front-end/src/Pages/Downloads.jsx b/front-end/src/Pages/Downloads.jsx index 082e3e89..21a43d88 100644 --- a/front-end/src/Pages/Downloads.jsx +++ b/front-end/src/Pages/Downloads.jsx @@ -7,6 +7,7 @@ import { faDownload ,faTrash, faEye } from '@fortawesome/free-solid-svg-icons'; const FileUploadDownload = () => { + // State management const [selectedFile, setSelectedFile] = useState(null); const [displayName, setDisplayName] = useState(''); const [visibleToAll, setVisibleToAll] = useState(false); @@ -15,10 +16,12 @@ const FileUploadDownload = () => { const [errorMessage, setErrorMessage] = useState(''); const [showUploadForm, setShowUploadForm] = useState(false); +// Fetch the uploaded files from the backend when the component mounts useEffect(() => { fetchUploadedFiles(); }, []); + // Fetches uploaded files from the backend API const fetchUploadedFiles = async () => { try { const response = await axios.get('http://localhost:8080/api/v1/files'); @@ -28,33 +31,42 @@ const FileUploadDownload = () => { } }; + // Handler for selecting a file const handleFileChange = (event) => { setSelectedFile(event.target.files[0]); }; + // Handler for setting the display name of the file const handleDisplayNameChange = (event) => { setDisplayName(event.target.value); }; + // Handler for changing the visibility setting (public/private) const handleVisibilityChange = (event) => { setVisibleToAll(event.target.checked); }; + // Handler for inputting YouTube link instead of a file const handleYoutubeLinkChange = (event) => { setYoutubeLink(event.target.value); }; + // Handles file upload or YouTube link submission const handleUpload = async () => { + + // Ensure either a file or a YouTube link is provided if (!selectedFile && !youtubeLink) { alert('Please select a file or enter a URL for the file!'); return; } + // If a file is uploaded, a display name is required if (selectedFile && !displayName) { alert('Please enter a display name!'); return; } + // Prepare the form data for file or YouTube link const formData = new FormData(); if (selectedFile) { formData.append('file', selectedFile); @@ -66,6 +78,7 @@ const FileUploadDownload = () => { formData.append('visibleToAll', visibleToAll); } + // Upload file or link to the backend try { const response = await axios.post('http://localhost:8080/api/v1/files/upload', formData, { headers: { @@ -90,6 +103,7 @@ const FileUploadDownload = () => { } }; + // Handles file download const handleDownload = async (fileId, fileName) => { try { const response = await axios.get(`http://localhost:8080/api/v1/files/${fileId}`, { @@ -108,6 +122,7 @@ const FileUploadDownload = () => { } }; + // Handles file deletion const handleDelete = async (fileId) => { const confirmDelete = window.confirm('Are you sure you want to delete this file?'); if (!confirmDelete) return; diff --git a/front-end/src/Pages/Gallery.jsx b/front-end/src/Pages/Gallery.jsx index fb0ae021..5aaa9a12 100644 --- a/front-end/src/Pages/Gallery.jsx +++ b/front-end/src/Pages/Gallery.jsx @@ -5,6 +5,11 @@ import '../components/Gallery.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // FontAwesome for icons import { faPen, faEye, faTrash } from '@fortawesome/free-solid-svg-icons'; // Import necessary icons +/** + * Fetch gallery items from the backend API. + * Fetches the list of albums from the gallery API endpoint. + * The results are sorted in descending order based on albumID. + */ const fetchGallery = async () => { try { const response = await axios.get('http://localhost:8080/api/v1/gallery'); @@ -15,11 +20,15 @@ const fetchGallery = async () => { } }; +/** + * Gallery component for displaying a list of albums and providing functionality for adding, viewing, editing, and deleting items. + */ const Gallery = () => { const [gallery, setGallery] = useState([]); const [showForm, setShowForm] = useState(false); const [file, setFile] = useState(null); + // Fetch and load the gallery when the component is first rendered useEffect(() => { const getGallery = async () => { const latestGallery = await fetchGallery(); @@ -29,18 +38,25 @@ const Gallery = () => { getGallery(); }, []); + // Toggles the display of the album addition form const toggleForm = () => { setShowForm(!showForm); }; + // Handles file input change (for album cover image) const handleFileChange = (event) => { setFile(event.target.files[0]); }; + /** + * Handles form submission to add a new gallery item. + * Sends the form data (album name, URL, cover image) to the backend. + */ const handleSubmit = async (event) => { event.preventDefault(); const form = event.target; + // Create a new FormData object to submit the form data const formData = new FormData(); formData.append('albumName', form.albumName.value); formData.append('albumURL', form.albumURL.value); @@ -66,6 +82,10 @@ const Gallery = () => { } }; + /** + * Handles the deletion of a gallery item by albumID. + * Sends a DELETE request to remove the item from the backend. + */ const onDeleteClick = async (albumID) => { try { await axios.delete(`http://localhost:8080/api/v1/gallery/${albumID}`); @@ -78,6 +98,7 @@ const Gallery = () => { return ( <> + {/* Breadcrumb navigation for the page */}

Gallery

+ + {/* Form toggle button for adding a new gallery item */}
{loggedInUser.isLoggedIn && (
@@ -104,6 +127,8 @@ const Gallery = () => {
)} + + {/* Display the form when showForm is true */} {showForm && (
@@ -130,6 +155,7 @@ const Gallery = () => { )}
+ {/* Display the gallery items */}
{gallery.map((item) => (
@@ -140,10 +166,11 @@ const Gallery = () => {

{item.albumName}

Click here for more images + {/* Show edit, view, and delete buttons for logged-in users */} {loggedInUser.isLoggedIn && (
- - + {/* + */}
)} diff --git a/front-end/src/Pages/Home.jsx b/front-end/src/Pages/Home.jsx index 86b3df68..2ed3cb12 100644 --- a/front-end/src/Pages/Home.jsx +++ b/front-end/src/Pages/Home.jsx @@ -1,14 +1,13 @@ import React from "react"; -import { useNews } from "./NewsContext"; import Slideshow from "../bodyComponents/SlideShow"; import NewsGrid from "../bodyComponents/NewsGrid.jsx"; -import style from './Home.module.css'; +import style from '../components/Home.module.css'; import ParticipantMap from '../bodyComponents/participantMap.jsx'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBell, faCalendar, faFolder, faMapMarkerAlt, faChartPie, faBullseye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'; import { faGraduationCap, faShield, faUsers, faBuilding} from '@fortawesome/free-solid-svg-icons'; import {Link, Outlet} from 'react-router-dom'; -import cylcleLogo from '../assets/CYCLE-logo.png'; + // this has to be imported from backend // 1200px height images are ideal const fadeImages = [ diff --git a/front-end/src/Pages/Login.jsx b/front-end/src/Pages/Login.jsx index 292d6759..4df84e70 100644 --- a/front-end/src/Pages/Login.jsx +++ b/front-end/src/Pages/Login.jsx @@ -1,10 +1,9 @@ -//Not used now - +/*Not in use now*/ import React, { useEffect, useState } from "react"; import { useNavigate } from 'react-router-dom'; import axios from "axios"; -import style from './Login.module.css'; +import style from '../components/Login.module.css'; import cylcleLogo from '../assets/CYCLE-logo.png'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'; diff --git a/front-end/src/Pages/NewsContext.jsx b/front-end/src/Pages/NewsContext.jsx index 174e98eb..4c012436 100644 --- a/front-end/src/Pages/NewsContext.jsx +++ b/front-end/src/Pages/NewsContext.jsx @@ -1,17 +1,22 @@ import React, { createContext, useState, useEffect, useContext } from 'react'; +// Create a context to manage news data const NewsContext = createContext(); +// Custom hook to consume the NewsContext in other components export const useNews = () => useContext(NewsContext); +// NewsProvider component to fetch and provide news data to its children export const NewsProvider = ({ children }) => { const [news, setNews] = useState([]); + // useEffect hook to fetch news data on component mount useEffect(() => { const fetchNews = async () => { console.log('Fetching news started'); const start = performance.now(); + // Send GET request to fetch news from the backend API try { const response = await fetch('http://localhost:8080/api/v1/news', { method: 'GET', @@ -28,7 +33,6 @@ export const NewsProvider = ({ children }) => { const data = await response.json(); setNews(data); - localStorage.setItem('news', JSON.stringify(data)); } catch (error) { console.error('Error fetching news:', error); } @@ -37,12 +41,7 @@ export const NewsProvider = ({ children }) => { console.log(`Fetching news ended. Time taken: ${end - start} ms`); }; - const savedNews = localStorage.getItem('news'); - if (savedNews) { - setNews(JSON.parse(savedNews)); - } else { - fetchNews(); - } + fetchNews(); // Fetch news on component mount }, []); return ( diff --git a/front-end/src/Pages/ProjectManagement.jsx b/front-end/src/Pages/ProjectManagement.jsx index ef077f01..b2e8b2ff 100644 --- a/front-end/src/Pages/ProjectManagement.jsx +++ b/front-end/src/Pages/ProjectManagement.jsx @@ -126,9 +126,6 @@ const onDeleteClick = async (task_ID) => { } } - - - //to refresh on admin requirement => get ALL TASKS function getAllTaskInfo(){ @@ -174,7 +171,6 @@ const onDeleteClick = async (task_ID) => { // getPersonalTaskInfo(); // } getAllTaskInfo(); - } @@ -286,7 +282,6 @@ const onDeleteClick = async (task_ID) => {
}
- )) } { @@ -300,4 +295,5 @@ const onDeleteClick = async (task_ID) => { // } } - export default ProjectManagement; \ No newline at end of file + +export default ProjectManagement; \ No newline at end of file diff --git a/front-end/src/Pages/Repository.jsx b/front-end/src/Pages/Repository.jsx index 7be04c6c..759f2929 100644 --- a/front-end/src/Pages/Repository.jsx +++ b/front-end/src/Pages/Repository.jsx @@ -1,33 +1,40 @@ import style from "../components/Repository.module.css"; +// Repository component to display various sections with embedded Google Drive folders function Repository() { return( <> + {/* Title of the Repository section */}

Repository

+ {/* Subtitle for the UOP Working Folder section */}

UOP Working Folder

+ {/* Subsection for Proposal */}

Proposal

+ + {/* Embedded Google Drive folder for Proposal */} + {/* Subsection for Templates */}

Templates

+ {/* Subsection for WP5 */}

WP5

- - + {/* Subtitle for CYCLE Data section */}

CYCLE Data

diff --git a/front-end/src/Pages/Workplan.jsx b/front-end/src/Pages/Workplan.jsx index c2780192..992ce160 100644 --- a/front-end/src/Pages/Workplan.jsx +++ b/front-end/src/Pages/Workplan.jsx @@ -9,7 +9,7 @@ //TODO: Set the last modified date and User import { useEffect , useState} from 'react'; -import style from './Workplan.module.css' +import style from '../components/Workplan.module.css' import axios from 'axios'; import { loggedInUser } from '../components/Header'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; diff --git a/front-end/src/Pages/Deliverables.module.css b/front-end/src/components/Deliverables.module.css similarity index 100% rename from front-end/src/Pages/Deliverables.module.css rename to front-end/src/components/Deliverables.module.css diff --git a/front-end/src/components/Header.css b/front-end/src/components/Header.css index d293236f..f37b0dc7 100644 --- a/front-end/src/components/Header.css +++ b/front-end/src/components/Header.css @@ -598,7 +598,7 @@ .logo-block { flex-direction: column; align-items: center; - margin-top: 15%; + margin-top: 0%; } .Erasmus-plus-Logo { diff --git a/front-end/src/components/Header.jsx b/front-end/src/components/Header.jsx index 9eb81bda..868d731d 100644 --- a/front-end/src/components/Header.jsx +++ b/front-end/src/components/Header.jsx @@ -7,16 +7,17 @@ import erasmusLogo from '../assets/erasmus-plus-logo.png'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faMessage, faBell, faAngleRight, faUser, faUserCircle, faFile,faCalendarDays,faBars } from '@fortawesome/free-solid-svg-icons'; +// Global user state export let loggedInUser = { isLoggedIn: false, firstName: '', lastName: '' }; function Header(){ - // Constants for hamburger menu + // State for hamburger menu const [menuOpen, setMenuOpen] = useState(false); - // Constants for hamburger menu + // State for admin menu const [adminmenuOpen, setAdminMenuOpen] = useState(false); - // Constants for login button + // State for login button visibility const [isVisible, setIsVisible] = useState(true); const [user, setUser] = useState(null); diff --git a/front-end/src/Pages/Home.module.css b/front-end/src/components/Home.module.css similarity index 68% rename from front-end/src/Pages/Home.module.css rename to front-end/src/components/Home.module.css index b542c695..88b2d566 100644 --- a/front-end/src/Pages/Home.module.css +++ b/front-end/src/components/Home.module.css @@ -1,4 +1,4 @@ - +/* Styles for the paragraph element. Adds a border, rounded corners, and padding for a card-like effect. */ .paragraph{ border: 2px solid hsl(225, 87%, 21%); border-radius: 20px; @@ -16,6 +16,7 @@ font-family: 'Caudex'; } +/* Flex container for layout alignment between two columns */ .container { display: flex; justify-content: space-between; @@ -23,29 +24,36 @@ padding: 10px; } + /* Left column occupies 55% of the container */ .leftColumn { width: 55%; } + /* Right column occupies 45% of the container */ .rightColumn { width: 45%; } + +/* Styles for displaying partner logos in a flexible row layout */ .partnerLogoImages { display: flex; flex-wrap: wrap; justify-content: space-between; } + /* Hover effect for images to scale up and change opacity */ .HoveringImg:hover{ transform: scale(1.2); opacity: 0.8; } +/* Base style for the images used */ .HoveringImg{ height:130px } +/* Flexbox setup for partner logo images */ .partnerLogoImages{ display:flex; flex-direction:row; @@ -54,10 +62,12 @@ align-items: center; } +/* Class to hide partners list by default on larger screens */ .partnersList{ display: none } +/* Flexbox for arranging project summary items */ .projectSummaryFlex{ display:flex; flex-direction:row; @@ -65,6 +75,7 @@ align-items: center; } +/* Individual item styles within the project summary section */ .projectSummaryFlexItem { width:29%; display: flex; @@ -74,21 +85,24 @@ padding: 10px 20px; color:#000000 ; } +/* No margins on paragraphs within the project summary items */ .projectSummaryFlexItem p { margin: 0; } +/* Bold class to apply heavier font-weight */ .projectSummaryFlexItem .bold { font-weight: 700; } +/* Style for SVG icons in project summary items */ .projectSummaryFlexItem svg { margin-right: 13px; font-size: 1.5em; color:#004594ca ; } - +/* Project description card with border, padding, and rounded corners */ .proj_desc { padding: 20px; display: inline-block; @@ -103,23 +117,25 @@ color:#004594ca ; font-family: 'Caudex'; } +/* Slight hover effect for project description text */ .proj_desc p:hover { transform: scale(1.01); } -/* Initially hidden */ +/* Hidden class for smooth fade-in animations */ .hidden { opacity: 0; transform: translateY(50px); /* Start with an offset */ transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition */ } -/* Visible state */ +/* Visible state to make the element appear with animation */ .visible { opacity: 1; transform: translateY(0); /* Bring it to the original position */ } +/* Target group cards container styling */ .TargetGroupCards { align-items: left; justify-content: left; @@ -127,6 +143,7 @@ color:#004594ca ; width: auto; } +/* Target group card with rounded corners, centered text, and hover effects */ .TargetGroupCard { border-radius: 1em; display: inline-block; @@ -139,20 +156,21 @@ color:#004594ca ; flex-direction: row; } +/* Hover effect for target group card */ .TargetGroupCard:hover { transform: scale(1.05); - } +/* Icon within the target group card */ .tgicon { width: 30px; height: 30px; display: center; align-items: center; color:#0a6b29 ; - } +/* Section for target groups with green border and light background */ .targetgroupsecsion { border: 2px solid hsl(105, 68%, 24%); background-color: hsl(104, 60%, 95%); @@ -166,18 +184,22 @@ color:#004594ca ; color: rgb(0, 0, 0); font-family: 'Caudex'; } + +/* Responsive design for screens below 1280px, reducing right column width */ @media screen and (max-width: 1280px) { .rightColumn{ width: 30%; } } +/* Hide the right column on smaller screens below 1100px */ @media screen and (max-width: 1100px) { .rightColumn{ display: none; } } +/* Responsive adjustments for screens below 1000px */ @media screen and (max-width: 1000px) { .partnersList{ diff --git a/front-end/src/Pages/Login.module.css b/front-end/src/components/Login.module.css similarity index 99% rename from front-end/src/Pages/Login.module.css rename to front-end/src/components/Login.module.css index 10c413ac..3dbc10b2 100644 --- a/front-end/src/Pages/Login.module.css +++ b/front-end/src/components/Login.module.css @@ -1,3 +1,4 @@ +/*Not in use now*/ .LoginCard { display: flex; flex-direction: column; diff --git a/front-end/src/components/News.css b/front-end/src/components/News.css index de5dd515..e1211851 100644 --- a/front-end/src/components/News.css +++ b/front-end/src/components/News.css @@ -1,4 +1,4 @@ - +/* Styles for the news title section */ .NewsTitle{ margin-top: 1%; margin-left: 5%; @@ -12,6 +12,7 @@ margin-right: 5%; } +/* Styles for the section that holds the news addition form */ .NewsAdd { display: flex; flex-direction: column; @@ -20,6 +21,7 @@ width: 90%; } +/* Styles for the button that adds news */ .AddNewsButton{ margin-top: 2px; padding: 10px 20px; @@ -34,6 +36,7 @@ color: #ffffff; } +/* Styles for the add news form layout */ .add-news-form { background-color: #ffffff; padding: 20px; @@ -47,6 +50,7 @@ margin-top: 5px; } +/* Centers the form container vertically */ .add-news-form-container { margin-top: 40px; display: flex; @@ -55,6 +59,7 @@ height: 100vh; } +/* Styles for the form title */ .add-news-form h2 { font-size: 2rem; margin-bottom: 20px; @@ -62,10 +67,12 @@ font-family:'Times New Roman', Times, serif; } +/* Styles for form groups (label + input/textarea) */ .form-group { margin-bottom: 15px; } +/* Styles for the label elements */ .form-group label { display: block; margin-bottom: 5px; @@ -74,21 +81,26 @@ font-family:'Times New Roman', Times, serif; } +/* Styles for input elements */ .form-group input { background: transparent; color: black; font-family:'Times New Roman', Times, serif; } +/* Styles for the textarea */ .form-group textarea { background: transparent; color: black; font-family:'Times New Roman', Times, serif; } + +/* Inverts the color of the date picker */ ::-webkit-calendar-picker-indicator { filter: invert(1); } +/* Common styles for text, url, date inputs, and textarea */ .form-group input[type="text"], .form-group input[type="url"], .form-group input[type="date"], @@ -100,10 +112,12 @@ border-radius: 4px; } +/* Styles for form buttons */ .form-buttons { margin-top: 20px; } +/* General styles for form buttons */ .form-buttons button { padding: 10px 20px; margin-right: 10px; @@ -115,14 +129,17 @@ cursor: pointer; } +/* Styles for secondary buttons */ .form-buttons button[type="button"] { background-color: #6c757d; } +/* Adds hover effect on buttons */ .form-buttons button:hover { opacity: 0.8; } +/* Responsive styles for screens smaller than 768px */ @media (max-width: 768px) { .add-news-form { padding: 15px; @@ -214,8 +231,6 @@ text-decoration: underline; } - - .actionButton{ margin-right: 5px; padding:0; diff --git a/front-end/src/components/Overview.css b/front-end/src/components/Overview.css index 6386c490..ae8cbde6 100644 --- a/front-end/src/components/Overview.css +++ b/front-end/src/components/Overview.css @@ -1,4 +1,4 @@ -/* Full overview page alignments */ +/* Styles for the full project overview page alignment */ .projectOverview { margin-top: 1%; margin-left: 5%; @@ -12,7 +12,7 @@ margin-right: 5%; } - +/* Breadcrumb navigation styles */ .breadcrumb { list-style: none; display: flex; @@ -24,31 +24,36 @@ margin-right: 5px; } + /* Adds ">" symbol between breadcrumb items */ .breadcrumb-item::after { content: ">"; margin-left: 5px; } - + + /* Removes the ">" after the last breadcrumb item */ .breadcrumb-item:last-child::after { content: ""; } + /* Styles for breadcrumb links */ .breadcrumb-item a { text-decoration: none; color: #5086c0; /* Blue color */ } + /* Styles for breadcrumb links on hover */ .breadcrumb-item a:hover { text-decoration: none; color: #7e96af; /* Blue color */ } + /* Styles for active breadcrumb items */ .breadcrumb-item.active { color: #5c6064; /* Gray color */ } -/* CYCLE Overview part alignments */ +/* Styles for the CYCLE overview section */ .overview-para { border: 2px solid rgba(10, 48, 128); border-radius: 20px; @@ -68,25 +73,30 @@ font-family: 'Caudex'; } +/* Styles for the text inside the overview description block */ .overview-descri { color: #000000; /* Text color for better contrast */ text-align: center; /* Center the text inside the block */ } + +/* Adds a slight scale transformation on hover for the overview description */ .overview-descri :hover { transform: scale(1.01); } +/* Styles for the overview title box */ .Overview-title-box { text-align: center; /* Center text */ padding: 1%;; } +/* Styles for the headings inside the overview title box */ .Overview-title-box h3 { margin: 0; /* Remove default margin */ font-size: 20px; /* Increase font size */ } -/* CYCLE Goals part alignments */ +/* Styles for the CYCLE goals section */ .Goals { border: 2px solid hsl(105, 68%, 24%); border-radius: 20px; @@ -102,21 +112,23 @@ font-family: 'Caudex'; } +/* Styles for the goals title */ .GoalsTitle { text-align: center; font-size: 20px; } -/* CYCLE Goals part list alignments */ +/* Styles for the list items in the goals section */ .Goals li { margin-bottom: 15px; } +/* Adds a slight scale transformation on hover for the list items */ .Goals li:hover { transform: scale(1.01); } -/* CYCLE overview and goals titles */ +/* Styles for the CYCLE overview and goals section headings */ .overview-para h3, .Goals h3 { color: hsl(105, 68%, 24%); font-size: 22px; diff --git a/front-end/src/components/ProjectManagement.module.css b/front-end/src/components/ProjectManagement.module.css index 6d2fb1c9..4789cd10 100644 --- a/front-end/src/components/ProjectManagement.module.css +++ b/front-end/src/components/ProjectManagement.module.css @@ -1,3 +1,4 @@ +/* Title styling for the Project Management section */ .ProjectManagementTitle{ margin-top: 2%; margin-left: 5%; @@ -6,24 +7,28 @@ font-size: 20px; font-family: 'Caudex'; } -.showDiv{ +/* Class to show a div element (displayed by default) */ +.showDiv{ display: block; - } +/* Class to hide a div element (used for conditional display) */ .hideDiv{ display: none; } +/* Anchor tag (link) styling */ a{ color: #000; } +/* Hover effect for links */ a:hover{ color: #2113e2; } +/* Styles for task cards used for project tasks */ .taskCards{ border: 1px solid hsl(222, 83%, 98%); /*border-radius: 20px;*/ @@ -42,19 +47,21 @@ a:hover{ text-align: center; } -/* Data input boxes and their topics */ +/* Styles for input boxes and their labels in forms */ .inputbox { display: flex; align-items: center; margin: 15px 20px; } + + /* Styles for labels inside the input boxes */ .inputbox label{ padding: 15px; font-size: 16px; width: 15% ; } - /* Inside the data input boxes */ +/* Styles for input fields inside the input boxes */ .inputbox .field { width: 40%; position: absolute; @@ -68,6 +75,7 @@ a:hover{ } + /* Styles for integer input fields with a smaller width */ .inputbox .integerField { width: 5%; position: absolute; @@ -81,21 +89,22 @@ a:hover{ } - /* New Entry Interface */ -/* Form title */ +/* Styles for the form title in the new entry interface */ .formTitle { text-align: center; color:hsl(226, 64%, 35%); font-size: 20px; margin-top: 0px; } - /* Form */ + +/* Styles for the form structure */ .dataForm form { margin-right: 20px; margin-left: 20px; justify-items: center; } + /* Container for checkboxes with scrollable content */ .checkBoxContainer { border:2px solid #ccc; width:300px; @@ -106,6 +115,7 @@ a:hover{ border: 2px solid #c9e1ef; } +/* Inverts colors for the calendar picker icon */ ::-webkit-calendar-picker-indicator { filter: invert(1); } diff --git a/front-end/src/components/Repository.module.css b/front-end/src/components/Repository.module.css index 2d4038e5..9ed29502 100644 --- a/front-end/src/components/Repository.module.css +++ b/front-end/src/components/Repository.module.css @@ -1,3 +1,4 @@ +/* Styling for the main repository title */ .RepositoryTitle{ margin-top: 2%; margin-left: 5%; @@ -7,6 +8,7 @@ font-family: 'Caudex'; } + /* Styling for the subtitle of the repository */ .RepositorySubTitle{ margin-top: 2%; margin-left: 5%; @@ -17,6 +19,7 @@ color: rgb(10, 48, 128); } + /* Styling for sub-subtitle under the repository section */ .RepositorySuperSubTitle{ margin-top: 2%; margin-left: 8%; diff --git a/front-end/src/components/Team.css b/front-end/src/components/Team.css index 7b0d3fc8..c0f12d71 100644 --- a/front-end/src/components/Team.css +++ b/front-end/src/components/Team.css @@ -1,3 +1,4 @@ +/* General Styles for Team Title */ .TeamTitle { margin-top: 1%; margin-left: 5%; @@ -11,6 +12,7 @@ margin-right: 5%; } +/* Styles for Team Tabs */ .TeamTabs { margin-top: 20px; margin-bottom: 30px; @@ -21,6 +23,7 @@ gap: 10px; /* Adds space between the tabs */ } +/* Button Styling within the Team Tabs */ .TeamTabs button { background-color: #263d8300; padding: 5px; /* Optional: Add padding for a better button size */ @@ -29,10 +32,12 @@ font-family: 'Caudex'; } +/* Active Tab Styling */ .TeamTabs button.active { border-bottom: 2px solid #254ad281; /* Underline for the active tab */ } +/* Hover Effect for Tab Buttons */ .TeamTabs button:hover { opacity: 0.7; /* Optional: Add hover effect */ } @@ -43,10 +48,9 @@ .SUoTLogoTab , .KMIoTLLogoTab{ width: 65px; - } - +/* Styling for University of Peradeniya (UoP) Team Section */ .UoPTeam { border: 2px solid hsl(51, 89%, 58%); margin-bottom: 5%; @@ -59,7 +63,7 @@ } - +/* Logo Centering for UoP */ .UoPLogo { display: flex; justify-content: center; /* Center items horizontally */ @@ -70,14 +74,14 @@ margin-bottom: 20px; } - - +/* Team Section Titles */ .UoPTeamTitle { text-align: center; margin-bottom: 1%; font-size: 25px; } +/* Subtitles for Each Team Member Section */ .TeamSubTitle { text-align: center; margin-bottom: 1%; @@ -85,6 +89,7 @@ color: #942300; } +/* Card Layout for Team Members */ .TeamCards { display: center; margin-bottom: 1%; @@ -92,6 +97,7 @@ border-radius: 1em; } +/* Styling for Individual Team Cards */ .TeamCard { border: 2px solid hsl(51, 89%, 58%); padding: 20px; @@ -107,10 +113,12 @@ height: 100%; } +/* Hover Effect for Team Cards */ .TeamCards :hover { transform: scale(1.05); } +/* Link Styling within Team Cards */ .TeamCard a{ color: #9d1d06; /* Default link color */ text-decoration: none; @@ -123,27 +131,29 @@ font-size: 16px; } +/* List Styling for Team Details */ .TeamCard ul{ list-style-type: none; font-size: 16px; padding: 0; } +/* Styling for Profile Pictures in Team Cards */ .TeamProfilePic{ width: 150px; height: auto; border-radius: 50%; } +/* Bold Name Styling for Team Members */ .TeamMemberName{ font-weight: bold; color:hsl(0, 0%, 0%); font-size: 18px; } - +/* Specific Team Sections */ /* University of Colombo*/ - .UoCTeam { border: 2px solid hsl(0, 0%, 1%); margin-bottom: 5%; @@ -153,7 +163,6 @@ padding-top: 20px; border-radius: 50px; background-color: hsl(0, 0%, 97%); - } .UoCLogo { @@ -225,7 +234,6 @@ /* Piraeus Research Center*/ - .PRCTeam { border: 2px solid hsl(223, 83%, 19%); margin-bottom: 5%; @@ -308,7 +316,6 @@ /* Hanoi University of Industry */ - .HUoITeam { border: 2px solid hsl(0, 75%, 54%); margin-bottom: 5%; @@ -615,7 +622,7 @@ padding: 0; } - +/* Media Queries for Responsive Design */ @media (max-width: 1000px) { .TeamTabs { margin-bottom: 20px; diff --git a/front-end/src/Pages/Workplan.module.css b/front-end/src/components/Workplan.module.css similarity index 100% rename from front-end/src/Pages/Workplan.module.css rename to front-end/src/components/Workplan.module.css From b46cd4972963a676c284d3c759abc8b051270d40 Mon Sep 17 00:00:00 2001 From: Wethmi Ranasinghe Date: Tue, 17 Sep 2024 19:33:29 +0530 Subject: [PATCH 2/3] Location of Home.module.css changed --- front-end/src/Pages/Home.jsx | 2 +- front-end/src/{components => Pages}/Home.module.css | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename front-end/src/{components => Pages}/Home.module.css (100%) diff --git a/front-end/src/Pages/Home.jsx b/front-end/src/Pages/Home.jsx index 2ed3cb12..a28d74a4 100644 --- a/front-end/src/Pages/Home.jsx +++ b/front-end/src/Pages/Home.jsx @@ -1,7 +1,7 @@ import React from "react"; import Slideshow from "../bodyComponents/SlideShow"; import NewsGrid from "../bodyComponents/NewsGrid.jsx"; -import style from '../components/Home.module.css'; +import style from './Home.module.css'; import ParticipantMap from '../bodyComponents/participantMap.jsx'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBell, faCalendar, faFolder, faMapMarkerAlt, faChartPie, faBullseye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'; diff --git a/front-end/src/components/Home.module.css b/front-end/src/Pages/Home.module.css similarity index 100% rename from front-end/src/components/Home.module.css rename to front-end/src/Pages/Home.module.css From eb16179262e804e72d9f662bdb035772a87b93b9 Mon Sep 17 00:00:00 2001 From: Wethmi Ranasinghe Date: Tue, 17 Sep 2024 19:47:23 +0530 Subject: [PATCH 3/3] Home.module.css updated --- front-end/src/Pages/Home.jsx | 2 +- front-end/src/{Pages => components}/Home.module.css | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename front-end/src/{Pages => components}/Home.module.css (100%) diff --git a/front-end/src/Pages/Home.jsx b/front-end/src/Pages/Home.jsx index a28d74a4..0928eb6b 100644 --- a/front-end/src/Pages/Home.jsx +++ b/front-end/src/Pages/Home.jsx @@ -1,7 +1,7 @@ import React from "react"; import Slideshow from "../bodyComponents/SlideShow"; import NewsGrid from "../bodyComponents/NewsGrid.jsx"; -import style from './Home.module.css'; +import style from '../components./Home.module.css'; import ParticipantMap from '../bodyComponents/participantMap.jsx'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBell, faCalendar, faFolder, faMapMarkerAlt, faChartPie, faBullseye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'; diff --git a/front-end/src/Pages/Home.module.css b/front-end/src/components/Home.module.css similarity index 100% rename from front-end/src/Pages/Home.module.css rename to front-end/src/components/Home.module.css