diff --git a/ReactLearning/kanban-board/package.json b/ReactLearning/kanban-board/package.json index 2a0439e..8f8dbb5 100644 --- a/ReactLearning/kanban-board/package.json +++ b/ReactLearning/kanban-board/package.json @@ -3,9 +3,6 @@ "version": "0.1.0", "private": true, "dependencies": { - "@fortawesome/fontawesome-svg-core": "^1.2.35", - "@fortawesome/free-solid-svg-icons": "^5.15.3", - "@fortawesome/react-fontawesome": "^0.1.14", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", @@ -13,7 +10,6 @@ "@types/node": "^12.20.10", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.3", - "font-awesome": "^4.7.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.2.0", diff --git a/ReactLearning/kanban-board/src/App.css b/ReactLearning/kanban-board/src/App.css index 22c8fdd..d87bd07 100644 --- a/ReactLearning/kanban-board/src/App.css +++ b/ReactLearning/kanban-board/src/App.css @@ -1,5 +1,7 @@ html { background-color: #383c4a; + + overflow: hidden; } .header { @@ -26,67 +28,85 @@ html { text-align: center; flex-direction: column; justify-content: flex-start; - float: left; - width: initial; - position: relative; - height: auto; - flex-grow: inherit; + max-width: 22vw; + min-width: 22vw; + + min-height: 25vh; border-color: #ddd; border-width: 2px; - min-width: 300px; - min-height: 200px; - max-width: 25%; border-style: solid; - color: "orange"; + color: #eee; margin: 5px; padding: 5px; flex-wrap: nowrap; + overflow-y: auto; + overflow-x: hidden; + padding-left: 1px; + margin-left: 1px; + margin-right: 1px; + padding-right: 1px; + max-height: 88vh; } - .taskWrapper { display: flex; - min-height: 100px; flex-direction: row; - align-items: stretch; - position: relative; + border-color: #ccc; + border-width: 2px; + border-style: solid; + margin: 2px; } .prioBlock { order: 1; - flex: 1; + flex: 3; display: flex; overflow: hidden; - - } .taskText { order: 5; - flex: 5; + flex: 20; height: 100%; + overflow: auto; } -.actionBlock{ +.actionBlock { order: 10; flex: 1; display: flex; - background-color: purple; - justify-content: flex-end; + background-color: #ddd; + justify-content: flex-start; + flex-direction: column; + align-items: flex-end; +} +.App { + display: flex; + align-items: stretch; + order: 1; + flex: 1; + flex-direction: column; + min-height: 100vh; + overflow: hidden; +} +.footer { + display: flex; + order: 400; + color: #eee; } .panel { display: flex; flex: 1; + order: 1; + justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; width: 100%; - overflow-x:auto; + overflow-x: auto; overflow-y: hidden; - height: 100%; align-items: stretch; - background-color: lavender; + background-color: #404552; } - .modal { position: fixed; z-index: 20; @@ -140,4 +160,3 @@ html { .display-none { display: none; } - diff --git a/ReactLearning/kanban-board/src/App.tsx b/ReactLearning/kanban-board/src/App.tsx index 13596c1..c083075 100644 --- a/ReactLearning/kanban-board/src/App.tsx +++ b/ReactLearning/kanban-board/src/App.tsx @@ -120,7 +120,7 @@ class App extends React.Component<{}, State> { columns[fromColumnIndex + 1] = toColumn; this.setState({ columns: columns }); }; - /* Regresses the task to the column immediately to the left + /* Regresses the task to the column immediately to the left @param columnId: The column which the task is originally hosted at @param taskId: The UID for the task @return void @@ -218,6 +218,10 @@ class App extends React.Component<{}, State> { /> ))} +
{this.props.columns[0] && this.props.columns[0].id}
+ +