Blocked warning refactor

app/fonts/taiga.svg

@@ -41,4 +41,5 @@
 <glyph unicode="&#70;" d="M146 73l220 0 0 110-220 0z m256 0l37 0 0 256c0 3-1 6-3 11-2 5-4 8-6 10l-80 80c-2 2-5 4-10 6-4 2-8 3-11 3l0-119c0-8-3-14-8-19-5-6-12-8-19-8l-165 0c-7 0-14 2-19 8-6 5-8 11-8 19l0 119-37 0 0-366 37 0 0 119c0 8 2 14 8 19 5 6 12 8 19 8l238 0c7 0 14-2 19-8 6-5 8-11 8-19z m-109 265l0 92c0 2-1 4-3 6-2 2-4 3-7 3l-54 0c-3 0-5-1-7-3-2-2-3-4-3-6l0-92c0-2 1-4 3-6 2-2 4-3 7-3l54 0c3 0 5 1 7 3 2 2 3 4 3 6z m182-9l0-265c0-8-2-14-8-19-5-6-11-8-19-8l-384 0c-8 0-14 2-19 8-6 5-8 11-8 19l0 384c0 8 2 14 8 19 5 6 11 8 19 8l265 0c8 0 16-1 25-5 9-4 17-9 22-14l80-80c5-5 10-13 14-22 4-9 5-17 5-25z"/>
 <glyph unicode="&#71;" d="M201 165c0-8-1-16-3-24-3-8-7-15-13-22-6-6-12-9-20-9-8 0-15 3-21 9-6 7-10 14-12 22-3 8-4 16-4 24 0 7 1 15 4 23 2 8 6 15 12 22 6 6 13 9 21 9 8 0 14-3 20-9 6-7 10-14 13-22 2-8 3-16 3-23z m183 0c0-8-1-16-4-24-2-8-6-15-12-22-6-6-13-9-21-9-8 0-14 3-20 9-6 7-10 14-13 22-2 8-3 16-3 24 0 7 1 15 3 23 3 8 7 15 13 22 6 6 12 9 20 9 8 0 15-3 21-9 6-7 10-14 12-22 3-8 4-16 4-23z m46 0c0 22-7 42-20 58-13 16-31 24-53 24-8 0-27-2-56-6-14-2-29-3-45-3-16 0-31 1-45 3-29 4-47 6-56 6-22 0-40-8-53-24-13-16-20-36-20-58 0-17 3-32 9-44 7-13 14-23 24-30 9-7 21-13 34-17 14-4 28-7 40-8 13-2 27-2 43-2l48 0c16 0 30 0 43 2 12 1 26 4 40 8 13 4 25 10 34 17 10 7 17 17 24 30 6 12 9 27 9 44z m64 50c0-40-6-71-18-95-7-14-17-27-30-38-13-10-26-19-40-24-14-6-30-11-49-14-18-3-34-5-49-6-14-1-30-1-47-1-15 0-29 0-41 0-12 1-26 2-42 4-16 2-31 5-44 9-13 3-26 8-39 14-13 6-24 14-34 23-11 10-19 21-25 33-12 24-18 55-18 95 0 45 13 83 39 113-5 16-8 32-8 49 0 22 5 42 15 62 21 0 39-4 54-11 16-8 34-20 54-36 28 7 58 10 89 10 28 0 54-3 80-9 20 16 37 27 53 35 16 7 34 11 54 11 10-20 15-40 15-62 0-17-3-33-8-48 26-31 39-69 39-114z"/>
 <glyph unicode="&#72;" d="M232 141l176 175c3 4 5 8 5 13 0 5-2 9-5 13l-29 29c-4 4-8 6-13 6-5 0-10-2-13-6l-134-133-60 60c-3 4-8 5-13 5-5 0-9-1-13-5l-29-29c-3-4-5-8-5-13 0-5 2-9 5-13l103-102c3-4 7-6 12-6 5 0 10 2 13 6z m243 252l0-274c0-23-8-42-24-58-16-16-35-24-58-24l-274 0c-23 0-42 8-58 24-16 16-24 35-24 58l0 274c0 23 8 42 24 58 16 16 35 24 58 24l274 0c23 0 42-8 58-24 16-16 24-35 24-58z"/>
+<glyph unicode="&#73;" d="M256 484c-126 0-228-102-228-228 0-126 102-228 228-228 126 0 228 102 228 228 0 126-102 228-228 228z m0-399c-94 0-171 77-171 171 0 94 77 171 171 171 94 0 171-77 171-171 0-94-77-171-171-171z m-2 312c-23-2-40-23-37-46l12-118c2-13 12-24 26-26 16-1 30 10 31 26l13 118c0 3 0 6 0 8-2 23-22 40-45 38z m-21-220c-7-7-11-16-11-25 0-10 4-19 11-26 7-6 16-10 25-10 9 0 19 4 25 10 7 7 11 16 11 26 0 9-4 18-11 25-13 13-37 13-50 0z"/>
 </font></defs></svg>

app/partials/issues-detail-edit.jade

@@ -12,14 +12,12 @@ block content
                 a.button.button-green.save-issue(href="", title="Save") Save
 
             section.us-story-main-data
-                div.us-title
+                div.us-title(ng-class="{blocked: issue.is_blocked}")
                     input(type="text", ng-model="issue.subject")
-
+                    p.block-desc-container(ng-show="issue.is_blocked")
-                div.blocked-warning(ng-show="issue.is_blocked")
+                        span.block-description-title Blocked
-                    span.icon.icon-warning
+                        span.block-description(tg-bind-html="issue.blocked_note || 'This issue is blocked'")
-                    p.blocked Blocked!
+                        a.unblock(ng-click="ctrl.unblock()", href="", title="Unblock issue") Unblock
-                    p(tg-bind-html="issue.blocked_note || 'This issue is blocked'")
-                    a.button.button-red.button-block.unblock(ng-click="ctrl.unblock()", href="", title="Unblock US") Unblock
 
                 div.user-story-tags(tg-tag-line, editable="true", ng-model="issue.tags")
 

app/partials/issues-detail.jade

@@ -12,20 +12,18 @@ block content
                 a.button.button-green(href="", title="Edit", tg-nav="project-issues-detail-edit:project=project.slug,ref=issue.ref") Edit
 
             section.us-story-main-data
-                div.us-title
+                div.us-title(ng-class="{blocked: issue.is_blocked}")
                     h2.us-title-text
                         span.us-number(tg-bo-html="issue.ref")
                         span.us-name(ng-bind="issue.subject")
+                    p.block-desc-container(ng-show="issue.is_blocked")
+                        span.block-description-title Blocked
+                        span.block-description(tg-bind-html="issue.blocked_note || 'This issue is blocked'")
                     div.issue-nav
                         a.icon.icon-arrow-left(ng-show="nextUrl", href="{{ nextUrl }}", title="next issue")
                         a.icon.icon-arrow-right(ng-show="previousUrl",href="{{ previousUrl }}", title="previous issue")
 
-                div.blocked-warning(ng-show="issue.is_blocked")
+                div.user-story-tags(tg-tag-line, ng-model="issue.tags", ng-show="issue.tags")
-                    span.icon.icon-warning
-                    p.blocked Blocked!
-                    p(tg-bind-html="issue.blocked_note || 'This issue is blocked'")
-
-                div.user-story-tags(tg-tag-line, ng-model="issue.tags")
 
             section.us-content.wysiwyg(tg-bind-html="issue.description_html")
 

app/partials/task-detail-edit.jade

@@ -12,14 +12,12 @@ block content
                 a.button.button-green.save-task(href="", title="Save") Save
 
             section.us-story-main-data
-                div.us-title
+                div.us-title(ng-class="{blocked: task.is_blocked}")
                     input(type="text", ng-model="task.subject")
-
+                    p.block-desc-container(ng-show="task.is_blocked")
-                div.blocked-warning(ng-show="task.is_blocked")
+                        span.block-description-title Blocked
-                    span.icon.icon-warning
+                        span.block-description(tg-bind-html="task.blocked_note || 'This task is blocked'")
-                    p.blocked Blocked!
+                        a.unblock(ng-click="ctrl.unblock()", href="", title="Unblock task") Unblock
-                    p(tg-bind-html="task.blocked_note || 'This task is blocked'")
-                    a.button.button-red.button-block.unblock(ng-click="ctrl.unblock()", href="", title="Unblock US") Unblock
 
                 div.user-story-tags(tg-tag-line, editable="true", ng-model="task.tags")
 

app/partials/task-detail.jade

@@ -12,20 +12,18 @@ block content
                 a.button.button-green(href="", title="Edit", tg-nav="project-tasks-detail-edit:project=project.slug,ref=task.ref") Edit
 
             section.us-story-main-data
-                div.us-title
+                div.us-title(ng-class="{blocked: task.is_blocked}")
                     h2.us-title-text
                         span.us-number(tg-bo-html="task.ref")
                         span.us-name(ng-bind="task.subject")
+                    p.block-desc-container(ng-show="task.is_blocked")
+                        span.block-description-title Blocked
+                        span.block-description(tg-bind-html="task.blocked_note || 'This task is blocked'")
                     div.issue-nav
                         a.icon.icon-arrow-left(ng-show="nextUrl", href="{{ nextUrl }}", title="next task")
                         a.icon.icon-arrow-right(ng-show="previousUrl",href="{{ previousUrl }}", title="previous task")
 
-                div.blocked-warning(ng-show="task.is_blocked")
+                div.user-story-tags(tg-tag-line, ng-model="task.tags", ng-show="task.tags")
-                    span.icon.icon-warning
-                    p.blocked Blocked!
-                    p(tg-bind-html="task.blocked_note || 'This task is blocked'")
-
-                div.user-story-tags(tg-tag-line, ng-model="task.tags")
 
             section.us-content.wysiwyg(tg-bind-html="task.description_html")
 

app/partials/us-detail-edit.jade

@@ -12,14 +12,12 @@ block content
                 a.button.button-green.save-us(href="", title="Save") Save
 
             section.us-story-main-data
-                div.us-title
+                div.us-title(ng-class="{blocked: us.is_blocked}")
                     input(type="text", ng-model="us.subject")
-
+                    p.block-desc-container(ng-show="us.is_blocked")
-                div.blocked-warning(ng-show="us.is_blocked")
+                        span.block-description-title Blocked
-                    span.icon.icon-warning
+                        span.block-description(tg-bind-html="us.blocked_note || 'This US is blocked'")
-                    p.blocked Blocked!
+                        a.unblock(ng-click="ctrl.unblock()", href="", title="Unblock US") Unblock
-                    p(tg-bind-html="us.blocked_note || 'This user story is blocked'")
-                    a.button.button-red.button-block.unblock(ng-click="ctrl.unblock()", href="", title="Unblock US") Unblock
 
                 div.user-story-tags(tg-tag-line, editable="true", ng-model="us.tags")
 

app/partials/us-detail.jade

@@ -12,20 +12,20 @@ block content
                 a.button.button-green(href="", title="Edit", tg-nav="project-userstories-detail-edit:project=project.slug,ref=us.ref") Edit
 
             section.us-story-main-data
-                div.us-title
+                div.us-title(ng-class="{blocked: us.is_blocked}")
                     h2.us-title-text
                         span.us-number(tg-bo-html="us.ref")
                         span.us-name(ng-bind="us.subject")
+
+                    p.block-desc-container(ng-show="us.is_blocked")
+                        span.block-description-title Blocked
+                        span.block-description(tg-bind-html="us.blocked_note || 'This user story is blocked'")
                     div.issue-nav
                         a.icon.icon-arrow-left(ng-show="nextUrl", href="{{ nextUrl }}", title="next user story")
                         a.icon.icon-arrow-right(ng-show="previousUrl",href="{{ previousUrl }}", title="previous user story")
 
-                div.blocked-warning(ng-show="us.is_blocked")
-                    span.icon.icon-warning
-                    p.blocked Trolrororo!
-                    p(tg-bind-html="us.blocked_note || 'This user story is blocked'")
 
-                div.user-story-tags(tg-tag-line, ng-model="us.tags")
+                div.user-story-tags(tg-tag-line, ng-model="us.tags", ng-show="us.tags")
 
             section.us-content.wysiwyg(tg-bind-html="us.description_html")
 

app/styles/dependencies/typography.scss

@@ -227,3 +227,6 @@ a:visited {
 .icon-check-square:before {
     content: 'H';
 }
+.icon-warning-alt:before {
+    content: 'I';
+}

app/styles/layout/us-detail.scss

@@ -13,10 +13,33 @@
     .us-title {
         @extend %large;
         @extend %text;
+        @include transition(all .2s linear);
         background: $whitish;
-        margin-bottom: 1rem;
+        margin-bottom: .5rem;
-        padding: 2rem 1rem;
+        padding: 1rem;
         position: relative;
+        &.blocked {
+            background: $red;
+            vertical-align: middle;
+            @include transition(all .2s linear);
+            .us-title-text,
+            input {
+                margin-bottom: .5rem;
+            }
+            .us-number,
+            .us-name {
+                color: $white;
+            }
+            .unblock {
+                @extend %bold;
+                color: $white;
+                float: right;
+                &:hover {
+                    @include transition(color .3s linear);
+                    color: $red-light;
+                }
+            }
+        }
         input {
             background: $white;
         }
@@ -37,42 +60,44 @@
             text-transform: uppercase;
             white-space: nowrap;
         }
-    }
+        .block-desc-container {
-    .blocked-warning {
+            @extend %small;
-        background: $red;
-        color: $white;
-        margin-bottom: 1rem;
-        padding: 1rem;
-        position: relative;
-        .icon {
-            @extend %xxlarge;
-            display: inline;
-            left: 1rem;
-            position: absolute;
-            top: 1rem;
-        }
-        .blocked {
-            @extend %xlarge;
-            @extend %bold;
-            margin-bottom: .3em;
-        }
-        p {
             margin-bottom: 0;
-            margin-left: 4rem;
-            margin-right: 10rem;
         }
-        .button-block {
+        .block-description-title {
-            position: absolute;
+            @extend %bold;
-            right: 1rem;
+            color: $white;
-            top: 1rem;
+            margin-right: .5rem;
         }
+        .block-description {
+            color: $white;
+        }
+    }
+}
+
+.blocked-warning {
+    margin-bottom: 1rem;
+    .blocked {
+        @extend %title;
+        @extend %xlarge;
+        color: $red;
+        line-height: 2.5rem;
+        margin-bottom: .5rem;
+    }
+    .icon {
+        @extend %xlarge;
+        vertical-align: middle;
+    }
+    .block-description {
+        color: $grayer;
+        margin: 0;
     }
 }
 
 .issue-nav {
     position: absolute;
     right: 1rem;
-    top: 1.5rem;
+    top: .7rem;
     a {
         @extend %xlarge;
     }