From e3459d136ef6c54a4309b4bf4e297d20f8da2256 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Gaud=C3=A9?= <bgaude@cadoles.com>
Date: Tue, 16 Jun 2020 11:23:57 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20mode=20compact=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/BoardPage/BoardPage.tsx | 17 ++++++--
 client/src/components/BoardPage/IssueCard.tsx | 43 +++++++++++--------
 client/src/sass/_base.scss                    |  4 ++
 client/src/sass/_kanboard.scss                | 17 ++++++++
 4 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/client/src/components/BoardPage/BoardPage.tsx b/client/src/components/BoardPage/BoardPage.tsx
index d5f7d5d..b4c5c4f 100644
--- a/client/src/components/BoardPage/BoardPage.tsx
+++ b/client/src/components/BoardPage/BoardPage.tsx
@@ -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>
diff --git a/client/src/components/BoardPage/IssueCard.tsx b/client/src/components/BoardPage/IssueCard.tsx
index 8d63978..4b4f305 100644
--- a/client/src/components/BoardPage/IssueCard.tsx
+++ b/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">
-                  <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">
diff --git a/client/src/sass/_base.scss b/client/src/sass/_base.scss
index 8d158ef..1e501a7 100644
--- a/client/src/sass/_base.scss
+++ b/client/src/sass/_base.scss
@@ -18,4 +18,8 @@ html, body {
 #app {
     display: flex;
     flex-direction: column;
+}
+
+.mr-1 {
+    margin-right: 5px;
 }
\ No newline at end of file
diff --git a/client/src/sass/_kanboard.scss b/client/src/sass/_kanboard.scss
index f4d893c..d88a188 100644
--- a/client/src/sass/_kanboard.scss
+++ b/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%;
+    }
 }
\ No newline at end of file