Ajout mode compacté

This commit is contained in:
Benjamin Gaudé 2020-06-16 11:23:57 +02:00
parent fe0e2667a0
commit e3459d136e
4 changed files with 60 additions and 21 deletions

View File

@ -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>

View File

@ -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">

View File

@ -19,3 +19,7 @@ html, body {
display: flex;
flex-direction: column;
}
.mr-1 {
margin-right: 5px;
}

View File

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