Merge pull request #69 from analog-m4/53-update-ui-project-board-sizing

53 update UI project board sizing
analog-m4 · Dec 8, 2023 · 0bc3194 · 0bc3194
2 parents f195ff2 + 2651663
commit 0bc3194
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@material/typography": "^14.0.0",
     "@mui/material": "^5.14.19",
     "@reduxjs/toolkit": "^1.9.7",
+    "@remix-run/router": "^1.13.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -19,6 +20,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
+    "tailwindcss-animate": "^1.0.7",
     "tailwindcss-animated": "^1.0.1",
     "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"

diff --git a/src/components/Column/Column.js b/src/components/Column/Column.js
@@ -18,7 +18,7 @@ function Column({ columnName, tasks, taskStatus }) {
   return (
     <>
       <div className="flex flex-col w-5/12 min-w-1/4">
-        <div className="column-title font-bold pt-3 pb-3 text-gray-900 font-fjalla text-xl">
+        <div className="column-title ml-1 font-bold pt-3 pb-3 text-gray-900 font-fjalla text-xl">
           {columnName}
         </div>
         <div className="w-10/12 sm:w-11/12">{columnTasks}</div>

diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js
@@ -24,9 +24,12 @@ function Dashboard({ userStatus }) {
   });
 
   return (
-    <div className="flex h-auto">
-      <div className="w-2/12 ml-5 mr-5 mt-3 min-w-max">
-        <div className="dashboard min-w-max p-3 bg-white border border-gray-200 rounded-lg shadow-sm">
+    <div className="flex h-auto ">
+      <div className="w-2/12 ml-5 mr-5 min-w-max">
+        <div
+          className="dashboard min-w-max p-3 bg-white border border-gray-200 rounded-lg shadow-sm"
+          style={{ maxHeight: "545px", overflowY: "auto" }}
+        >
           <div className="projects font-bold text-gray-900 border-b pb-1 mb-1 font-fjalla text-xl">
             Projects
           </div>

diff --git a/src/components/FileUpload/FileUpload.js b/src/components/FileUpload/FileUpload.js
@@ -74,14 +74,14 @@ function FileUpload() {
   };
 
   return (
-    <div className="flex mt-4 mb-4">
+    <div className="flex flex-col mt-4 mb-4">
+      <label
+        htmlFor="formFile"
+        className="form-label font-bold text-gray-900 border-b pb-1 mb-2 font-fjalla text-xl"
+      >
+        Files
+      </label>
       <div className="min-w-max p-3 bg-white border border-gray-200 rounded-lg shadow-sm">
-        <label
-          htmlFor="formFile"
-          className="form-label font-bold text-gray-900 border-b pb-1 mb-2 font-fjalla text-xl"
-        >
-          Files
-        </label>
         <div className="upload-file flex">
           <input
             className="form-control"

diff --git a/src/components/ProjectBoard/ProjectBoard.js b/src/components/ProjectBoard/ProjectBoard.js
@@ -21,20 +21,23 @@ function ProjectBoard() {
 
   return (
     <>
-      <div className="flex flex-col w-auto h-auto mb-4">
+      <div className="flex flex-col w-auto h-auto">
         {selectedProject ? (
-          <div className="flex justify-between w-10/12 pl-1 pr-2 font-fjalla text-3xl text-purple-600 mb-2">
-            {project.title}
-            <div className="text-gray-900 self-end text-xl italic">
+          <div className="flex justify-between pl-1 pr-2 font-fjalla text-2xl text-purple-600 mb-1">
+            {selectedProject.title}
+            {/* <div className="text-gray-900 self-end text-xl">
               Project Board
-            </div>
+            </div> */}
           </div>
         ) : (
-          <div className="flex justify-center w-9/12 font-fjalla text-2xl text-purple-700 mb-4 animate-pulse animate-infinite animate-ease-out">
+          <div className="flex justify-center w-9/12 font-fjalla text-2xl text-purple-700 mb-1">
             No project selected
           </div>
         )}
-        <div className="project-board flex h-3/4 w-10/12 border border-gray-200 rounded-lg bg-white shadow-sm pl-5">
+        <div
+          className="flex h-3/4 w-10/12 border border-gray-200 rounded-lg bg-white shadow-sm"
+          style={{ maxHeight: "545px", overflowY: "auto" }}
+        >
           <Column
             columnName="Backlog"
             tasks={backlogTasks}

diff --git a/src/components/Task/Task.js b/src/components/Task/Task.js
@@ -3,7 +3,7 @@ import EditTask from "../EditTask/EditTask";
 function Task({ title, id, description, status, priority }) {
   return (
     <>
-      <div className="task flex justify-between rounded-md border border-gray-200 p-3 shadow-sm mb-3 h-max">
+      <div className="task flex justify-between rounded-md border border-gray-200 p-3 shadow-sm mb-3 h-max m-1">
         <div className="flex flex-col">
         <div className="task-title">{title}</div>
         <div className="task-description font-light text-sm mb-2">{description}</div>

diff --git a/src/components/WhiteBoard/WhiteBoard.js b/src/components/WhiteBoard/WhiteBoard.js
@@ -1,35 +1,38 @@
-import React, { useEffect } from 'react';
-import createSocket from '../utils/websocket';
+import React, { useEffect } from "react";
+import createSocket from "../utils/websocket";
 
 function WhiteBoard() {
   const socket = createSocket();
-  var isDrawing = false
-  var lastX = 0
-  var lastY = 0
-  var lastSent = 0
-  var context = null
-  var remoteContext = null
-  var remoteLastX = 0
-  var remoteLastY = 0
+  var isDrawing = false;
+  var lastX = 0;
+  var lastY = 0;
+  var lastSent = 0;
+  var context = null;
+  var remoteContext = null;
+  var remoteLastX = 0;
+  var remoteLastY = 0;
 
   function received(data) {
     // console.log("Receiving Message", data)
     const jsonData = JSON.parse(data.data);
     const received_message = jsonData.message;
-    
+
     if (!received_message) {
       // console.error('Invalid data received from the server:', data);
       return;
     }
 
-    if (received_message['state'] === "start" || received_message['state'] === "stop") {
+    if (
+      received_message["state"] === "start" ||
+      received_message["state"] === "stop"
+    ) {
       // console.log("Info data", data)
-      remoteLastX = received_message['x'];
-      remoteLastY = received_message['y'];
+      remoteLastX = received_message["x"];
+      remoteLastY = received_message["y"];
       return;
     }
 
-    drawRemoteData(received_message['x'], received_message['y']);
+    drawRemoteData(received_message["x"], received_message["y"]);
   }
 
   function drawRemoteData(x, y) {
@@ -42,30 +45,29 @@ function WhiteBoard() {
     remoteLastX = x;
     remoteLastY = y;
   }
-  
+
   useEffect(() => {
-    const canvas = document.getElementById('canvas');
-    const ctx = canvas.getContext('2d');
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
     // Set up the canvas and event listeners
     context = ctx;
-    remoteContext = canvas.getContext('2d');
-    
-    ctx.fillStyle = 'white';
+    remoteContext = canvas.getContext("2d");
+
+    ctx.fillStyle = "white";
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     canvas.addEventListener("mousedown", startDrawing);
     canvas.addEventListener("mouseup", stopDrawing);
     canvas.addEventListener("mousemove", draw);
 
-    socket.addEventListener('message', received);
+    socket.addEventListener("message", received);
 
     return () => {
       canvas.removeEventListener("mousedown", startDrawing);
       canvas.removeEventListener("mouseup", stopDrawing);
       canvas.removeEventListener("mousemove", draw);
-      socket.removeEventListener('message', received);
+      socket.removeEventListener("message", received);
     };
-
   }, [socket]);
 
   function startDrawing(event) {
@@ -94,7 +96,7 @@ function WhiteBoard() {
     console.log("isDrawing:", isDrawing);
     console.log("lastX:", lastX);
     console.log("lastY:", lastY);
-    
+
     // Send the coordinates to the server every 10ms
     // time.now() returns the current time in milliseconds
     if (Date.now() - lastSent > 10) {
@@ -122,25 +124,28 @@ function WhiteBoard() {
   }
 
   function sendDrawData(x, y, state) {
-
     const message = {
       command: "message",
-      identifier: JSON.stringify({ id: 1, channel: "DrawChannel"}),
-      data: JSON.stringify({action: "draw", x, y, state })
+      identifier: JSON.stringify({ id: 1, channel: "DrawChannel" }),
+      data: JSON.stringify({ action: "draw", x, y, state }),
     };
 
-      const jsonString = JSON.stringify(message);
-      socket.send(jsonString);
+    const jsonString = JSON.stringify(message);
+    socket.send(jsonString);
   }
 
   return (
-    <div className='whiteboard flex flex-col w-10/12 pb-5'>
-    <div className="flex font-fjalla text-gray-900 self-end text-xl italic mb-1 pr-2">
-      WhiteBoard
-    </div>
-      <canvas id="canvas" width="865" height="500" className='rounded-2xl border-8 border-gray-300 shadow-sm'></canvas>
+    <div className="whiteboard flex flex-col w-10/12 pb-5 mt-4">
+      <div className="flex font-fjalla text-gray-900 self-start text-xl border-b w-100 mb-2">
+        WhiteBoard
+      </div>
+      <canvas
+        id="canvas"
+        width="865"
+        height="450"
+        className="rounded-2xl border-gray-200 shadow-sm"
+      ></canvas>
     </div>
   );
-
 }
-export default WhiteBoard;
+export default WhiteBoard;