Ajout mode compacté
This commit is contained in:
parent
fe0e2667a0
commit
e3459d136e
|
@ -60,15 +60,13 @@ export class BoardPage extends React.Component<BoardPageProps> {
|
||||||
renderBoard() {
|
renderBoard() {
|
||||||
const { kanboard, board } = this.props;
|
const { kanboard, board } = this.props;
|
||||||
|
|
||||||
console.log(kanboard);
|
|
||||||
|
|
||||||
if (!kanboard) {
|
if (!kanboard) {
|
||||||
return <Loader></Loader>
|
return <Loader></Loader>
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<nav className="navbar is-info">
|
<nav className="navbar is-light">
|
||||||
<div className="container is-fluid">
|
<div className="container is-fluid">
|
||||||
<div className="navbar-start">
|
<div className="navbar-start">
|
||||||
<div className="navbar-item">
|
<div className="navbar-item">
|
||||||
|
@ -76,6 +74,19 @@ export class BoardPage extends React.Component<BoardPageProps> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="navbar-end">
|
<div className="navbar-end">
|
||||||
|
<div className="navbar-item">
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<input id="compactMode"
|
||||||
|
checked={this.state.compactMode}
|
||||||
|
onChange={this.onCompactModeChange.bind(this)}
|
||||||
|
type="checkbox"
|
||||||
|
className="switch is-outlined is-success"
|
||||||
|
name="compactMode"
|
||||||
|
/>
|
||||||
|
<label htmlFor="compactMode">Mode compact</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<a href={`#/boards/${board.id}/edit`} className="navbar-item">
|
<a href={`#/boards/${board.id}/edit`} className="navbar-item">
|
||||||
<span className="icon">
|
<span className="icon">
|
||||||
<i className="fa fa-edit fa-fw"></i>
|
<i className="fa fa-edit fa-fw"></i>
|
||||||
|
|
|
@ -20,18 +20,21 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
|
||||||
<div className="media">
|
<div className="media">
|
||||||
<div className="media-content">
|
<div className="media-content">
|
||||||
<div className="content">
|
<div className="content">
|
||||||
|
{ !compact &&
|
||||||
<nav className="level">
|
<nav className="level">
|
||||||
<div className="level-left">
|
<div className="level-left">
|
||||||
<div className="level-item">
|
<div className="level-item">
|
||||||
<a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
|
<a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
|
||||||
</div>
|
</div>
|
||||||
|
{ !compact &&
|
||||||
<div className="level-item">
|
<div className="level-item">
|
||||||
<a target="_blank" href={projectURL}>{card.project}</a>
|
<a target="_blank" href={projectURL}>{card.project}</a>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="level-right">
|
<div className="level-right">
|
||||||
{
|
{
|
||||||
card.issue.assignee ?
|
card.issue.assignee && !compact ?
|
||||||
<div className="level-item">
|
<div className="level-item">
|
||||||
<small>{`@${card.issue.assignee.login}`}</small>
|
<small>{`@${card.issue.assignee.login}`}</small>
|
||||||
</div>
|
</div>
|
||||||
|
@ -39,9 +42,13 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
}
|
||||||
|
{ compact &&
|
||||||
|
<a target="_blank" className="mr-1" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
|
||||||
|
}
|
||||||
<span>{card.issue.title ? card.issue.title : ''}</span>
|
<span>{card.issue.title ? card.issue.title : ''}</span>
|
||||||
</div>
|
</div>
|
||||||
{
|
{ !compact &&
|
||||||
<nav className="level">
|
<nav className="level">
|
||||||
<div className="level-left"></div>
|
<div className="level-left"></div>
|
||||||
<div className="level-right">
|
<div className="level-right">
|
||||||
|
|
|
@ -19,3 +19,7 @@ html, body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mr-1 {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
|
@ -156,3 +156,20 @@
|
||||||
.react-kanban-column {
|
.react-kanban-column {
|
||||||
background: white !important;
|
background: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.kanboard-card {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-item {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue