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

client/src/sass/_base.scss

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

client/src/sass/_kanboard.scss

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