Fixed taiga taskboard layout

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()

app/partials/views/modules/taskboard-table.jade

@@ -1,3 +1,33 @@
+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.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")
+                    include ../components/taskboard-task
+
+//
     div.taskboard-table
         div.taskboard-table-header
             div.taskboard-table-inner

app/styles/modules/nav.scss

@@ -7,6 +7,7 @@
     padding: 2rem .3rem;
     position: fixed;
     width: 90px;
+    z-index: 99;
 }
 
 .logo {

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;
+        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
-    }
+        margin: $column-margin;
-    .task-row {
-        height: 30rem;
-        margin: 0 .3rem 1rem;
-        margin-bottom: 1rem;
         padding: 1rem;
     }
-    .taskboard_task-playground {
     .task-row {
-            background: $whitish;
+        @include table-flex();
+        margin-bottom: .5rem;
+        min-height: 30rem;
+        width: 100%;
     }
+    .taskboard_task-playground {
+        background: $whitish;
     }
 }