footer fixed and other css fixed

2025-04-03 23:24:25 +05:30
parent 4c8b0839a4
commit 8880f0bbb2
13 changed files with 317 additions and 186 deletions
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -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>
--- a/client/src/Pages/AdminCoursePage.jsx
+++ b/client/src/Pages/AdminCoursePage.jsx
@@ -168,9 +168,33 @@ export const AdminCoursePage = () => {
            </div>

            {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>
-                    <form onSubmit={handleAddOrUpdateCourse}>
+      
+      <form onSubmit={handleAddOrUpdateCourse} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <input
          placeholder="Course ID"
          value={currentCourse.courseId}
@@ -217,7 +241,7 @@ export const AdminCoursePage = () => {
          <option value="not submitted">Not Submitted</option>
        </select>

-                        <div >
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
          <button type="submit" style={submitButtonStyle}>
            {isEditMode ? 'Update Course' : 'Add Course'}
          </button>
@@ -227,7 +251,9 @@ export const AdminCoursePage = () => {
        </div>
      </form>
    </div>
-            )}
+  </div>
+)}
+

            {/* TABLE DATA */}
            <table style={tableStyle}>
--- a/client/src/Pages/AdminFacultyPage.jsx
+++ b/client/src/Pages/AdminFacultyPage.jsx
@@ -207,15 +207,33 @@ export const AdminFacultyPage = () => {
      </div>

      {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={{
      backgroundColor: '#fff',
      borderRadius: '10px',
      padding: '20px',
-          boxShadow: '0 5px 20px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
+      boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
+      maxWidth: '90vw', // Ensures it doesn’t exceed the viewport width
+      maxHeight: '80vh', // Ensures it doesn’t 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={formStyle}>
+      
+      <form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <div style={inputContainer}>
          <input
            placeholder="Faculty ID"
@@ -233,7 +251,6 @@ export const AdminFacultyPage = () => {

        <div style={inputContainer}>
          <input
-
            placeholder="Email"
            value={currentFaculty.email}
            onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
@@ -256,10 +273,8 @@ export const AdminFacultyPage = () => {
          />
        </div>

-
        {currentFaculty.courses.map((course, index) => (
-              <div key={index} style={courseContainerStyle}>
-
+          <div key={index} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
            <select
              value={course}
              onChange={(e) => handleCourseChange(index, e.target.value)}
@@ -272,10 +287,10 @@ export const AdminFacultyPage = () => {
                </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}>
@@ -286,7 +301,10 @@ export const AdminFacultyPage = () => {
        </div>
      </form>
    </div>
-      )}
+  </div>
+)}
+
+

      {/*  TABLE DATA */}
      <table style={tableStyle}>
--- a/client/src/Pages/ConsolidatedTable.jsx
+++ b/client/src/Pages/ConsolidatedTable.jsx
@@ -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>
  );
 };

--- a/client/src/Pages/CourseForm.jsx
+++ b/client/src/Pages/CourseForm.jsx
@@ -159,7 +159,7 @@ const CourseForm = () => {
  return (
    <>
      <Navbar />
-      <div className="container">
+      <div>
        <div className="courseFormContainer">
          <div className="courseFormFormContainer">
            <h2 className="courseFormHeader">Course Info</h2>
--- a/client/src/Pages/CourseTable.jsx
+++ b/client/src/Pages/CourseTable.jsx
@@ -50,9 +50,14 @@ const CourseTable = () => {
  };

  return (
-    <>
+    <div style={{
+      display:"flex",
+      flexDirection:"column",
+      minHeight: "100vh"
+    }}>
     
      {/* Pass setCourses to FilterPage so it can update the course list */}
+        <div style={{flexGrow:1}}>
          <FilterPage setCourses={setCourses} />
          <table className="course-table">
            <thead>
@@ -78,8 +83,9 @@ const CourseTable = () => {
              )}
            </tbody>
          </table>
+        </div>
      <Footer/>
-    </>
+    </div>
  );
 };

--- a/client/src/Pages/DepartmentConsolidated.jsx
+++ b/client/src/Pages/DepartmentConsolidated.jsx
@@ -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>
  );
 };

--- a/client/src/Pages/Footer.jsx
+++ b/client/src/Pages/Footer.jsx
@@ -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 = {
--- a/client/src/Pages/PanelConsolidated.jsx
+++ b/client/src/Pages/PanelConsolidated.jsx
@@ -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>
    );
 };

--- a/client/src/Pages/courseConsolidated.jsx
+++ b/client/src/Pages/courseConsolidated.jsx
@@ -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>
  );
 };

--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "appointment_to_examiner",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -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",
--- a/server/package.json
+++ b/server/package.json
@@ -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",