Kanban refactor

app/partials/kanban.jade

@@ -13,4 +13,4 @@ block content
             include views/components/large-summary
             include views/modules/burndown
             include views/modules/list-filters-kanban
-            include views/modules/taskboard-table
+            include views/modules/kanban-table

app/partials/views/components/kanban-task.jade

@@ -0,0 +1,14 @@
+div.kanban-tagline
+    a.taskboard-tag
+div.kanban-task-inner
+    p.task-text
+        span.task-num #37
+        a.task-name(href="", title="task.subject").
+            Para IDE de desarrollo (al menos front end) yo recomiendo Aptana Studio.
+    figure.avatar
+        a(href="", title="UserName")
+            img.avatar(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="")
+        a(href="", title="Change assignation") Username
+    a.icon.icon-edit(href="", title="Edit", ng-click="ctrl.editTask(task)")
+    a.icon.icon-drag-h(href="", title="Drag&Drop")
+    a.task-points(href="", title="task points") 8

app/partials/views/components/large-summary.jade

@@ -35,3 +35,4 @@ div.summary.large-summary
             span.icon.icon-iocaine
             span.number 10
             span.description iocanie<br />doses
+    a.button.button-green.toggle-analytics-visibility(href="", title="Show statistics") Show statistics

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

@@ -0,0 +1,49 @@
+div.kanban-table
+    div.kanban-table-header
+        div.kanban-table-inner
+            h2.task-colum_name Task
+            h2.task-colum_name Open
+            h2.task-colum_name Ready for test
+            h2.task-colum_name Closed
+    div.kanban-table-body
+        div.kanban-table-inner
+            div.taskboard_task-playground.task-column
+                div.kanban-task
+                    include ../components/kanban-task
+            div.taskboard_task-playground.task-column
+                div.kanban-task
+                    include ../components/kanban-task
+            div.taskboard_task-playground.task-column
+                div.kanban-task
+                    include ../components/kanban-task
+            div.taskboard_task-playground.task-column
+    //-
+        div.taskboard-table-body
+            div.taskboard-table-inner(tg-taskboard-row-size-fixer)
+                div.task-row(ng-repeat="us in userstories track by us.id", tg-taskboard-taskrow)
+                    div.taskboard_us-list.task-column
+                        div.tag-list
+                            span.tag(ng-repeat="tag in us.tags") {{ tag }}
+                        h3.us-title
+                            span.us-ref(tg-bo-ref="us.ref")
+                            span(ng-bind="us.subject")
+                        div.status(tg-us-status="us", on-update="ctrl.loadSprintState()")
+                            a.us-status(href="", title="Status Name")
+                                span.us-status-bind
+                                span.icon.icon-arrow-bottom
+                        ul.points-list(tg-taskboard-us-points="us")
+                        include ../components/addnewtask
+
+                    div.taskboard_task-playground.task-column(ng-repeat="st in taskStatusList track by st.id")
+                        div.taskboard-task(ng-repeat="task in usTasks[us.id][st.id] track by task.id")
+                            include ../components/taskboard-task
+
+                div.task-row(ng-init="us = null", tg-taskboard-taskrow)
+                    div.taskboard_us-list.task-column
+                        h3.us-title
+                            span Unassigned tasks
+                        include ../components/addnewtask
+
+                    div.taskboard_task-playground.task-column(ng-repeat="st in taskStatusList track by st.id")
+                        div.taskboard-task(ng-repeat="task in unassignedTasks[st.id] track by task.id")
+                            include ../components/taskboard-task

app/partials/views/modules/list-filters-kanban.jade

@@ -5,19 +5,9 @@ section.list-filters
                 span.icon.icon-filter
                 | SHOW FILTERS
 
-        li
-            a(href="#")
-                span.icon.icon-tag
-                | SHOW TAGS
-
-        li
-            a(href="#")
-                span.icon.icon-graph
-                | HIDE CFD GRAPH
-
     div.new-issue
         a.button.button-green(href="")
             span.text
                 | + NEW TASK
         a.button-bulk(href="")
-            span.icon.icon-bulk
+            span.icon.icon-bulk

app/styles/components/kanban-task.scss

@@ -0,0 +1,66 @@
+.kanban-task {
+    background: $postit;
+    margin-bottom: 1rem;
+    position: relative;
+    &:hover {
+        .icon-edit,
+        .icon-drag-h {
+            @include transition(opacity .2s linear);
+            opacity: 1;
+        }
+    }
+    .kanban-tagline {
+        @include table-flex();
+    }
+    .taskboard-tag {
+        @include table-flex-child(1, 0, 0, 0);
+        background: $postit-hover; //Fallback
+        height: .3rem;
+    }
+    .kanban-task-inner {
+        padding: 1rem;
+    }
+    .task-num {
+        color: $postit-hover;
+        margin-right: .5em;
+    }
+    .task-text {
+        padding-right: 2rem;
+    }
+    .avatar {
+        vertical-align: middle;
+        img {
+            margin-right: 1rem;
+            max-width: 3rem;
+        }
+    }
+    .task-points {
+        @extend %large;
+        color: $postit-hover;
+        padding: .5rem 1rem;
+        position: absolute;
+        right: 0;
+        top: .5rem;
+    }
+    .icon-edit,
+    .icon-drag-h {
+        @include transition(opacity .2s linear);
+        @extend %large;
+        bottom: .2rem;
+        color: $postit-hover;
+        opacity: 0;
+        position: absolute;
+        &:hover {
+            @include transition(color .3s linear);
+            color: darken($postit-hover, 15%);
+        }
+    }
+    .icon-edit {
+        right: .5rem;
+    }
+    .icon-drag-h {
+        @extend %xlarge;
+        cursor: move;
+        right: 45%;
+    }
+}

app/styles/main.scss

@@ -25,6 +25,7 @@ $prefix-for-spec:      true;
 @import 'components/tag';
 @import 'components/filter';
 @import 'components/taskboard-task';
+@import 'components/kanban-task';
 @import 'components/notification-message';
 @import 'components/basic-table';
 @import 'components/paginator';
@@ -40,6 +41,7 @@ $prefix-for-spec:      true;
 @import 'modules/filters';
 @import 'modules/lightbox';
 @import 'modules/taskboard-table';
+@import 'modules/kanban-table';
 @import 'modules/search-filter';
 @import 'modules/search-result-table';
 @import 'modules/search-in';

app/styles/modules/kanban-table.scss

@@ -0,0 +1,53 @@
+//Table basic shared vars
+
+$column-width: 300px;
+$column-flex: 1;
+$column-shrink: 0;
+$column-margin: 0 10px 0 0;
+
+.kanban-table {
+    overflow: hidden;
+    width: 100%;
+}
+
+.kanban-table-header {
+    margin-bottom: .5rem;
+    position: relative;
+    width: 100%;
+    .task-colum_name {
+        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        @extend %large;
+        background: $whitish;
+        margin: $column-margin;
+        padding: .5rem 0;
+        text-align: center;
+        text-transform: uppercase;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+
+.kanban-table-body {
+    height: 700px;
+    overflow-x: scroll;
+    overflow-y: scroll;
+    width: 100%;
+    .task-column {
+        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        margin: $column-margin;
+        padding: 1rem;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .taskboard_task-playground {
+        background: $whitish;
+    }
+}
+
+.kanban-table-inner {
+    @include table-flex();
+    overflow: hidden;
+    position: absolute;
+}

app/styles/shame/shame.scss

@@ -6,6 +6,7 @@
 // No clearfix or known hack fixes it
 // Could be because of flexbox?
 // height of the table has been set manually, wich is ugly.
-.taskboard-table-header {
+.taskboard-table-header,
+.kanban-table-header {
     height: 40px;
 }