Row Fold

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

@@ -2,7 +2,7 @@ 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
+            //- TODO Add class .colum-fold in .task-column
             h2.task-colum-name(ng-repeat="s in taskStatusList track by s.id",
                                ng-style="{'border-top-color':s.color}", tg-bo-title="s.name")
                 span(tg-bo-bind="s.name")
@@ -11,8 +11,11 @@ div.taskboard-table
 
     div.taskboard-table-body(tg-taskboard-table-height-fixer)
         div.taskboard-table-inner(tg-taskboard-row-width-fixer)
-            div.task-row(ng-repeat="us in userstories track by us.id", ng-class="{blocked: us.is_blocked}")
+            //- TODO: Add class .row-fold in .task-column
+            div.task-row.row-fold(ng-repeat="us in userstories track by us.id", ng-class="{blocked: us.is_blocked}")
                 div.taskboard-userstory-box.task-column(tg-bo-title="us.blocked_note")
+                    a.icon.icon-vfold.vfold(href="", title="Fold Row")
+                    a.icon.icon-vunfold.vunfold.hidden(href="", title="Unfold Row")
                     h3.us-title
                         a(href="", tg-nav="project-userstories-detail:project=project.slug,ref=us.ref",
                           tg-bo-title="'#' + us.ref + ' ' + us.subject")
@@ -21,20 +24,21 @@ div.taskboard-table
                     p.points-value
                         span(ng-bind="us.total_points")
                         span points
-                    include ../components/addnewtask.jade
+                    include ../components/addnewtask
-                //- Add class .colum-hfold in .task-column
+                //- TODO: Add class .colum-fold 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",
                                            tg-taskboard-task)
                             include ../components/taskboard-task
 
-            div.task-row(ng-init="us = null")
+            //- TODO: Add class .row-fold in .task-Column
+            div.task-row.row-fold(ng-init="us = null")
                 div.taskboard-userstory-box.task-column
                     h3.us-title
                         span Unassigned tasks
                     include ../components/addnewtask.jade
-                //- Add class .colum-hfold in .task-column
+                //- TODO Add class .colum-fold 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/modules/backlog/taskboard-table.scss

@@ -63,7 +63,7 @@ $column-margin: 0 10px 0 0;
                 opacity: 0;
             }
         }
-        &.column-hfold {
+        &.column-fold {
             @include align-items(center);
             @include justify-content(center);
             max-width: $column-folded-width;
@@ -95,7 +95,7 @@ $column-margin: 0 10px 0 0;
         &:last-child {
             margin-right: 0;
         }
-        &.colum-hfold {
+        &.colum-fold {
             max-width: $column-folded-width;
             width: $column-folded-width;
             .taskboard-task {
@@ -152,25 +152,71 @@ $column-margin: 0 10px 0 0;
                 background: rgba($red, .1);
             }
         }
+        &.row-fold {
+            min-height: 0;
+            .taskboard-userstory-box {
+                .us-title {
+                    @include ellipsis(100%);
+                }
+                .points-value,
+                .icon-plus,
+                .icon-bulk {
+                    display: none;
+                }
+            }
+            .task-column {
+                @include table-flex();
+                @include flex-direction(row);
+            }
+            .taskboard-task {
+                background: none;
+                border: 0;
+                margin: 0;
+                max-width: 40px;
+                min-height: 0;
+                width: 40px;
+                .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;
+                }
+            }
+        }
     }
     .taskboard-tasks-box {
         background: $whitish;
     }
 
     .taskboard-userstory-box {
-        padding: .5rem;
+        padding: .5rem .5rem .5rem 1.5rem;
         .icon {
             @include transition(color .2s linear);
             color: $gray-light;
             position: absolute;
             right: .5rem;
-            top: 1rem;
+            top: .7rem;
             &:hover {
                 color: $green-taiga;
             }
             &.icon-plus {
                 right: 2rem;
             }
+            &.icon-vfold {
+                left: 0;
+                right: inherit;
+            }
         }
     }
 }