lunarised/ReactLearning
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
James McKenzie 2021-04-28 16:18:26 +12:00
parent eb976a16c9
commit 0e8b97e363
7 changed files with 160 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
ReactLearning/kanban-board/src/App.css
View File

@ -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;
}

42
ReactLearning/kanban-board/src/App.tsx
View File

@ -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!");

75
ReactLearning/kanban-board/src/components/Header.tsx
View File

@ -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});
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!");
}
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>

51
ReactLearning/kanban-board/src/components/KBColumn.tsx
View File

@ -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);

1
ReactLearning/kanban-board/src/components/Modal.tsx
View File

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

59
ReactLearning/kanban-board/src/components/modal.css
View File

@ -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;
}

8
ReactLearning/kanban-board/src/types/ColumnPassback.ts
View File

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