Column fold in taskboard
Xavier Julián
David Barragán Merino
parent
a55566d1e0
commit
97170673fa
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
}
|
||||
.taskboard-task-inner {
|
||||
@include table-flex();
|
||||
min-height: 7rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
.taskboard-user-avatar {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue