From 7da22c5c95b5e80323f962e6b62e14d0df38abdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Mon, 21 Jul 2014 11:36:43 +0200
Subject: [PATCH] Category config color rectangles

---
 .../views/modules/category-config.jade        | 26 +++++++++-----
 app/styles/modules/category-config.scss       | 34 ++++++++++---------
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/app/partials/views/modules/category-config.jade b/app/partials/views/modules/category-config.jade
index 379600bf..854682f6 100644
--- a/app/partials/views/modules/category-config.jade
+++ b/app/partials/views/modules/category-config.jade
@@ -8,24 +8,31 @@ div.category-config-list
         div.resume
             div.resume-title Attachments
             div.count 2/7
-            div.progress
-                span(style='width: 50%')
+            div.summary-role
+                div.role-summary-single.active
+                div.role-summary-single.inactive
+                div.role-summary-single.inactive
+                div.role-summary-single.active
+                div.role-summary-single.inactive
+                div.role-summary-single.inactive
             div.icon.icon-arrow-bottom
 
     div.category-config
         div.resume
             div.resume-title User stories
             div.count 2/7
-            div.progress
-                span(style='width: 20%')
+            div.summary-role
+                div.role-summary-single.active
+                div.role-summary-single.inactive
             div.icon.icon-arrow-bottom
 
     div.category-config
         div.resume
             div.resume-title Issues
             div.count 2/7
-            div.progress
-                span(style='width: 75%')
+            div.summary-role
+                div.role-summary-single.active
+                div.role-summary-single.inactive
             div.icon.icon-arrow-up
         div.category-items
             div.category-item
@@ -58,6 +65,7 @@ div.category-config-list
         div.resume
             div.resume-title User stories
             div.count 2/7
-            div.progress
-                span(style='width: 20%')
-            div.icon.icon-arrow-bottom
\ No newline at end of file
+            div.summary-role
+                div.role-summary-single.active
+                div.role-summary-single.inactive
+            div.icon.icon-arrow-bottom
diff --git a/app/styles/modules/category-config.scss b/app/styles/modules/category-config.scss
index 5a893e19..28f03e25 100644
--- a/app/styles/modules/category-config.scss
+++ b/app/styles/modules/category-config.scss
@@ -4,36 +4,38 @@
         border-top: 1px solid $gray-light;
     }
     .resume {
+        @include table-flex();
         cursor: pointer;
-        display: flex;
         padding: 1rem;
         position: relative;
     }
     .resume-title {
-        line-height: 28px;
-        width: 280px;
+        @include table-flex-child(1, 280px, 0);
     }
     .count {
+        @include table-flex-child(1, 0, 0);
         color: $gray-light;
-        line-height: 28px;
     }
-    .progress {
-        background-color: $whitish;
-        margin-left: 1rem;
-        padding: 4px;
-        width: 220px;
-        span {
-            background-color: #9fcf0f;
-            display: block;
+    .summary-role {
+        @include table-flex-child(3, 280px, 0);
+        .role-summary-single {
+            background: $gray-light;
+            display: inline-block;
             height: 20px;
+            margin-right: .1rem;
+            width: 15px;
+            &.active {
+                background: $green-taiga;
+            }
+            &.inactive {
+                background: $gray;
+            }
         }
     }
     .icon {
+        @include table-flex-child(1, 0, 0);
         @extend %xlarge;
-        line-height: 28px;
-        position: absolute;
-        right: 1rem;
-        top: 1rem;
+        text-align: right;
     }
     .category-items {
         background-color: $whitish;