From d510116c4b9b8a979b125bcf432584e5eacb7e6d Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Thu, 5 Dec 2019 17:09:11 +0100
Subject: [PATCH] Better card informations display

---
 client/src/components/BoardPage/BoardPage.jsx | 27 ++++++++++++++++++-
 client/src/components/HomePage/BoardCard.jsx  | 10 ++++---
 client/src/components/Navbar.jsx              |  2 +-
 client/src/sass/_base.scss                    |  1 +
 client/src/store/sagas/kanboards.js           |  7 ++---
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/client/src/components/BoardPage/BoardPage.jsx b/client/src/components/BoardPage/BoardPage.jsx
index e820d6b..31c64b1 100644
--- a/client/src/components/BoardPage/BoardPage.jsx
+++ b/client/src/components/BoardPage/BoardPage.jsx
@@ -43,9 +43,34 @@ export class BoardPage extends React.Component {
       <div className="kanboard-card">
         <div className="box">
           <div className="media">
+            {
+              card.issue.assignee ?
+              <div class="media-left">
+                <figure class="image is-64x64">
+                  <img src={card.issue.assignee.avatar_url} alt="Image" />
+                  <small>{`@${card.issue.assignee.login}`}</small>
+                </figure>
+              </div>
+              : null
+            }
             <div className="media-content">
               <div className="content">
-                <h5 className="is-size-5 is-marginless">{card.title}</h5>
+                <p>
+                  <strong>{`#${card.issue.number}`}</strong>&nbsp;
+                  { card.issue.milestone ? <small>{`- ${card.issue.milestone.title}`}</small> : null }
+                  <br />
+                  <span className="is-size-6">{card.issue.title}</span>
+                </p>
+                <div className="level is-mobile">
+                  <div className="level-left"></div>
+                  <div className="level-right">
+                      <a className="level-item" target="_blank" href={card.issue.url.replace('/api/v1/repos', '')}>
+                        <span className="icon is-small has-text-info">
+                          <i className="fas fa-search" aria-hidden="true"></i>
+                        </span>
+                      </a>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
diff --git a/client/src/components/HomePage/BoardCard.jsx b/client/src/components/HomePage/BoardCard.jsx
index ee0cfeb..24b016d 100644
--- a/client/src/components/HomePage/BoardCard.jsx
+++ b/client/src/components/HomePage/BoardCard.jsx
@@ -8,9 +8,13 @@ export class BoardCard extends React.PureComponent {
         <div className="media">
           <div className="media-content">
             <div className="content">
-              <a href={`#/boards/${board.id}`}>
-                <h3 className="is-size-3">{board.title}</h3>
-              </a>
+              <p>
+                <a href={`#/boards/${board.id}`}>
+                  <strong className="is-size-4">{board.title}</strong>
+                </a>
+                <br />
+                {board.description}
+              </p>
             </div>
           </div>
         </div>
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index c61bcab..bd3caa7 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 export class Navbar extends React.Component {
   render() {
     return (
-      <nav className="navbar" role="navigation" aria-label="main navigation">
+      <nav className="navbar" role="navigation" aria-label="main navigation" style={{marginBottom: '1.5rem'}}>
         <div className="container is-fluid">
           <div className="navbar-brand">
             <a className="navbar-item" href="#/">
diff --git a/client/src/sass/_base.scss b/client/src/sass/_base.scss
index 76be71a..2c67bb9 100644
--- a/client/src/sass/_base.scss
+++ b/client/src/sass/_base.scss
@@ -1,5 +1,6 @@
 html, body {
     height: 100%;
+    background-color: #f7f7f7;
 }
 
 .is-fullheight {
diff --git a/client/src/store/sagas/kanboards.js b/client/src/store/sagas/kanboards.js
index 818f94b..60a56c3 100644
--- a/client/src/store/sagas/kanboards.js
+++ b/client/src/store/sagas/kanboards.js
@@ -64,12 +64,9 @@ function createCards(projects, issues, lane) {
       if (hasLabel) {
         projectCards.push({
           id: issue.id,
-          title: `#${issue.number} - ${issue.title}`,
-          description: "",
+          title: issue.title,
           project: p,
-          labels: issue.labels,
-          assignee: issue.assignee,
-          number: issue.number
+          issue: issue,
         });
       }