client/src/components/BoardPage/BoardPage.tsx

@@ -66,7 +66,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
 
     return (
       <Fragment>
-        <nav className="navbar is-light">
+        <nav className="navbar is-info">
           <div className="container is-fluid">
             <div className="navbar-start">
               <div className="navbar-item">
@@ -74,19 +74,6 @@ 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>
@@ -99,13 +86,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,35 +20,28 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
           <div className="media">
             <div className="media-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>
+                    <div className="level-item">
-                      { !compact && 
+                      <a target="_blank" href={projectURL}>{card.project}</a>
+                    </div>
+                  </div>
+                  <div className="level-right">
+                    {
+                      card.issue.assignee ?
                         <div className="level-item">
-                          <a target="_blank" href={projectURL}>{card.project}</a>
+                          <small>{`@${card.issue.assignee.login}`}</small>
                         </div>
-                      }
+                      : null
-                    </div>
+                    }
-                    <div className="level-right">
+                  </div>
-                      {
+                </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,8 +18,4 @@ html, body {
 #app {
     display: flex;
     flex-direction: column;
-}
-
-.mr-1 {
-    margin-right: 5px;
 }

client/src/sass/_kanboard.scss

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