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() { 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>

View File

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

View File

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

View File

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