1
0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00

Moving more css aside components

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

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

View File

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

View File

@ -161,13 +161,6 @@ hr {
padding: 10px 95px 50px 95px; padding: 10px 95px 50px 95px;
} }
.octo-board {
flex: 0 1 auto;
display: flex;
flex-direction: column;
}
.octo-controls { .octo-controls {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
@ -184,73 +177,10 @@ hr {
white-space: nowrap 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 { .dragover {
background-color: rgba(128, 192, 255, 0.4); background-color: rgba(128, 192, 255, 0.4);
} }
.octo-board-column > .octo-button {
color: #909090;
text-align: left;
}
.octo-label { .octo-label {
display: inline-block; display: inline-block;
padding: 0 5px; padding: 0 5px;