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" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<style>
#root{
min-height: 100vh;
}
</style>
<title>appointment_to_examiner</title> <title>appointment_to_examiner</title>
</head> </head>
<body> <body>

View File

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

View File

@@ -207,86 +207,104 @@ export const AdminFacultyPage = () => {
</div> </div>
{showForm && ( {showForm && (
<div style={{ <div style={{
backgroundColor: '#fff', position: 'fixed',
borderRadius: '10px', top: 0,
padding: '20px', left: 0,
boxShadow: '0 5px 20px rgba(0,0,0,0.1)', width: '100vw',
marginBottom: '20px', height: '100vh',
}}> backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
<h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3> display: 'flex',
<form onSubmit={handleAddOrUpdateFaculty} style={formStyle}> justifyContent: 'center',
<div style={inputContainer}> alignItems: 'center',
<input zIndex: 1000, // Ensures it stays above other content
placeholder="Faculty ID" padding: '10px', // Prevents content from hitting screen edges
value={currentFaculty.facultyId} }}>
onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })} <div style={{
style={inputStyle} backgroundColor: '#fff',
/> borderRadius: '10px',
<input padding: '20px',
placeholder="Name" boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
value={currentFaculty.name} maxWidth: '90vw', // Ensures it doesnt exceed the viewport width
onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })} maxHeight: '80vh', // Ensures it doesnt exceed the viewport height
style={inputStyle} overflowY: 'auto', // Enables scrolling if content overflows
/> display: 'flex',
</div> flexDirection: 'column', // Ensures elements stack properly
}}>
<h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
<div style={inputContainer}> <form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<input <div style={inputContainer}>
<input
placeholder="Email" placeholder="Faculty ID"
value={currentFaculty.email} value={currentFaculty.facultyId}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })} onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
style={inputStyle} style={inputStyle}
/> />
<input <input
placeholder="Department" placeholder="Name"
value={currentFaculty.department} value={currentFaculty.name}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })} onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
style={inputStyle} 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> </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 DATA */}
<table style={tableStyle}> <table style={tableStyle}>

View File

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

View File

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

View File

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

View File

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

View File

@@ -4,7 +4,7 @@ const contributors = [
{ name: "Harshitha Shetty", github: "https://github.com/HarshithaShetty27" }, { name: "Harshitha Shetty", github: "https://github.com/HarshithaShetty27" },
{ name: "Harikrishnan Gopal", github: "https://github.com/hk151109" }, { name: "Harikrishnan Gopal", github: "https://github.com/hk151109" },
{ name: "Suhrud Korgaokar", github: "https://github.com/amNobodyyy" }, { 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 = { const footerStyle = {
@@ -13,9 +13,10 @@ const footerStyle = {
textAlign: "center", textAlign: "center",
padding: "16px", padding: "16px",
width: "100%", width: "100%",
position: "relative", position: "relative", // Change from "fixed" to "relative"
bottom: "0", 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 = { const linkStyle = {

View File

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

View File

@@ -451,10 +451,14 @@ const CourseConsolidated = () => {
return ( return (
<> <div style={{
display:"flex",
flexDirection:"column",
minHeight: "100vh"
}}>
<Navbar /> <Navbar />
<ToastContainer /> <ToastContainer />
<div> <div style={{flexGrow:1}}>
<h1 <h1
style={{ style={{
textAlign: "center", textAlign: "center",
@@ -695,7 +699,7 @@ const CourseConsolidated = () => {
</div> </div>
</div> </div>
<Footer/> <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", "express-session": "^1.18.0",
"googleapis": "^134.0.0", "googleapis": "^134.0.0",
"jsonwebtoken": "^9.0.2", "jsonwebtoken": "^9.0.2",
"mongodb": "^6.15.0",
"mongoose": "^8.9.5", "mongoose": "^8.9.5",
"mongoose-findorcreate": "^4.0.0", "mongoose-findorcreate": "^4.0.0",
"multer": "^1.4.5-lts.1", "multer": "^1.4.5-lts.1",
@@ -263,9 +264,9 @@
} }
}, },
"node_modules/bson": { "node_modules/bson": {
"version": "6.10.1", "version": "6.10.3",
"resolved": "https://registry.npmjs.org/bson/-/bson-6.10.1.tgz", "resolved": "https://registry.npmjs.org/bson/-/bson-6.10.3.tgz",
"integrity": "sha512-P92xmHDQjSKPLHqFxefqMxASNq/aWJMEZugpCjf+AF/pgcUpMMQCg7t7+ewko0/u8AapvF3luf/FoehddEK+sA==", "integrity": "sha512-MTxGsqgYTwfshYWTRdmZRC+M7FnG1b4y7RO7p2k3X24Wq0yv1m77Wsj0BzlPzd/IowgESfsruQCUToa7vbOpPQ==",
"license": "Apache-2.0", "license": "Apache-2.0",
"engines": { "engines": {
"node": ">=16.20.1" "node": ">=16.20.1"
@@ -1479,13 +1480,13 @@
} }
}, },
"node_modules/mongodb": { "node_modules/mongodb": {
"version": "6.12.0", "version": "6.15.0",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.12.0.tgz", "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.15.0.tgz",
"integrity": "sha512-RM7AHlvYfS7jv7+BXund/kR64DryVI+cHbVAy9P61fnb1RcWZqOW1/Wj2YhqMCx+MuYhqTRGv7AwHBzmsCKBfA==", "integrity": "sha512-ifBhQ0rRzHDzqp9jAQP6OwHSH7dbYIQjD3SbJs9YYk9AikKEettW/9s/tbSFDTpXcRbF+u1aLrhHxDFaYtZpFQ==",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@mongodb-js/saslprep": "^1.1.9", "@mongodb-js/saslprep": "^1.1.9",
"bson": "^6.10.1", "bson": "^6.10.3",
"mongodb-connection-string-url": "^3.0.0" "mongodb-connection-string-url": "^3.0.0"
}, },
"engines": { "engines": {
@@ -1562,6 +1563,52 @@
"integrity": "sha512-wi0vrTmazWBeZn8wHVdb8NEa+ZrAbnmfI8QltnFeIgvC33VlnooapvPSk21W22IEhs0vZ0cBz0MmXcc7eTTSZQ==", "integrity": "sha512-wi0vrTmazWBeZn8wHVdb8NEa+ZrAbnmfI8QltnFeIgvC33VlnooapvPSk21W22IEhs0vZ0cBz0MmXcc7eTTSZQ==",
"license": "MIT" "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": { "node_modules/mongoose/node_modules/ms": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

View File

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