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

Fix kanban colum width and make that header follow the body

stable
David Barragán Merino 2014-07-31 11:01:32 +02:00
parent 341ba122d5
commit 5236789c83
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/coffee/modules/kanban/main.coffee
View File

@ -200,12 +200,34 @@ module.controller("KanbanController", KanbanController)
KanbanDirective = ($repo, $rootscope) -> KanbanDirective = ($repo, $rootscope) ->
link = ($scope, $el, $attrs) -> link = ($scope, $el, $attrs) ->
tableBodyDom = $el.find(".kanban-table-body")
tableBodyDom.on "scroll", (event) ->
target = angular.element(event.currentTarget)
tableHeaderDom = $el.find(".kanban-table-header .kanban-table-inner")
tableHeaderDom.css("left", -1 * target.scrollLeft())
return {link: link} return {link: link}
module.directive("tgKanban", ["$tgRepo", "$rootScope", KanbanDirective]) module.directive("tgKanban", ["$tgRepo", "$rootScope", KanbanDirective])
#############################################################################
## Kanban Row Size Fixer Directive
#############################################################################
KanbanRowSizeFixer = ->
link = ($scope, $el, $attrs) ->
bindOnce $scope, "usStatusList", (statuses) ->
itemSize = 310
size = (statuses.length * itemSize) - 10
$el.css("width", "#{size}px")
return {link: link}
module.directive("tgKanbanRowSizeFixer", KanbanRowSizeFixer)
############################################################################# #############################################################################
## Taskboard Task Directive ## Taskboard Task Directive
############################################################################# #############################################################################

4
app/partials/views/modules/kanban-table.jade
View File

@ -1,6 +1,6 @@
div.kanban-table div.kanban-table
div.kanban-table-header div.kanban-table-header
div.kanban-table-inner div.kanban-table-inner(tg-kanban-row-size-fixer)
h2.task-colum_name(ng-repeat="s in usStatusList track by s.id", h2.task-colum_name(ng-repeat="s in usStatusList track by s.id",
ng-style="{'border-top-color':s.color}") ng-style="{'border-top-color':s.color}")
span(tg-bo-html="s.name") span(tg-bo-html="s.name")
@ -8,7 +8,7 @@ div.kanban-table
a.icon.icon-bulk(href="", title="Add New bulk", ng-click="ctrl.addNewUs('bulk', s.id)") a.icon.icon-bulk(href="", title="Add New bulk", ng-click="ctrl.addNewUs('bulk', s.id)")
div.kanban-table-body div.kanban-table-body
div.kanban-table-inner div.kanban-table-inner(tg-kanban-row-size-fixer)
div.kanban-uses-box.task-column(ng-repeat="status in usStatusList track by status.id", div.kanban-uses-box.task-column(ng-repeat="status in usStatusList track by status.id",
tg-kanban-sortable) tg-kanban-sortable)
div.kanban-task(ng-repeat="us in usByStatus[status.id] track by us.id", div.kanban-task(ng-repeat="us in usByStatus[status.id] track by us.id",

2
app/styles/modules/kanban/kanban-table.scss
View File

@ -21,7 +21,7 @@ $column-margin: 0 10px 0 0;
} }
.task-colum_name { .task-colum_name {
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
@extend %medium; @extend %large;
background: $whitish; background: $whitish;
border-top: 3px solid $gray-light; border-top: 3px solid $gray-light;
margin: $column-margin; margin: $column-margin;