From 0e93e7c52f14bebb5f4da8a433d612f22ad27723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Gaud=C3=A9?= <bgaude@cadoles.com>
Date: Fri, 5 Jun 2020 17:14:55 +0200
Subject: [PATCH] =?UTF-8?q?Permettre=20la=20r=C3=A9duction=20des=20colonne?=
 =?UTF-8?q?s=20d'un=20tableau?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/BoardPage/BoardPage.tsx |  8 ++++-
 client/src/components/BoardPage/IssueCard.tsx |  4 +--
 client/src/sass/_kanboard.scss                | 33 ++++++++++++++++---
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/client/src/components/BoardPage/BoardPage.tsx b/client/src/components/BoardPage/BoardPage.tsx
index bc07950..208a5f8 100644
--- a/client/src/components/BoardPage/BoardPage.tsx
+++ b/client/src/components/BoardPage/BoardPage.tsx
@@ -185,6 +185,12 @@ export class BoardPage extends React.Component<BoardPageProps> {
             <h3 className="level-item is-size-5">
               {lane.title}
             </h3>
+            <button className="button is-light level-item is-small expand"
+              onClick={(e) => { console.log(e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('minimized'))}}>
+              <span className="icon">
+                <i className="fas fa-chevron-right" aria-hidden="true"></i>
+              </span>
+            </button>
           </div>
           <div className="level-right">
             <button className="button is-light level-item is-small"
@@ -194,7 +200,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
               </span>
             </button>
             <button className="button is-light level-item is-small"
-              onClick={this.onNewCardClick.bind(this, lane.id)}>
+              onClick={(e) => { console.log(e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('minimized'))}}>
               <span className="icon">
                 <i className="fas fa-chevron-left" aria-hidden="true"></i>
               </span>
diff --git a/client/src/components/BoardPage/IssueCard.tsx b/client/src/components/BoardPage/IssueCard.tsx
index 34e6ca4..8d63978 100644
--- a/client/src/components/BoardPage/IssueCard.tsx
+++ b/client/src/components/BoardPage/IssueCard.tsx
@@ -39,14 +39,14 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
                     }
                   </div>
                 </nav>
-                <span>{card.issue.title}</span>
+                <span>{card.issue.title ? card.issue.title : ''}</span>
               </div>
               {
                 <nav className="level">
                   <div className="level-left"></div>
                   <div className="level-right">
                     <div className="level-item is-size-7">
-                      {card.issue.milestone.title}
+                      {card.issue.milestone ? card.issue.milestone.title : ''}
                     </div>
                   </div>
                 </nav>
diff --git a/client/src/sass/_kanboard.scss b/client/src/sass/_kanboard.scss
index 4a0885a..f4d893c 100644
--- a/client/src/sass/_kanboard.scss
+++ b/client/src/sass/_kanboard.scss
@@ -45,9 +45,11 @@
     .kanboard-lane {
         margin-bottom: $size-small;
         background: $white;
-        position: sticky;
-        position: -webkit-sticky;
         top: 0;
+
+        .expand {
+            display: none;
+        }
     }
 }
 
@@ -87,6 +89,7 @@
 }
 
 .react-kanban-column {
+    transition: width ease .2s;
     max-width: 305px;
     min-width: 305px;
     position: relative;
@@ -99,8 +102,30 @@
     scrollbar-width: 5px;
 
     &.minimized {
-        max-width: 30px;
-        min-width: 30px;
+        max-width: 40px;
+        min-width: 40px;
+        
+        writing-mode: vertical-rl;
+        text-orientation: sideways-right;
+
+        .kanboard-lane {
+            margin-right: -1em;
+
+            h3 {
+                margin-top: .5em;
+                margin-right: -.5em;
+            }
+
+            .tag {
+                margin-right: -1em;
+            }
+
+            .expand {
+                display: block !important;
+                margin-top: .5em;
+            }
+        }
+        
     }
 
     &::-webkit-scrollbar {