@@ -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; | |||||
height:100vh; | |||||
overflow: auto; | |||||
background-color: aqua; | |||||
width: inherit; | |||||
display: flex; | |||||
overflow:hidden; | |||||
} | } | ||||
.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; | |||||
} |
@@ -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> | ||||