wpetit/gengitkan
1
0
Fork 0
Code Issues 17 Pull Requests 1 Releases Wiki Activity

Refonte de l'UI #37

Manually merged
wpetit merged 7 commits from issue-35 into develop 2020-06-17 11:36:22 +02:00
Conversation 1 Commits 7 Files Changed 9 +60 -21
4 changed files with 60 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e3459d136e - Show all commits

17
client/src/components/BoardPage/BoardPage.tsx
View File

@ -59,8 +59,6 @@ export class BoardPage extends React.Component<BoardPageProps> {
renderBoard() {
const { kanboard, board } = this.props;
console.log(kanboard);
if (!kanboard) {
return <Loader></Loader>
@ -68,7 +66,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
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>

43
client/src/components/BoardPage/IssueCard.tsx
View File

@ -20,28 +20,35 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
<div className="media">
<div className="media-content">
<div className="content">
<nav className="level">
<div className="level-left">
<div className="level-item">
<a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
</div>
<div className="level-item">
<a target="_blank" href={projectURL}>{card.project}</a>
</div>
</div>
<div className="level-right">
{
card.issue.assignee ?
{ !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">
<small>{`@${card.issue.assignee.login}`}</small>
<a target="_blank" href={projectURL}>{card.project}</a>
</div>
: null
}
</div>
</nav>
}
</div>
<div className="level-right">
{
card.issue.assignee && !compact ?
<div className="level-item">
<small>{`@${card.issue.assignee.login}`}</small>
</div>
: null
}
</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">

4
client/src/sass/_base.scss
View File

@ -18,4 +18,8 @@ html, body {
#app {
display: flex;
flex-direction: column;
}
.mr-1 {
margin-right: 5px;
}

17
client/src/sass/_kanboard.scss
View File

@ -155,4 +155,21 @@
.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%;
}
}