diff --git a/app/partials/views/modules/taskboard-table.jade b/app/partials/views/modules/taskboard-table.jade index 7cd36876..9ca0f95d 100644 --- a/app/partials/views/modules/taskboard-table.jade +++ b/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 - //- Add class .colum-hfold in .task-column + include ../components/addnewtask + //- 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", diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss index 4a0f540d..d4e46c89 100644 --- a/app/styles/modules/backlog/taskboard-table.scss +++ b/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; + } } } }