screen size warning banner added

public/html/appointments.html

@@ -8,6 +8,7 @@
     <script type="module" src="../javascripts/appointments.js" async></script>
     <script type="module" src="../javascripts/navbar.js" async></script>
     <link rel="stylesheet" href="../stylesheets/style.css">
+    <link rel="stylesheet" href="../stylesheets/screen.css">
     <link rel="stylesheet" href="../stylesheets/navbar.css">
     <link rel="stylesheet" href="../stylesheets/tables.css">
     <link rel="stylesheet" href="../stylesheets/appointments.css">
@@ -21,6 +22,7 @@
         <li><a href="#" id="logout-button">Logout</a></li>
     </ul>
 </nav>
+<h1 class="msg-screen-size">Please turn your screen or switch to a device with a larger screen</h1>
 <div class="content hidden" id="content">
     <div class="container">
         <h2 class="heading">Appointments</h2>

public/html/bookings.html

@@ -8,6 +8,7 @@
     <script type="module"src="../javascripts/bookings.js" async></script>
     <script type="module" src="../javascripts/utils.js" async></script>
     <link rel="stylesheet" href="../stylesheets/style.css">
+    <link rel="stylesheet" href="../stylesheets/screen.css">
     <link rel="stylesheet" href="../stylesheets/navbar.css">
     <link rel="stylesheet" href="../stylesheets/tables.css">
     <link rel="stylesheet" href="../stylesheets/bookings.css">
@@ -21,6 +22,7 @@
         <li><a href="#" id="logout-button">Logout</a></li>
     </ul>
 </nav>
+<h1 class="msg-screen-size">Please turn your screen or switch to a device with a larger screen</h1>
 <div class="content">
 <div class="container">
     <h1>Appointment Details</h1>

public/html/schedule.html

@@ -17,7 +17,6 @@
     <h3 id="title"></h3>
     <h4 id="place"></h4>
     <p id="description"></p>
-
     <div>
         <div class="input-group">
             <label for="email">Email</label>
@@ -47,9 +46,10 @@
             <input type="text" id="time-span" name="timeSpan" value="10:00 AM to 12:00 PM" readonly>
         </div>
         <button type="submit" id="btn-attend" class="btn-submit">Attend</button>
-        <p class="msg-error" id="appointment-error"></p>
-        <p class="msg-success" id="appointment-success"></p>
+
     </div>
+    <p class="msg-error" id="appointment-error"></p>
+    <p class="msg-success" id="appointment-success"></p>
 </div>
 </div>
 </body>

public/stylesheets/bookings.css

@@ -28,7 +28,6 @@
 /* Appointment Info */
 .appointment-info {
     display: grid;
-    gap: 5px;
     font-size: var(--font-size);
     color: var(--text-color);
 }

public/stylesheets/screen.css

@@ -0,0 +1,13 @@
+.msg-screen-size {
+    visibility: hidden;
+}
+
+@media (max-width: 400px) {
+    .msg-screen-size {
+        visibility: visible;
+    }
+
+    .content, .navbar {
+        visibility: hidden;
+    }
+}

public/stylesheets/style.css

@@ -50,4 +50,5 @@ button {
 .msg-success {
   color: var(--success-message-color);
   margin-top: 10px;
-}
+}
+

routes/members.js

@@ -47,7 +47,7 @@ router.post('/create', function(req, res, next) {
     const newTask = new Appointment({ user, title, description, dueDate, place, startDate, endDate });
 
     newTask.save()
-        .then(doc => res.json({ "id": `${doc._id}` }))
+        .then(doc => res.json({ "id": doc._id }))
         .catch(err => res.status(500).json({ 'message': err }));
 
 });
@@ -71,7 +71,7 @@ router.post('/modify', function (req, res, next) {
         .then(result => {
             if (result.modifiedCount === 1) {
                 console.log("Successfully updated the document.");
-                res.json({ "success": true });
+                res.json({ "id": appointmentId });
             } else {
                 console.log("Document not updated");
                 res.status(500).json({ 'message': 'Document has not changed' });