Ajout mode compacté
This commit is contained in:
parent
fe0e2667a0
commit
e3459d136e
|
@ -60,15 +60,13 @@ export class BoardPage extends React.Component<BoardPageProps> {
|
|||
renderBoard() {
|
||||
const { kanboard, board } = this.props;
|
||||
|
||||
console.log(kanboard);
|
||||
|
||||
if (!kanboard) {
|
||||
return <Loader></Loader>
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<nav className="navbar is-info">
|
||||
<nav className="navbar is-light">
|
||||
<div className="container is-fluid">
|
||||
<div className="navbar-start">
|
||||
<div className="navbar-item">
|
||||
|
@ -76,6 +74,19 @@ export class BoardPage extends React.Component<BoardPageProps> {
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<span className="icon">
|
||||
<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-content">
|
||||
<div className="content">
|
||||
{ !compact &&
|
||||
<nav className="level">
|
||||
<div className="level-left">
|
||||
<div className="level-item">
|
||||
<a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
|
||||
</div>
|
||||
{ !compact &&
|
||||
<div className="level-item">
|
||||
<a target="_blank" href={projectURL}>{card.project}</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className="level-right">
|
||||
{
|
||||
card.issue.assignee ?
|
||||
card.issue.assignee && !compact ?
|
||||
<div className="level-item">
|
||||
<small>{`@${card.issue.assignee.login}`}</small>
|
||||
</div>
|
||||
|
@ -39,9 +42,13 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
|
|||
}
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
{ compact &&
|
||||
<a target="_blank" className="mr-1" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
|
||||
}
|
||||
<span>{card.issue.title ? card.issue.title : ''}</span>
|
||||
</div>
|
||||
{
|
||||
{ !compact &&
|
||||
<nav className="level">
|
||||
<div className="level-left"></div>
|
||||
<div className="level-right">
|
||||
|
|
|
@ -19,3 +19,7 @@ html, body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 5px;
|
||||
}
|
|
@ -156,3 +156,20 @@
|
|||
.react-kanban-column {
|
||||
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