f**ck infernal taskboard table

app/styles/layout/taskboard.scss

@@ -0,0 +1,5 @@
+.taskboard {
+    .burndown-container {
+        display: none;
+    }
+}

app/styles/main.scss

@@ -29,6 +29,7 @@ $prefix-for-spec:      true;
 //Layout
 @import 'layout/base';
 @import 'layout/backlog';
+@import 'layout/taskboard';
 
 //Modules
 @import 'modules/nav';
@@ -38,6 +39,7 @@ $prefix-for-spec:      true;
 @import 'modules/backlog-table';
 @import 'modules/filters';
 @import 'modules/lightbox';
+@import 'modules/taskboard-table';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/taskboard-table.scss

@@ -0,0 +1,265 @@
+%table-flex {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: stretch;
+}
+
+%table-flex-child {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 300px;
+    width: 300px;
+}
+
+.taskboard-table {
+    width:100%;
+    overflow: hidden;
+}
+
+.taskboard-table-header{
+    width:100%;
+    margin-bottom: .5rem;
+    .taskboard-table-inner {
+        overflow: hidden;
+        @extend %table-flex;
+        width:3500px;
+    }
+    .task-colum_name{
+        @extend %table-flex-child;
+        background: $whitish;
+        padding: .5rem 0;
+        text-align: center;
+        @extend .large;
+        margin: 0 .3rem;
+    }
+}
+
+.taskboard-table-body {
+    width:100%;
+    height: 700px;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    .taskboard-table-inner {
+        overflow: hidden;
+        @extend %table-flex;
+        width:3500px;
+    }
+    .task-column {
+        @extend %table-flex-child;
+    }
+    .task-row {
+        height: 30rem;
+        margin-bottom: 1rem;
+        padding: 1rem;
+        margin: 0 .3rem 1rem .3rem;
+    }
+    .taskboard_task-playground {
+        .task-row {
+            background: $whitish;
+        }
+    }
+}
+
+.taskboard_task-list {
+    .tag-list {
+        margin-bottom: 1rem;
+        display: none;
+    }
+    .task-title {
+        font-family: 'DroidSans';
+        @extend .large;
+        margin-bottom: 1rem;
+    }
+    .task-num{
+        color: $gray;
+        margin-right: .5rem;
+    }
+    .task-status {
+        color: $greenTaiga;
+        margin-bottom: .5rem;
+    }
+    .task-list {
+        span {
+            margin-left: .5rem;
+            color: $gray;
+        }
+    }
+}
+
+/*
+.taskboard-table {
+    width:100%;
+    overflow: hidden;
+}
+
+.taskboard-table-header{
+    width:100%;
+    .taskboard-table-inner {
+        overflow: hidden;
+        @extend %table-flex;
+        width:3500px;
+    }
+    .task-colum_name{
+        @extend %table-flex-child;
+        background: $whitish;
+        padding: .5rem 0;
+        text-align: center;
+        @extend .large;
+        margin: 0 .3rem;
+    }
+}
+
+.taskboard-table-body {
+    width:100%;
+    .taskboard-table-inner {
+        overflow: hidden;
+        @extend %table-flex;
+        width:3500px;
+    }
+}
+
+.task-row {
+    height: 30rem;
+    margin-bottom: 1rem;
+    padding: 1rem;
+}
+
+.taskboard_task-list {
+    @extend %table-flex-child;
+    .tag-list {
+        margin-bottom: 1rem;
+        display: none;
+    }
+    .task-title {
+        font-family: 'DroidSans';
+        @extend .large;
+        margin-bottom: 1rem;
+    }
+    .task-num{
+        color: $gray;
+        margin-right: .5rem;
+    }
+    .task-status {
+        color: $greenTaiga;
+        margin-bottom: .5rem;
+    }
+    .task-list {
+        span {
+            margin-left: .5rem;
+            color: $gray;
+        }
+    }
+}
+
+.taskboard_task-status {
+    flex-grow: 10;
+    flex-shrink: 0;
+    flex-basis: 300px;
+    padding: 0 .3rem;
+    .task-row {
+        background: $whitish;
+    }
+}
+
+
+/* .taskboard-table {
+    width:100%;
+    .tag {
+        width: 30%;
+    }
+}
+
+.taskboard_task-list {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 300px;
+    padding: 0 .3rem;
+    width: 300px;
+    .tag-list {
+        margin-bottom: 1rem;
+        display: none;
+    }
+    .task-title {
+        font-family: 'DroidSans';
+        @extend .large;
+        margin-bottom: 1rem;
+    }
+    .task-num{
+        color: $gray;
+        margin-right: .5rem;
+    }
+    .task-status {
+        color: $greenTaiga;
+        margin-bottom: .5rem;
+    }
+    .task-list {
+        span {
+            margin-left: .5rem;
+            color: $gray;
+        }
+    }
+}
+
+.taskboard_task-status {
+    flex-grow: 20;
+    flex-shrink: 0;
+    flex-basis: 300px;
+    padding: 0 .3rem;
+    .task-row {
+        background: $whitish;
+    }
+}
+
+.task-row {
+    height: 30rem;
+    margin-bottom: 1rem;
+    padding: 1rem;
+}
+
+.taskboard-table-inner,
+.taskboard-table-header {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: stretch;
+}
+.taskboard-table-inner {
+    height: 700px;
+    overflow-x: scroll;
+}
+
+.taskboard-table-header{
+    width:3500px;
+}
+
+.task-colum_name{
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 300px;
+    width: 300px;
+    background: $whitish;
+    padding: .5rem 0;
+    text-align: center;
+    @extend .large;
+}
+
+.taskboard-wrapper {
+    width:3500px; //Just a simple example. It should be calculated by JS
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: stretch;
+    .task-column {
+        flex-grow: 1;
+        flex-shrink: 0;
+        flex-basis: 300px;
+        padding: 0 .3rem;
+    }
+} */

app/taskboard.jade

@@ -4,9 +4,11 @@ block head
     title Taiga  Project management web application with scrum in mind!
 
 block content
-    section.main.usstory
+    section.main.taskboard
         h1
             span ProjectName
             span.green Sprint Name
             span.date 02/10/2014-15/10/2014
         include views/components/large-summary
+        include views/modules/burndown
+        include views/modules/taskboard-table

app/views/modules/taskboard-table.jade

@@ -0,0 +1,31 @@
+div.taskboard-table
+    div.taskboard-table-header
+        div.taskboard-table-inner
+            - for(var z = 0; z < 11; z++)
+                h2.task-colum_name user stories
+    div.taskboard-table-body
+        div.taskboard-table-inner
+            div.taskboard_task-list.task-column
+                - for(var x = 0; x < 3; x++)
+                    div.task-row
+                        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
+            - for(var z = 0; z < 10; z++)
+                div.taskboard_task-playground.task-column
+                    - for(var x = 0; x < 3; x++)
+                        div.task-row
+                            //- Include tasks