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

Done some flex box, set up priority ribbons

Browse Source
This commit is contained in:
James McKenzie 2021-04-28 15:34:07 +12:00
parent 48788e643d
commit eb976a16c9
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,7 @@ html {
justify-content:flex-start; justify-content:flex-start;
float: left; float: left;
width: initial; width: initial;
position: relative;
height: auto; height: auto;
flex-grow: inherit; flex-grow: inherit;
border-color: #ddd; border-color: #ddd;
@ -42,28 +43,31 @@ html {
.taskWrapper{ .taskWrapper{
display: flex; display: flex;
min-height: 100px;
flex-direction: row;
align-items: stretch;
position: relative;
} }
.prioBlock{ .prioBlock{
order: 1; order: 1;
flex: 1; flex: 1;
display: block; display: flex;
height:100vh; overflow:hidden;
overflow: auto;
background-color: aqua;
width: inherit;
} }
.taskText{ .taskText{
order: 5; order: 5;
width: 80%; flex: 5;
height: 100%; height: 100%;
} }
.panel { .panel {
width: 100%; width: 100%;
} }
.prioBlock:after
{
content: '.';
visibility: hidden;
}

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

@ -29,7 +29,7 @@ const KBColumn = (props: KBColumnProps) => {
return ( return (
<div style={{borderColor: "#ccc", borderWidth: "1px", borderStyle: "solid", margin: "10px"}} className="taskWrapper"> <div style={{borderColor: "#ccc", borderWidth: "1px", borderStyle: "solid", margin: "10px"}} className="taskWrapper">
<div style={{width: "20px", height: "100%", backgroundColor: bgc, display: "inline"}} className="prioBlock"></div> <div style={{ backgroundColor: bgc, display: "inline"}} className="prioBlock" title={task.priority}></div>
<div className="taskText"> <div className="taskText">
<p> {task.title} </p> <p> {task.title} </p>