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,9 +168,33 @@ export const AdminCoursePage = () => {
</div> </div>
{showForm && ( {showForm && (
<div style={formStyle}> <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> <h3>{isEditMode ? 'Edit Course' : 'Add New Course'}</h3>
<form onSubmit={handleAddOrUpdateCourse}>
<form onSubmit={handleAddOrUpdateCourse} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<input <input
placeholder="Course ID" placeholder="Course ID"
value={currentCourse.courseId} value={currentCourse.courseId}
@@ -217,7 +241,7 @@ export const AdminCoursePage = () => {
<option value="not submitted">Not Submitted</option> <option value="not submitted">Not Submitted</option>
</select> </select>
<div > <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
<button type="submit" style={submitButtonStyle}> <button type="submit" style={submitButtonStyle}>
{isEditMode ? 'Update Course' : 'Add Course'} {isEditMode ? 'Update Course' : 'Add Course'}
</button> </button>
@@ -227,7 +251,9 @@ export const AdminCoursePage = () => {
</div> </div>
</form> </form>
</div> </div>
)} </div>
)}
{/* TABLE DATA */} {/* TABLE DATA */}
<table style={tableStyle}> <table style={tableStyle}>

View File

@@ -207,15 +207,33 @@ export const AdminFacultyPage = () => {
</div> </div>
{showForm && ( {showForm && (
<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={{ <div style={{
backgroundColor: '#fff', backgroundColor: '#fff',
borderRadius: '10px', borderRadius: '10px',
padding: '20px', padding: '20px',
boxShadow: '0 5px 20px rgba(0,0,0,0.1)', boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
marginBottom: '20px', 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> <h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
<form onSubmit={handleAddOrUpdateFaculty} style={formStyle}>
<form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<div style={inputContainer}> <div style={inputContainer}>
<input <input
placeholder="Faculty ID" placeholder="Faculty ID"
@@ -233,7 +251,6 @@ export const AdminFacultyPage = () => {
<div style={inputContainer}> <div style={inputContainer}>
<input <input
placeholder="Email" placeholder="Email"
value={currentFaculty.email} value={currentFaculty.email}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })} onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
@@ -256,10 +273,8 @@ export const AdminFacultyPage = () => {
/> />
</div> </div>
{currentFaculty.courses.map((course, index) => ( {currentFaculty.courses.map((course, index) => (
<div key={index} style={courseContainerStyle}> <div key={index} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
<select <select
value={course} value={course}
onChange={(e) => handleCourseChange(index, e.target.value)} onChange={(e) => handleCourseChange(index, e.target.value)}
@@ -272,10 +287,10 @@ export const AdminFacultyPage = () => {
</option> </option>
))} ))}
</select> </select>
<button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}></button> <button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}></button>
</div> </div>
))} ))}
<button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button> <button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
<div style={formButtonContainer}> <div style={formButtonContainer}>
@@ -286,7 +301,10 @@ export const AdminFacultyPage = () => {
</div> </div>
</form> </form>
</div> </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,9 +50,14 @@ 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 */}
<div style={{flexGrow:1}}>
<FilterPage setCourses={setCourses} /> <FilterPage setCourses={setCourses} />
<table className="course-table"> <table className="course-table">
<thead> <thead>
@@ -78,8 +83,9 @@ const CourseTable = () => {
)} )}
</tbody> </tbody>
</table> </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",