footer fixed and other css fixed

This commit is contained in:
ayoitshasya
2025-04-03 23:24:25 +05:30
parent 4c8b0839a4
commit 8880f0bbb2
13 changed files with 317 additions and 186 deletions

View File

@@ -8,6 +8,12 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<style>
#root{
min-height: 100vh;
}
</style>
<title>appointment_to_examiner</title>
</head>
<body>

View File

@@ -168,66 +168,92 @@ export const AdminCoursePage = () => {
</div>
{showForm && (
<div style={formStyle}>
<h3>{isEditMode ? 'Edit Course' : 'Add New Course'}</h3>
<form onSubmit={handleAddOrUpdateCourse}>
<input
placeholder="Course ID"
value={currentCourse.courseId}
onChange={(e) => setCurrentCourse({ ...currentCourse, courseId: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Course Name"
value={currentCourse.name}
onChange={(e) => setCurrentCourse({ ...currentCourse, name: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Department"
value={currentCourse.department}
onChange={(e) => setCurrentCourse({ ...currentCourse, department: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Program"
value={currentCourse.program}
onChange={(e) => setCurrentCourse({ ...currentCourse, program: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Scheme"
value={currentCourse.scheme}
onChange={(e) => setCurrentCourse({ ...currentCourse, scheme: e.target.value })}
style={inputStyle}
/>
<input
type="number"
placeholder="Semester"
value={currentCourse.semester}
onChange={(e) => setCurrentCourse({ ...currentCourse, semester: e.target.value })}
style={inputStyle}
/>
<select
value={currentCourse.status}
onChange={(e) => setCurrentCourse({ ...currentCourse, status: e.target.value })}
style={inputStyle}
>
<option value="submitted">Submitted</option>
<option value="not submitted">Not Submitted</option>
</select>
<div style={{
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '100vh',
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1000, // Ensures it's above all content
padding: '10px', // Prevents touching screen edges
}}>
<div style={{
backgroundColor: '#fff',
borderRadius: '10px',
padding: '20px',
boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
maxWidth: '90vw', // Adjusts width dynamically
maxHeight: '80vh', // Prevents excessive height
overflowY: 'auto', // Enables scrolling if content is too long
display: 'flex',
flexDirection: 'column',
}}>
<h3>{isEditMode ? 'Edit Course' : 'Add New Course'}</h3>
<form onSubmit={handleAddOrUpdateCourse} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<input
placeholder="Course ID"
value={currentCourse.courseId}
onChange={(e) => setCurrentCourse({ ...currentCourse, courseId: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Course Name"
value={currentCourse.name}
onChange={(e) => setCurrentCourse({ ...currentCourse, name: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Department"
value={currentCourse.department}
onChange={(e) => setCurrentCourse({ ...currentCourse, department: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Program"
value={currentCourse.program}
onChange={(e) => setCurrentCourse({ ...currentCourse, program: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Scheme"
value={currentCourse.scheme}
onChange={(e) => setCurrentCourse({ ...currentCourse, scheme: e.target.value })}
style={inputStyle}
/>
<input
type="number"
placeholder="Semester"
value={currentCourse.semester}
onChange={(e) => setCurrentCourse({ ...currentCourse, semester: e.target.value })}
style={inputStyle}
/>
<select
value={currentCourse.status}
onChange={(e) => setCurrentCourse({ ...currentCourse, status: e.target.value })}
style={inputStyle}
>
<option value="submitted">Submitted</option>
<option value="not submitted">Not Submitted</option>
</select>
<div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
<button type="submit" style={submitButtonStyle}>
{isEditMode ? 'Update Course' : 'Add Course'}
</button>
<button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>
Cancel
</button>
</div>
</form>
</div>
</div>
)}
<div >
<button type="submit" style={submitButtonStyle}>
{isEditMode ? 'Update Course' : 'Add Course'}
</button>
<button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>
Cancel
</button>
</div>
</form>
</div>
)}
{/* TABLE DATA */}
<table style={tableStyle}>

View File

@@ -207,86 +207,104 @@ export const AdminFacultyPage = () => {
</div>
{showForm && (
<div style={{
backgroundColor: '#fff',
borderRadius: '10px',
padding: '20px',
boxShadow: '0 5px 20px rgba(0,0,0,0.1)',
marginBottom: '20px',
}}>
<h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
<form onSubmit={handleAddOrUpdateFaculty} style={formStyle}>
<div style={inputContainer}>
<input
placeholder="Faculty ID"
value={currentFaculty.facultyId}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Name"
value={currentFaculty.name}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
style={inputStyle}
/>
</div>
<div style={inputContainer}>
<input
placeholder="Email"
value={currentFaculty.email}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Department"
value={currentFaculty.department}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })}
style={inputStyle}
/>
</div>
<div style={inputContainer}>
<input
placeholder="Program"
value={currentFaculty.program}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, program: e.target.value })}
style={inputStyle}
/>
</div>
{currentFaculty.courses.map((course, index) => (
<div key={index} style={courseContainerStyle}>
<select
value={course}
onChange={(e) => handleCourseChange(index, e.target.value)}
style={{ ...inputStyle, flex: 1 }}
>
<option value="">Select Course</option>
{Object.entries(courses).map(([courseId, courseName]) => (
<option key={courseId} value={courseId}>
{courseName}
</option>
))}
</select>
<button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}></button>
</div>
))}
<button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
<div style={formButtonContainer}>
<button type="submit" style={submitButtonStyle}>
{isEditMode ? 'Update Faculty' : 'Add Faculty'}
</button>
<button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>Cancel</button>
</div>
</form>
<div style={{
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '100vh',
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1000, // Ensures it stays above other content
padding: '10px', // Prevents content from hitting screen edges
}}>
<div style={{
backgroundColor: '#fff',
borderRadius: '10px',
padding: '20px',
boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
maxWidth: '90vw', // Ensures it doesnt exceed the viewport width
maxHeight: '80vh', // Ensures it doesnt exceed the viewport height
overflowY: 'auto', // Enables scrolling if content overflows
display: 'flex',
flexDirection: 'column', // Ensures elements stack properly
}}>
<h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
<form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<div style={inputContainer}>
<input
placeholder="Faculty ID"
value={currentFaculty.facultyId}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Name"
value={currentFaculty.name}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
style={inputStyle}
/>
</div>
)}
<div style={inputContainer}>
<input
placeholder="Email"
value={currentFaculty.email}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Department"
value={currentFaculty.department}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })}
style={inputStyle}
/>
</div>
<div style={inputContainer}>
<input
placeholder="Program"
value={currentFaculty.program}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, program: e.target.value })}
style={inputStyle}
/>
</div>
{currentFaculty.courses.map((course, index) => (
<div key={index} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
<select
value={course}
onChange={(e) => handleCourseChange(index, e.target.value)}
style={{ ...inputStyle, flex: 1 }}
>
<option value="">Select Course</option>
{Object.entries(courses).map(([courseId, courseName]) => (
<option key={courseId} value={courseId}>
{courseName}
</option>
))}
</select>
<button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}></button>
</div>
))}
<button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
<div style={formButtonContainer}>
<button type="submit" style={submitButtonStyle}>
{isEditMode ? 'Update Faculty' : 'Add Faculty'}
</button>
<button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>Cancel</button>
</div>
</form>
</div>
</div>
)}
{/* TABLE DATA */}
<table style={tableStyle}>

View File

@@ -81,6 +81,7 @@ const styles = {
},
main: {
width: "100%",
flexGrow: 1
},
};
@@ -216,7 +217,11 @@ const ConsolidatedTable = () => {
};
return (
<>
<div style={{
display:"flex",
flexDirection:"column",
minHeight: "100vh"
}}>
<Navbar />
<ToastContainer />
<div style={styles.main}>
@@ -399,7 +404,7 @@ const ConsolidatedTable = () => {
</div>
</div>
<Footer/>
</>
</div>
);
};

View File

@@ -159,7 +159,7 @@ const CourseForm = () => {
return (
<>
<Navbar />
<div className="container">
<div>
<div className="courseFormContainer">
<div className="courseFormFormContainer">
<h2 className="courseFormHeader">Course Info</h2>

View File

@@ -50,36 +50,42 @@ const CourseTable = () => {
};
return (
<>
<div style={{
display:"flex",
flexDirection:"column",
minHeight: "100vh"
}}>
{/* Pass setCourses to FilterPage so it can update the course list */}
<FilterPage setCourses={setCourses} />
<table className="course-table">
<thead>
<tr>
<th>CourseID</th>
<th>Course Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{courses.length > 0 ? (
courses.map((course) => (
<tr key={course.courseId} onClick={() => handleRowClick(course)}>
<td>{course.courseId}</td>
<td>{course.name}</td>
<td>{getStatus(course.courseId)}</td>
<div style={{flexGrow:1}}>
<FilterPage setCourses={setCourses} />
<table className="course-table">
<thead>
<tr>
<th>CourseID</th>
<th>Course Name</th>
<th>Status</th>
</tr>
))
) : (
<tr>
<td colSpan="3">No courses available</td>
</tr>
)}
</tbody>
</table>
</thead>
<tbody>
{courses.length > 0 ? (
courses.map((course) => (
<tr key={course.courseId} onClick={() => handleRowClick(course)}>
<td>{course.courseId}</td>
<td>{course.name}</td>
<td>{getStatus(course.courseId)}</td>
</tr>
))
) : (
<tr>
<td colSpan="3">No courses available</td>
</tr>
)}
</tbody>
</table>
</div>
<Footer/>
</>
</div>
);
};

View File

@@ -3,6 +3,7 @@ import axios from "axios";
import Navbar from "./Navbar";
import Footer from "./Footer";
const DepartmentConsolidated = () => {
const [searchQuery, setSearchQuery] = useState("");
const [data, setData] = useState([]);
@@ -55,9 +56,15 @@ const DepartmentConsolidated = () => {
};
return (
<>
<div style={{
display:"flex",
flexDirection:"column",
minHeight: "100vh"
}}>
<Navbar />
<div>
<div style={{
flexGrow: 1
}}>
<h1
style={{
textAlign: "center",
@@ -282,7 +289,7 @@ const DepartmentConsolidated = () => {
</div>
</div>
<Footer/>
</>
</div>
);
};

View File

@@ -4,7 +4,7 @@ const contributors = [
{ name: "Harshitha Shetty", github: "https://github.com/HarshithaShetty27" },
{ name: "Harikrishnan Gopal", github: "https://github.com/hk151109" },
{ name: "Suhrud Korgaokar", github: "https://github.com/amNobodyyy" },
{ name: "Hasya Aburi", github: "https://github.com/ayoitshasya" }
{ name: "Hasya Abburi", github: "https://github.com/ayoitshasya" }
];
const footerStyle = {
@@ -13,9 +13,10 @@ const footerStyle = {
textAlign: "center",
padding: "16px",
width: "100%",
position: "relative",
position: "relative", // Change from "fixed" to "relative"
bottom: "0",
boxShadow: "0px -2px 10px rgba(0, 0, 0, 0.2)"
boxShadow: "0px -2px 10px rgba(0, 0, 0, 0.2)",
marginTop: "30px"
};
const linkStyle = {

View File

@@ -57,9 +57,13 @@ const PanelConsolidated = () => {
};
return (
<>
<div style={{
display:"flex",
flexDirection:"column",
minHeight: "100vh"
}}>
<Navbar />
<div style={{ padding: "24px", backgroundColor: "#f7f7f7", minHeight: "100vh" }}>
<div style={{ padding: "24px", backgroundColor: "#f7f7f7", minHeight: "100vh", flexGrow:1 }}>
<h2 style={{ fontSize: "24px", fontWeight: "bold", marginBottom: "16px" }}>Faculty Expertise</h2>
<input
@@ -124,7 +128,7 @@ const PanelConsolidated = () => {
</div>
</div>
<Footer/>
</>
</div>
);
};

View File

@@ -451,10 +451,14 @@ const CourseConsolidated = () => {
return (
<>
<div style={{
display:"flex",
flexDirection:"column",
minHeight: "100vh"
}}>
<Navbar />
<ToastContainer />
<div>
<div style={{flexGrow:1}}>
<h1
style={{
textAlign: "center",
@@ -695,7 +699,7 @@ const CourseConsolidated = () => {
</div>
</div>
<Footer/>
</>
</div>
);
};

6
package-lock.json generated Normal file
View File

@@ -0,0 +1,6 @@
{
"name": "appointment_to_examiner",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}

View File

@@ -21,6 +21,7 @@
"express-session": "^1.18.0",
"googleapis": "^134.0.0",
"jsonwebtoken": "^9.0.2",
"mongodb": "^6.15.0",
"mongoose": "^8.9.5",
"mongoose-findorcreate": "^4.0.0",
"multer": "^1.4.5-lts.1",
@@ -263,9 +264,9 @@
}
},
"node_modules/bson": {
"version": "6.10.1",
"resolved": "https://registry.npmjs.org/bson/-/bson-6.10.1.tgz",
"integrity": "sha512-P92xmHDQjSKPLHqFxefqMxASNq/aWJMEZugpCjf+AF/pgcUpMMQCg7t7+ewko0/u8AapvF3luf/FoehddEK+sA==",
"version": "6.10.3",
"resolved": "https://registry.npmjs.org/bson/-/bson-6.10.3.tgz",
"integrity": "sha512-MTxGsqgYTwfshYWTRdmZRC+M7FnG1b4y7RO7p2k3X24Wq0yv1m77Wsj0BzlPzd/IowgESfsruQCUToa7vbOpPQ==",
"license": "Apache-2.0",
"engines": {
"node": ">=16.20.1"
@@ -1479,13 +1480,13 @@
}
},
"node_modules/mongodb": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.12.0.tgz",
"integrity": "sha512-RM7AHlvYfS7jv7+BXund/kR64DryVI+cHbVAy9P61fnb1RcWZqOW1/Wj2YhqMCx+MuYhqTRGv7AwHBzmsCKBfA==",
"version": "6.15.0",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.15.0.tgz",
"integrity": "sha512-ifBhQ0rRzHDzqp9jAQP6OwHSH7dbYIQjD3SbJs9YYk9AikKEettW/9s/tbSFDTpXcRbF+u1aLrhHxDFaYtZpFQ==",
"license": "Apache-2.0",
"dependencies": {
"@mongodb-js/saslprep": "^1.1.9",
"bson": "^6.10.1",
"bson": "^6.10.3",
"mongodb-connection-string-url": "^3.0.0"
},
"engines": {
@@ -1562,6 +1563,52 @@
"integrity": "sha512-wi0vrTmazWBeZn8wHVdb8NEa+ZrAbnmfI8QltnFeIgvC33VlnooapvPSk21W22IEhs0vZ0cBz0MmXcc7eTTSZQ==",
"license": "MIT"
},
"node_modules/mongoose/node_modules/mongodb": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.12.0.tgz",
"integrity": "sha512-RM7AHlvYfS7jv7+BXund/kR64DryVI+cHbVAy9P61fnb1RcWZqOW1/Wj2YhqMCx+MuYhqTRGv7AwHBzmsCKBfA==",
"license": "Apache-2.0",
"dependencies": {
"@mongodb-js/saslprep": "^1.1.9",
"bson": "^6.10.1",
"mongodb-connection-string-url": "^3.0.0"
},
"engines": {
"node": ">=16.20.1"
},
"peerDependencies": {
"@aws-sdk/credential-providers": "^3.188.0",
"@mongodb-js/zstd": "^1.1.0 || ^2.0.0",
"gcp-metadata": "^5.2.0",
"kerberos": "^2.0.1",
"mongodb-client-encryption": ">=6.0.0 <7",
"snappy": "^7.2.2",
"socks": "^2.7.1"
},
"peerDependenciesMeta": {
"@aws-sdk/credential-providers": {
"optional": true
},
"@mongodb-js/zstd": {
"optional": true
},
"gcp-metadata": {
"optional": true
},
"kerberos": {
"optional": true
},
"mongodb-client-encryption": {
"optional": true
},
"snappy": {
"optional": true
},
"socks": {
"optional": true
}
}
},
"node_modules/mongoose/node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

View File

@@ -30,6 +30,7 @@
"express-session": "^1.18.0",
"googleapis": "^134.0.0",
"jsonwebtoken": "^9.0.2",
"mongodb": "^6.15.0",
"mongoose": "^8.9.5",
"mongoose-findorcreate": "^4.0.0",
"multer": "^1.4.5-lts.1",