luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Moving more css aside components

Browse source
This commit is contained in:
Jesús Espino 2020-10-25 22:17:13 +01:00
parent 33a4b35464
commit c5ad9361ab
3 changed files with 72 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
webapp/src/components/boardComponent.scss Normal file
View file

@ -0,0 +1,69 @@
.BoardComponent {
.octo-board {
flex: 0 1 auto;
display: flex;
flex-direction: column;
}
.octo-board-header {
display: flex;
flex-direction: row;
min-height: 30px;
margin-bottom: 10px;
padding: 0px 10px;
color: #909090;
}
.octo-board-header-cell{
display: flex;
flex-shrink: 0;
align-items: center;
width: 260px;
margin-right: 15px;
vertical-align: middle;
&.narrow {
width: 220px;
}
> div {
margin-right: 5px;
}
}
.octo-board-body {
display: flex;
flex-direction: row;
padding: 0 10px;
flex: 0 1 auto;
}
.octo-board-column {
flex: 0 0 auto;
display: flex;
flex-direction: column;
width: 260px;
margin-right: 15px;
&.narrow {
width: 220px;
}
> .octo-button {
color: #909090;
text-align: left;
}
}
.octo-board-hidden-item {
display: flex;
flex-direction: row;
> div {
margin-right: 5px;
}
}
}

4
webapp/src/components/boardComponent.tsx
View file

@ -24,6 +24,8 @@ import RootPortal from './rootPortal'
import ViewHeader from './viewHeader'
import ViewTitle from './viewTitle'
import './boardComponent.scss'
type Props = {
boardTree?: BoardTree
showView: (id: string) => void
@ -110,7 +112,7 @@ class BoardComponent extends React.Component<Props, State> {
return (
<div
className='octo-app'
className='BoardComponent octo-app'
ref={this.backgroundRef}
onClick={(e) => {
this.backgroundClicked(e)

70
webapp/static/main.css
View file

@ -161,13 +161,6 @@ hr {
padding: 10px 95px 50px 95px;
}
.octo-board {
flex: 0 1 auto;
display: flex;
flex-direction: column;
}
.octo-controls {
flex: 0 0 auto;
display: flex;
@ -184,73 +177,10 @@ hr {
white-space: nowrap
}
.octo-board-header {
display: flex;
flex-direction: row;
min-height: 30px;
margin-bottom: 10px;
padding: 0px 10px;
color: #909090;
}
.octo-board-header-cell {
display: flex;
flex-shrink: 0;
align-items: center;
width: 260px;
margin-right: 15px;
vertical-align: middle;
}
.octo-board-header-cell.narrow {
width: 220px;
}
.octo-board-header-cell > div {
margin-right: 5px;
}
.octo-board-body {
display: flex;
flex-direction: row;
padding: 0 10px;
flex: 0 1 auto;
}
.octo-board-column {
flex: 0 0 auto;
display: flex;
flex-direction: column;
width: 260px;
margin-right: 15px;
}
.octo-board-column.narrow {
width: 220px;
}
.octo-board-hidden-item {
display: flex;
flex-direction: row;
}
.octo-board-hidden-item > div {
margin-right: 5px;
}
.dragover {
background-color: rgba(128, 192, 255, 0.4);
}
.octo-board-column > .octo-button {
color: #909090;
text-align: left;
}
.octo-label {
display: inline-block;
padding: 0 5px;