From ea27d411013110cb0fb537d137fb39c6f62b0bf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 5 Jun 2014 10:13:51 +0200
Subject: [PATCH] Tags in backlog table

---
 app/styles/components/tag.scss        |  9 ++++++
 app/styles/main.scss                  |  1 +
 app/styles/modules/backlog-table.scss |  6 +++-
 app/views/components/tag.jade         |  1 +
 app/views/modules/backlog-table.jade  | 40 ++++++++++++++-------------
 5 files changed, 37 insertions(+), 20 deletions(-)
 create mode 100644 app/styles/components/tag.scss
 create mode 100644 app/views/components/tag.jade

diff --git a/app/styles/components/tag.scss b/app/styles/components/tag.scss
new file mode 100644
index 00000000..6bf77f95
--- /dev/null
+++ b/app/styles/components/tag.scss
@@ -0,0 +1,9 @@
+.tag {
+    text-align: center;
+    display: inline-block;
+    width: 7rem;
+    padding: 3px;
+    margin: 0 .5rem .5rem 0;
+    color: $white;
+    background: $grayer; /* Fallback */
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 115608d8..bedd52cb 100755
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -22,6 +22,7 @@ $prefix-for-spec:      true;
 @import 'components/avatar';
 @import 'components/summary';
 @import 'components/popover';
+@import 'components/tag';
 
 //Layout
 @import 'layout/base';
diff --git a/app/styles/modules/backlog-table.scss b/app/styles/modules/backlog-table.scss
index 57213263..7be3f144 100644
--- a/app/styles/modules/backlog-table.scss
+++ b/app/styles/modules/backlog-table.scss
@@ -33,7 +33,7 @@
         background: lighten( $greenTaiga, 60% );
         @include transition (background .2s ease-in);
     }
-    .user-stories {
+    .user-story-name {
         flex-basis: 500px;
         input {
             vertical-align: top;
@@ -46,6 +46,10 @@
             display: inline-block;
         }
     }
+    .user-story-tags {
+        margin-top: .3rem;
+        display: none;
+    }
     .title {
         font-family: 'DroidSans-Bold';
         @extend .medium;
diff --git a/app/views/components/tag.jade b/app/views/components/tag.jade
new file mode 100644
index 00000000..57f5ae65
--- /dev/null
+++ b/app/views/components/tag.jade
@@ -0,0 +1 @@
+span.tag Tag name
diff --git a/app/views/modules/backlog-table.jade b/app/views/modules/backlog-table.jade
index 1897d921..64dc640a 100644
--- a/app/views/modules/backlog-table.jade
+++ b/app/views/modules/backlog-table.jade
@@ -1,23 +1,25 @@
 section.backlog-table
-  div.row.title
-    div.user-stories.width-4 User Stories
-    div.status.width-2 Status
-    div.points.width-1 Points
-    div.points.width-1
-  div.row.sub-title
-    div.user-stories.width-4
-    div.status.width-2
-    div.points.width-1 Front
-    div.points.width-1 Back
-  - for (var x = 0; x < 50; x++)
-      div.row.table-main
-        div.user-stories.width-4
-          input(type="checkbox", name="")
-          a(href="") Crear el perfil de usuario Senior en el admin
-          a(href="", title="Edit")
-          span.icon.icon-edit
-          a(href="", title="Delete")
-          span.icon.icon-delete
+    div.row.title
+        div.user-stories.width-4 User Stories
         div.status.width-2 Status
+        div.points.width-1 Points
+        div.points.width-1
+      div.row.sub-title
+        div.user-stories.width-4
+        div.status.width-2
         div.points.width-1 Front
         div.points.width-1 Back
+      - for (var x = 0; x < 50; x++)
+            div.row.table-main
+                div.user-stories.width-4
+                    div.user-story-name
+                        input(type="checkbox", name="")
+                        a(href="") Crear el perfil de usuario Senior en el admin
+                        a.icon.icon-edit(href="", title="Edit")
+                        a.icon.icon-delete(href="", title="Delete")
+                    div.user-story-tags
+                        - for(var y = 0; y < 3; y++)
+                            include ../components/tag
+                div.status.width-2 Status
+                div.points.width-1 Front
+                div.points.width-1 Back