Ajout mode compacté

client/src/components/BoardPage/BoardPage.tsx

@@ -66,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">
@@ -74,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>
@@ -86,13 +99,13 @@ export class BoardPage extends React.Component<BoardPageProps> {
         <div className="container is-fluid">
           <div className="kanboard-container is-fullheight">
             <Board 
-              initialBoard={kanboard}
-              
               renderCard={this.renderCard.bind(this)}
               renderColumnHeader={this.renderLaneHeader.bind(this)}
               onCardDragEnd={this.onCardDragEnd.bind(this)}
               disableColumnDrag={true}
-            />
+            >
+              {kanboard}
+            </Board>
             { this.renderNewCardModal() }
           </div>
         </div>

client/src/components/BoardPage/IssueCard.tsx

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

client/src/sass/_base.scss

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

client/src/sass/_kanboard.scss

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