Column fold in taskboard

app/partials/taskboard.jade

@@ -11,7 +11,7 @@ block content
                 span(tg-bo-bind="project.name", class="project-name-short")
                 span.green(tg-bo-bind="sprint.name")
                 span.date(tg-date-range="sprint.estimated_start,sprint.estimated_finish")
-            include views/components/sprint-summary
+            //- include views/components/sprint-summary
 
             div.graphics-container
                 div.burndown(tg-sprint-graph)

app/partials/views/modules/taskboard-table.jade

@@ -2,9 +2,12 @@ div.taskboard-table
     div.taskboard-table-header
         div.taskboard-table-inner(tg-taskboard-row-width-fixer)
             h2.task-colum-name "User story"
+            //- Add class .colum-hfold in .task-column
             h2.task-colum-name(ng-repeat="s in taskStatusList track by s.id",
-                               ng-style="{'border-top-color':s.color}")
+                               ng-style="{'border-top-color':s.color}", tg-bo-title="s.name")
                 span(tg-bo-bind="s.name")
+                a.icon.icon-vfold.hfold(href="", title="Fold Column")
+                a.icon.icon-vunfold.hunfold.hidden(href="", title="Unfold Column")
 
     div.taskboard-table-body(tg-taskboard-table-height-fixer)
         div.taskboard-table-inner(tg-taskboard-row-width-fixer)
@@ -19,7 +22,7 @@ div.taskboard-table
                         span(ng-bind="us.total_points")
                         span points
                     include ../components/addnewtask.jade
-
+                //- Add class .colum-hfold in .task-column
                 div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id",
                                                     tg-taskboard-sortable)
                         div.taskboard-task(ng-repeat="task in usTasks[us.id][st.id] track by task.id",
@@ -31,7 +34,7 @@ div.taskboard-table
                     h3.us-title
                         span Unassigned tasks
                     include ../components/addnewtask.jade
-
+                //- Add class .colum-hfold in .task-column
                 div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id",
                                                     tg-taskboard-sortable)
                     div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id",

app/styles/components/taskboard-task.scss

@@ -45,7 +45,6 @@
     }
     .taskboard-task-inner {
         @include table-flex();
-        min-height: 7rem;
         padding: .5rem;
     }
     .taskboard-user-avatar {

app/styles/modules/backlog/taskboard-table.scss

@@ -1,6 +1,7 @@
 //Table basic shared vars
 
 $column-width: 300px;
+$column-folded-width: 45px;
 $column-flex: 1;
 $column-shrink: 0;
 $column-margin: 0 10px 0 0;
@@ -21,18 +22,63 @@ $column-margin: 0 10px 0 0;
         position: absolute;
     }
     .task-colum-name {
-        @extend %large;
         @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        @include table-flex();
+        @include justify-content(space-between);
+        @extend %large;
         background: $whitish;
         border-top: 3px solid $gray-light;
+        cursor: pointer;
         margin: $column-margin;
-        padding: .5rem 0;
+        max-width: $column-width;
+        padding: .5rem 1rem;
         position: relative;
-        text-align: center;
         text-transform: uppercase;
+        width: $column-width;
         &:last-child {
             margin-right: 0;
         }
+        &:hover {
+            .icon {
+                &.hfold,
+                &.hunfold {
+                    @include transition(opacity .2s linear);
+                    opacity: 1;
+                }
+            }
+        }
+        .icon {
+            @extend %medium;
+            @include transition(color .2s linear);
+            color: $gray-light;
+            margin-right: .3rem;
+            &:hover {
+                color: $green-taiga;
+            }
+            &.hfold,
+            &.hunfold {
+                @include transition(opacity .2s linear);
+                @include transform(rotate(90deg));
+                display: inline-block;
+                opacity: 0;
+            }
+        }
+        &.column-hfold {
+            @include align-items(center);
+            @include justify-content(center);
+            max-width: $column-folded-width;
+            padding: .3rem 0;
+            width: $column-folded-width;
+            span {
+                display: none;
+            }
+            .icon {
+                &.hfold,
+                &.hunfold {
+                    margin: 0;
+                }
+            }
+        }
     }
 }
 
@@ -42,11 +88,40 @@ $column-margin: 0 10px 0 0;
     overflow-y: scroll;
     width: 100%;
     .task-column {
-        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        @include table-flex-child();
         margin: $column-margin;
+        max-width: $column-width;
+        width: $column-width;
         &:last-child {
             margin-right: 0;
         }
+        &.colum-hfold {
+            max-width: $column-folded-width;
+            width: $column-folded-width;
+            .taskboard-task {
+                background: none;
+                border: 0;
+                margin: 0;
+                min-height: 0;
+                .taskboard-task-inner {
+                    padding: .2rem;
+                }
+                .taskboard-tagline,
+                .taskboard-text {
+                    display: none;
+                }
+                .avatar {
+                    height: 35px;
+                    width: 35px;
+                }
+                .icon {
+                    display: none;
+                }
+                &.ui-sortable-helper {
+                    box-shadow: none;
+                }
+            }
+        }
     }
     .task-row {
         @include table-flex();
@@ -74,14 +149,12 @@ $column-margin: 0 10px 0 0;
                 }
             }
             .taskboard-tasks-box {
-                //@include filter(saturate(20%));
                 background: rgba($red, .1);
             }
         }
     }
     .taskboard-tasks-box {
         background: $whitish;
-        //background: $very-light-gray;
     }
 
     .taskboard-userstory-box {