From 35a53481fb7bcfb8b71316796e6f3176db31400f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 6 Nov 2014 12:12:21 +0100
Subject: [PATCH 1/2] Add red color to blocked stories text in sprints

---
 app/partials/views/modules/sprints.jade |  6 +++---
 app/styles/modules/backlog/sprints.scss | 19 +++++++++++++------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/partials/views/modules/sprints.jade b/app/partials/views/modules/sprints.jade
index d850e14d..c4700108 100644
--- a/app/partials/views/modules/sprints.jade
+++ b/app/partials/views/modules/sprints.jade
@@ -19,13 +19,13 @@ section.sprints
 
         div.sprint-table(tg-sprint-sortable)
             div.row.milestone-us-item-row(ng-repeat="us in sprint.user_stories track by us.id")
-                div.column-us.width-8
+                div.column-us
                     a.us-name.clickable(tg-nav="project-userstories-detail:project=project.slug,ref=us.ref",
                                         tg-bo-title="'#' + us.ref + ' ' +  us.subject",
-                                        ng-class="{closed: us.is_closed}")
+                                        ng-class="{closed: us.is_closed, blocked: us.is_blocked}")
                         span(tg-bo-ref="us.ref")
                         span(tg-bo-bind="us.subject")
-                div.column-points.width-1(tg-bo-bind="us.total_points", ng-class="{closed: us.is_closed}")
+                div.column-points.width-1(tg-bo-bind="us.total_points", ng-class="{closed: us.is_closed, blocked: us.is_blocked}")
 
         a.button.button-gray(tg-bo-title="'Go to Taskboard of ' + sprint.name",
                              tg-nav="project-taskboard:project=project.slug,sprint=sprint.slug",
diff --git a/app/styles/modules/backlog/sprints.scss b/app/styles/modules/backlog/sprints.scss
index 979c8f64..52000ff5 100644
--- a/app/styles/modules/backlog/sprints.scss
+++ b/app/styles/modules/backlog/sprints.scss
@@ -143,12 +143,23 @@
                 background: lighten($green-taiga, 60%);
                 box-shadow: 1px 1px 10px rgba($black, .1);
             }
+
         }
         .column-us {
             @include table-flex-child(3, 0, 0);
             @extend %small;
             padding: 0 4px;
         }
+        .us-name {
+            @include ellipsis(250px);
+            display: block;
+            &.closed {
+                color: lighten($gray-light, 5%);
+            }
+            &.blocked {
+                color: $red;
+            }
+        }
         .column-points {
             @include table-flex-child(1, 0, 0);
             padding: 0 4px;
@@ -156,12 +167,8 @@
             &.closed {
                 color: lighten($gray-light, 5%);
             }
-        }
-        .us-name {
-            @include ellipsis(250px);
-            display: block;
-            &.closed {
-                color: lighten($gray-light, 5%);
+            &.blocked {
+                color: $red;
             }
         }
     }

From 8b2e35feba01c7db0f18076219ce284d40786f5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 11 Nov 2014 16:37:57 +0100
Subject: [PATCH 2/2] Add blocked styles to taskboard

---
 .../views/modules/taskboard-table.jade        |  6 +++---
 app/styles/layout/backlog.scss                |  7 -------
 .../modules/backlog/taskboard-table.scss      | 20 +++++++++++++++++++
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/partials/views/modules/taskboard-table.jade b/app/partials/views/modules/taskboard-table.jade
index d9b913b8..fde1fa10 100644
--- a/app/partials/views/modules/taskboard-table.jade
+++ b/app/partials/views/modules/taskboard-table.jade
@@ -8,10 +8,10 @@ div.taskboard-table
 
     div.taskboard-table-body(tg-taskboard-table-height-fixer)
         div.taskboard-table-inner(tg-taskboard-row-width-fixer)
-            div.task-row(ng-repeat="us in userstories track by us.id")
-                div.taskboard-userstory-box.task-column
+            div.task-row(ng-repeat="us in userstories track by us.id", ng-class="{blocked: us.is_blocked}")
+                div.taskboard-userstory-box.task-column(tg-bo-title="us.blocked_note")
                     div.tag-list
-                        span.tag(ng-repeat="tag in us.tags") {{ tag }}
+                        span.tag(ng-repeat="tag in us.tags", tg-bo-bind="tag")
                     h3.us-title
                         a(href="", tg-nav="project-userstories-detail:project=project.slug,ref=us.ref",
                           tg-bo-title="'#' + us.ref + ' ' + us.subject")
diff --git a/app/styles/layout/backlog.scss b/app/styles/layout/backlog.scss
index 5d36481b..324d0eb5 100644
--- a/app/styles/layout/backlog.scss
+++ b/app/styles/layout/backlog.scss
@@ -22,10 +22,3 @@
         }
     }
 }
-
-
-//.menu-secondary.sidebar,
-//.backlog {
-//    height: 100vh;
-//    overflow-x: auto;
-//}
diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss
index 6d1dcbc3..84eafb69 100644
--- a/app/styles/modules/backlog/taskboard-table.scss
+++ b/app/styles/modules/backlog/taskboard-table.scss
@@ -59,6 +59,25 @@ $column-margin: 0 10px 0 0;
                 opacity: 1;
             }
         }
+        &.blocked {
+            .taskboard-userstory-box {
+                background: rgba($red, .6);
+                border-radius: 3px;
+                a,
+                .points-value {
+                    @include transition(color .3s linear);
+                    color: rgba($white, .9);
+                    &:hover {
+                        @include transition(color .3s linear);
+                        color: rgba($white, 1);
+                    }
+                }
+            }
+            .taskboard-tasks-box {
+                //@include filter(saturate(20%));
+                background: rgba($red, .1);
+            }
+        }
     }
     .taskboard-tasks-box {
         background: $whitish;
@@ -66,6 +85,7 @@ $column-margin: 0 10px 0 0;
     }
 
     .taskboard-userstory-box {
+        padding: .5rem;
         .icon {
             @include transition(color .2s linear);
             color: $gray-light;