From 3bb540b6d77428f0404735630cf27d52f200ac82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 25 Jun 2014 11:17:55 +0200 Subject: [PATCH] Fixed taiga taskboard layout --- app/coffee/modules/taskboard.coffee | 6 +- .../views/modules/taskboard-table.jade | 64 ++++++++++++++----- app/styles/modules/nav.scss | 1 + app/styles/modules/taskboard-table.scss | 38 +++++------ 4 files changed, 73 insertions(+), 36 deletions(-) diff --git a/app/coffee/modules/taskboard.coffee b/app/coffee/modules/taskboard.coffee index d2616865..c7f9a36e 100644 --- a/app/coffee/modules/taskboard.coffee +++ b/app/coffee/modules/taskboard.coffee @@ -87,7 +87,7 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin) ############################################################################# ## TaskboardDirective ############################################################################# - +taiga = @.taiga TaskboardDirective = -> ######################### @@ -96,6 +96,10 @@ TaskboardDirective = -> linkSortable = ($scope, $el, $attrs, $ctrl) -> console.log "TaskboardDirective:linkSortable" + taiga.bindOnce $scope, "statusList", (v) -> + console.log 33333, v + size = v.length * 300 + $el.find(".task-row").css("width", size + "px") link = ($scope, $el, $attrs) -> $ctrl = $el.controller() diff --git a/app/partials/views/modules/taskboard-table.jade b/app/partials/views/modules/taskboard-table.jade index 344a0ed2..40dae1f4 100644 --- a/app/partials/views/modules/taskboard-table.jade +++ b/app/partials/views/modules/taskboard-table.jade @@ -5,25 +5,55 @@ div.taskboard-table 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.task-row(ng-repeat="us in userstories track by us.id") + div.taskboard_task-list.task-column 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") + 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") 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 diff --git a/app/styles/modules/nav.scss b/app/styles/modules/nav.scss index 0163ac75..3b71031f 100644 --- a/app/styles/modules/nav.scss +++ b/app/styles/modules/nav.scss @@ -7,6 +7,7 @@ padding: 2rem .3rem; position: fixed; width: 90px; + z-index: 99; } .logo { diff --git a/app/styles/modules/taskboard-table.scss b/app/styles/modules/taskboard-table.scss index 1f1dcc42..304d9fe9 100644 --- a/app/styles/modules/taskboard-table.scss +++ b/app/styles/modules/taskboard-table.scss @@ -1,3 +1,11 @@ +//Table basic shared vars + +$column-width: 300px; +$column-flex: 1; +$column-shrink: 0; +$column-margin: 0 .3rem 0 0; + + .taskboard-table { overflow: hidden; width: 100%; @@ -7,20 +15,16 @@ margin-bottom: .5rem; width: 100%; .taskboard-table-inner { - @extend %table-flex; + @include table-flex(); overflow: hidden; - width: 3500px; //Just and example, should be JS calc } .task-colum_name { - @extend %table-flex-child; + @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); @extend %large; background: $whitish; - margin: 0 .3rem; + margin: $column-margin; padding: .5rem 0; text-align: center; - &:first-child { - margin-left: 0; - } } } @@ -30,23 +34,21 @@ overflow-y: scroll; width: 100%; .taskboard-table-inner { - @extend %table-flex; overflow: hidden; - width: 3500px; //Just and example, should be JS calc } .task-column { - @extend %table-flex-child; - } - .task-row { - height: 30rem; - margin: 0 .3rem 1rem; - margin-bottom: 1rem; + @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); + margin: $column-margin; padding: 1rem; } + .task-row { + @include table-flex(); + margin-bottom: .5rem; + min-height: 30rem; + width: 100%; + } .taskboard_task-playground { - .task-row { - background: $whitish; - } + background: $whitish; } }