CSS refactor a little. Fixed the modal from being drawn over

ReactLearning/kanban-board/src/App.css

@@ -25,7 +25,7 @@ html {
   display: flex;
   text-align: center;
   flex-direction: column;
-  justify-content:flex-start;
+  justify-content: flex-start;
   float: left;
   width: initial;
   position: relative;
@@ -34,35 +34,34 @@ html {
   border-color: #ddd;
   border-width: 2px;
   min-width: 200px;
-  min-height: 800px;
+  min-height: 200px;
+  max-width: 25%;
   border-style: solid;
   color: "orange";
   margin: 5px;
   padding: 5px;
+  flex-wrap: nowrap;
+}
+.panel{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
 }
 
-.taskWrapper{
+.taskWrapper {
   display: flex;
   min-height: 100px;
   flex-direction: row;
   align-items: stretch;
   position: relative;
-  
-
-
-
 }
-.prioBlock{
+.prioBlock {
   order: 1;
   flex: 1;
   display: flex;
-  overflow:hidden;
-  
-  
-
-
+  overflow: hidden;
 }
-.taskText{
+.taskText {
   order: 5;
   flex: 5;
   height: 100%;
@@ -71,3 +70,64 @@ html {
 .panel {
   width: 100%;
 }
+
+.modal {
+  z-index: 10;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: black;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-main label {
+  float: left;
+  margin-left: 20%;
+}
+.modal-main input {
+  display: block;
+  float: right;
+}
+
+.modal-main button:last-of-type {
+
+  margin: auto;
+  display: block;
+  
+
+  background-color: darkRed;
+  color: #CCC
+}
+
+.modal-main button {
+
+  display: block;
+
+  text-align: center;
+  background-color: green;
+}
+
+.modal-main {
+  position: fixed;
+  text-align: center;
+  background: white;
+  width: 50%;
+  height: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999;
+}
+
+.display-block {
+  display: block;
+}
+
+.display-none {
+  display: none;
+}

ReactLearning/kanban-board/src/App.tsx

@@ -4,7 +4,7 @@ import "./App.css";
 import Header from "./components/Header";
 import Column from "./types/Column";
 import TaskPassback from "./types/TaskPassback";
-import ColumnPassback from "./types/ColumnPassback"
+import ColumnPassback from "./types/ColumnPassback";
 
 type State = {
   columns: Column[];
@@ -35,18 +35,14 @@ class App extends React.Component<{}, State> {
   addColumn(columnInstance?: ColumnPassback) {
     let columnId = this.state.columnIterator;
     this.setState({ columnIterator: columnId + 1 });
-    if (columnInstance !== undefined){
-
-    this.state.columns.push({
-      id: columnId,
-      name: columnInstance?.title,
-      color: columnInstance?.color,
-      tasks: [],
+    if (columnInstance !== undefined) {
+      this.state.columns.push({
+        id: columnId,
+        name: columnInstance?.title,
+        color: columnInstance?.color,
+        tasks: [],
+      });
     }
-    
-  
-    );
-  }
   }
 
   addTask(taskInstance?: TaskPassback) {
@@ -56,16 +52,15 @@ class App extends React.Component<{}, State> {
       let index = -2;
       if (taskInstance !== undefined) {
         this.setState({ taskIterator: taskId + 1 });
-        console.log(this.state.columns)
-        console.log(taskInstance.column)
+        console.log(this.state.columns);
+        console.log(taskInstance.column);
         let indexObj = this.state.columns.find(
           (o) => o.id === taskInstance.column
         );
         if (indexObj) {
           index = this.state.columns.indexOf(indexObj);
-        }
-        else{
-          alert("Clifford")
+        } else {
+          alert("Clifford");
         }
 
         if (index >= 0) {
@@ -75,13 +70,14 @@ class App extends React.Component<{}, State> {
             description: taskInstance.description,
             priority: taskInstance.priority,
           });
+        } else {
+          alert(
+            "Error finding that column. Check it hasn't already been deleted!" +
+              index
+          );
         }
-        else{
-          alert("Error finding that column. Check it hasn't already been deleted!" + index)
-        }
-      }
-      else{
-        alert("Oh god, oh heck")
+      } else {
+        alert("Oh god, oh heck");
       }
     } else {
       alert("You might want to consider adding a column!");

ReactLearning/kanban-board/src/components/Header.tsx

@@ -3,7 +3,7 @@ import Modal from "./Modal";
 import Column from "../types/Column";
 import TaskPassback from "../types/TaskPassback";
 import Priority from "../types/Priority";
-import ColumnPassback from "../types/ColumnPassback"
+import ColumnPassback from "../types/ColumnPassback";
 
 type HeaderProps = {
   addColumn: (columnInstance?: ColumnPassback) => void;
@@ -41,34 +41,31 @@ class Header extends React.Component<HeaderProps, State> {
       taskColumnNumber: -1,
       columnTitle: "",
       columnColor: "#00CC00",
-
     };
   }
 
   showTaskModal = () => {
-    if (this.props.columns.length > 0){
-    let {showTask, taskColumnNumber} = {...this.state}
-    showTask = true;
-    taskColumnNumber = this.props.columns[0].id
-    this.setState({ showTask, taskColumnNumber});
-    }
-    else{
-      alert("Add a column please!")
+    if (this.props.columns.length > 0) {
+      let { showTask, taskColumnNumber } = { ...this.state };
+      showTask = true;
+      taskColumnNumber = this.props.columns[0].id;
+      this.setState({ showTask, taskColumnNumber });
+    } else {
+      alert("Add a column please!");
     }
- 
   };
   showColumnModal = () => {
-    let {showColumn} = {...this.state}
+    let { showColumn } = { ...this.state };
     showColumn = true;
-    this.setState({showColumn})
-  }
+    this.setState({ showColumn });
+  };
 
   hideModal = () => {
     this.setState({ showTask: false });
   };
   hideColumnModal = () => {
-    this.setState({showColumn: false})
-  }
+    this.setState({ showColumn: false });
+  };
 
   handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
     const target = event.target.id;
@@ -78,11 +75,11 @@ class Header extends React.Component<HeaderProps, State> {
     if (target === "descInput") {
       this.setState({ taskDesc: event.target.value });
     }
-    if (target === "columnTitle"){
-      this.setState({columnTitle: event.target.value})
+    if (target === "columnTitle") {
+      this.setState({ columnTitle: event.target.value });
     }
-    if (target === "columnColor"){
-      this.setState({columnColor: event.target.value})
+    if (target === "columnColor") {
+      this.setState({ columnColor: event.target.value });
     }
   }
 
@@ -99,7 +96,6 @@ class Header extends React.Component<HeaderProps, State> {
   }
 
   render() {
-    
     return (
       <div className="header" style={{ height: 60 }}>
         <h1
@@ -164,16 +160,12 @@ class Header extends React.Component<HeaderProps, State> {
           <br />
           <button
             onClick={() =>
-              
               this.props.addTask({
                 title: this.state.taskTitle,
                 description: this.state.taskDesc,
                 priority: this.state.taskPrio,
                 column: this.state.taskColumnNumber,
-              }
-              
-              )
-              
+              })
             }
           >
             Add Task
@@ -187,13 +179,10 @@ class Header extends React.Component<HeaderProps, State> {
           </button>
         </Modal>
 
-            
         <Modal show={this.state.showColumn} handleClose={this.hideModal}>
+            <h3>Lets add a column! 🤔</h3>
 
-        <p> NP Love is a danger - Priscilla </p>
-
-
-        <label>
+          <label>
             {" "}
             Title:
             <input
@@ -207,7 +196,7 @@ class Header extends React.Component<HeaderProps, State> {
 
           <label>
             {" "}
-            Title:
+            Color:
             <input
               type="text"
               id="columnColor"
@@ -217,24 +206,24 @@ class Header extends React.Component<HeaderProps, State> {
           </label>
           <br />
 
+          <button
+            onClick={() =>
+              this.props.addColumn({
+                title: this.state.columnTitle,
+                color: this.state.columnColor,
+              })
+            }
+          >
+            Add Column
+          </button>
 
-      <button onClick={() =>
-      this.props.addColumn({
-        title: this.state.columnTitle,
-        color: this.state.columnColor,
-      })
-    }
-    >NP Dancing - Vicky Vale</button>
-
-
-        <button
+          <button
             onClick={() => {
               this.hideColumnModal();
             }}
           >
             Close
           </button>
-
         </Modal>
         <button onClick={this.showTaskModal}> Add task </button>
         <button onClick={this.showColumnModal}> Add column </button>

ReactLearning/kanban-board/src/components/KBColumn.tsx

@@ -17,32 +17,43 @@ let bgc = "#666";
 const KBColumn = (props: KBColumnProps) => {
   const { color, title, tasks, onDelete, id } = { ...defaultProps, ...props };
 
-  
-    let colTasks = tasks.map((task) => {
-      if (task.priority === "urgent") {
-        bgc = "red";
-      } else if (task.priority === "important") {
-        bgc = "yellow";
-      } else if (task.priority === "normal") {
-        bgc = "blue";
-      }
+  let colTasks = tasks.map((task) => {
+    if (task.priority === "urgent") {
+      bgc = "red";
+    } else if (task.priority === "important") {
+      bgc = "yellow";
+    } else if (task.priority === "normal") {
+      bgc = "blue";
+    }
 
-      return (
-        <div style={{borderColor: "#ccc", borderWidth: "1px", borderStyle: "solid", margin: "10px"}} className="taskWrapper"> 
-          <div style={{ backgroundColor: bgc, display: "inline"}} className="prioBlock" title={task.priority}></div>
-          <div className="taskText">
-          <p> {task.title} </p>
+    return (
+      <div
+        style={{
+          borderColor: "#ccc",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          margin: "10px",
+        }}
+        className="taskWrapper"
+      >
+        <div
+          style={{ backgroundColor: bgc, display: "inline" }}
+          className="prioBlock"
+          title={task.priority}
+        ></div>
+        <div className="taskText">
+          <h3> {task.title} </h3>
 
           <p> {task.description} </p>
         </div>
-        </div>
-      );
-    });
-  
+      </div>
+    );
+  });
+
   return (
-    <div className="KBColumn" style={{ backgroundColor: color  }}>
+    <div className="KBColumn" style={{ backgroundColor: color }}>
       <h3>{title}</h3>
-    {colTasks}
+      {colTasks}
       <button
         onClick={() => {
           onDelete && onDelete(id);

ReactLearning/kanban-board/src/components/Modal.tsx

@@ -1,4 +1,3 @@
-import "./modal.css";
 
 type ModalProps = {
   handleClose: () => void;

ReactLearning/kanban-board/src/components/modal.css

@@ -1,59 +0,0 @@
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  color: black;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.modal-main label {
-  float: left;
-  margin-left: 20%;
-}
-.modal-main input {
-  display: block;
-  float: right;
-}
-select {
-  background-color: red;
-  text-align: right;
-  margin-left: auto;
-}
-.modal-main button {
-  margin: 0 auto;
-  float: left;
-  display: block;
-  transform: translate(-50%);
-  margin-left: 0;
-  background-color: dodgerblue;
-}
-
-.modal-main button:first-of-type {
-  clear: left;
-  display: block;
-  margin-left: 50%;
-  margin-right: 0;
-  text-align: center;
-  background-color: green;
-}
-
-.modal-main {
-  position: fixed;
-  text-align: center;
-  background: white;
-  width: 50%;
-  height: auto;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.display-block {
-  display: block;
-}
-
-.display-none {
-  display: none;
-}

ReactLearning/kanban-board/src/types/ColumnPassback.ts

@@ -1,6 +1,6 @@
 type ColumnPassback = {
-    color: string,
-    title: string
-}
+  color: string;
+  title: string;
+};
 
-export default ColumnPassback
+export default ColumnPassback;