taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed rows flexbox and margins in taskboard

stable
Xavier Julián 2014-06-25 12:55:49 +02:00
parent 4d0c35fc56
commit 68a65f2ab3
4 changed files with 23 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/coffee/modules/taskboard.coffee
View File

@ -107,9 +107,9 @@ TaskboardDirective = ->
TaskboardTaskrowDirective = -> TaskboardTaskrowDirective = ->
itemSize = 300
link = ($scope, $el, $attrs) -> link = ($scope, $el, $attrs) ->
taiga.bindOnce $scope, "statusList", (statuses) -> taiga.bindOnce $scope, "statusList", (statuses) ->
itemSize = 300 + (10 * statuses.length)
size = (1 + statuses.length) * itemSize size = (1 + statuses.length) * itemSize
$el.css("width", size + "px") $el.css("width", size + "px")

3
app/partials/views/components/backlog-row.jade
View File

@ -7,8 +7,7 @@ div.row.us-item-row(ng-repeat="us in visibleUserstories track by us.id")
a.icon.icon-edit(href="", ng-click="ctrl.editUserStory(us)", title="Edit") a.icon.icon-edit(href="", ng-click="ctrl.editUserStory(us)", title="Edit")
a.icon.icon-delete(href="", ng-click="ctrl.deleteUserStory(us)", title="Delete") a.icon.icon-delete(href="", ng-click="ctrl.deleteUserStory(us)", title="Delete")
div.user-story-tags div.user-story-tags
span.tag(ng-repeat="tag in us.tags") span.tag(ng-repeat="tag in us.tags") {{ tag }}
{{ tag }}
div.status Status div.status Status
div.points 12 div.points 12
div.points 54 div.points 54

31
app/partials/views/modules/taskboard-table.jade
View File

@ -26,34 +26,3 @@ div.taskboard-table
include ../components/addnewus include ../components/addnewus
div.taskboard_task-playground.task-column(ng-repeat="s in statusList track by s.id") div.taskboard_task-playground.task-column(ng-repeat="s in statusList track by s.id")
include ../components/taskboard-task include ../components/taskboard-task
//
div.taskboard-table
div.taskboard-table-header
div.taskboard-table-inner
h2.task-colum_name "User story"
h2.task-colum_name(ng-repeat="s in statusList track by s.id", tg-bo-html="s.name")
div.taskboard-table-body
div.taskboard-table-inner
div.taskboard_task-list.task-column
div.task-row(ng-repeat="us in userstories track by us.id")
div.tag-list
- for(var y = 0; y < 5; y++)
include ../components/tag
h3.task-title
span.task-num 125
span Invitacion de los usuarios a la plataforma
ul.task-list
li.task-status Open
li UX
span 4.5
li Diseño
span 4.5
li Front
span 4.5
li Back
span 4.5
include ../components/addnewus
div.taskboard_task-playground.task-column(ng-repeat="s in statusList track by s.id")
div.task-row(ng-repeat="us in userstories track by us.id")
include ../components/taskboard-task

15
app/styles/modules/taskboard-table.scss
View File

@ -3,7 +3,7 @@
$column-width: 300px; $column-width: 300px;
$column-flex: 1; $column-flex: 1;
$column-shrink: 0; $column-shrink: 0;
$column-margin: 0 .3rem 0 0; $column-margin: 0 10px 0 0;
.taskboard-table { .taskboard-table {
@ -25,6 +25,9 @@ $column-margin: 0 .3rem 0 0;
margin: $column-margin; margin: $column-margin;
padding: .5rem 0; padding: .5rem 0;
text-align: center; text-align: center;
&:last-child {
margin-right: 0;
}
} }
} }
@ -33,13 +36,13 @@ $column-margin: 0 .3rem 0 0;
overflow-x: scroll; overflow-x: scroll;
overflow-y: scroll; overflow-y: scroll;
width: 100%; width: 100%;
.taskboard-table-inner {
overflow: hidden;
}
.task-column { .task-column {
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
margin: $column-margin; margin: $column-margin;
padding: 1rem; padding: 1rem;
&:last-child {
margin-right: 0;
}
} }
.task-row { .task-row {
@include table-flex(); @include table-flex();
@ -53,6 +56,7 @@ $column-margin: 0 .3rem 0 0;
} }
.taskboard_task-list { .taskboard_task-list {
position: relative;
.tag-list { .tag-list {
display: none; display: none;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -76,9 +80,6 @@ $column-margin: 0 .3rem 0 0;
margin-left: .5rem; margin-left: .5rem;
} }
} }
.task-row {
position: relative;
}
.new-us { .new-us {
bottom: 2rem; bottom: 2rem;
position: absolute; position: absolute;