Merge branch 'taskbar-fix' into homepage-front and improved styling b…

…etween calendar and homepage
cse110-sp24-group25 · Jun 5, 2024 · 6ea7f4e · 6ea7f4e
2 parents da43320 + 2471913
commit 6ea7f4e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 15 deletions.
diff --git a/source/calendar/calendar.html b/source/calendar/calendar.html
@@ -1,22 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
+
   <head>
     <meta charset="UTF-8" />
     <!-- Title -->
     <title>Calendar</title>
     <!-- CSS File -->
     <link rel="stylesheet" href="calendar.css" />
-    <!-- Font style -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
+    <!-- Icon  -->
     <link rel="icon" type="image/x-icon" href="/source/icons/website-icon.ico">
-    <!-- <link rel="icon" href="source/icons/website-icon.png" type="image/png"> -->
+    <!-- Font style -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;
+    0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
   </head>
 
   <body>
-     <header>
-
-     </header>
-
      <main>
       <!-- Task list sidebar -->
       <div class="task-list">
@@ -94,8 +93,7 @@ <h3>Tasks</h3>
           </table>
       </div>
     </main>
-    <footer>
-    </footer>
+
     <!-- Javascript file -->
     <script src="./calendar.js"></script>
   </body>

diff --git a/source/calendar/calendar.js b/source/calendar/calendar.js
@@ -69,8 +69,10 @@ function initButtons() {
     window.addEventListener('resize', windowWidth);
 }
 
-// Function to goto next month
-function next() {
+/**
+ * Updates the global currDate to the next date and displays the next month
+ */
+function next(){
     // Increment the month
     currDate.setMonth(currDate.getMonth() + 1);
     updateDateGlobals();

diff --git a/source/homepage/homepage.css b/source/homepage/homepage.css
@@ -665,6 +665,14 @@ td .task-div {
     transform: translateX(-88%);
   }
 
+  .task-wrapper {
+    display: none;
+  }
+
+  .task-wrapper.active {
+    display: block;
+  }
+
   .main-wrap {
     transform: translateX(-160px);
 

diff --git a/source/homepage/homepage.html b/source/homepage/homepage.html
@@ -3,17 +3,21 @@
 
   <head>
     <meta charset="UTF-8" />
+    <!-- Title -->
     <title>Homepage</title>
-
+    <!-- CSS File --> 
     <link rel="stylesheet" href="homepage.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+     <!-- Icon  -->
     <link rel="icon" type="image/x-icon" href="/source/icons/website-icon.ico">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <!-- Font style -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;
+    0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
   </head>
 
   <body>
     <main>
+      <!-- Task list sidebar -->
       <div class="task-list">
         <div class="task-header">
           <h3>Tasks</h3>

diff --git a/source/homepage/homepage.js b/source/homepage/homepage.js
@@ -42,6 +42,13 @@ function initButtons() {
             selectWidget(id.substring(3,5));
         });
     });
+    window.addEventListener('keydown', function(event) {
+        if (event.key === "ArrowLeft") {
+            prevDate();
+        } else if (event.key === "ArrowRight") {
+            nextDate();
+        }
+    });
 }
 
 /**
@@ -641,17 +648,20 @@ function dateQuery() {
 
 function clickTaskList() {
     const taskList = document.querySelector('.task-list');
+    const taskWrap = document.querySelector('.task-wrapper');
     const outSide = document.querySelector('.main-wrap');
     taskList.addEventListener('click', function(event) {
         if (event.target === taskList) {
             if (window.innerWidth <= 800) { 
                 taskList.classList.toggle('active');
+                taskWrap.classList.toggle('active');
             }
         }
     });
     outSide.addEventListener('click', function(){
         if (window.innerWidth <= 800) { 
             taskList.classList.remove('active');
+            taskWrap.classList.remove('active');
         }
     });
 }