Merge branch 'us-detail'

app/fonts/taiga.svg

@@ -34,4 +34,6 @@
 <glyph unicode="&#121;" d="M432 309l-123 0 0 123c0 5-5 10-10 10l-86 0c-5 0-10-5-10-10l0-123-123 0c-5 0-10-5-10-10l0-86c0-3 1-5 3-7 2-2 4-3 7-3l123 0 0-123c0-3 1-5 3-7 2-2 4-3 7-3l86 0c3 0 5 1 7 3 2 2 3 4 3 7l0 123 123 0c3 0 5 1 7 3 2 2 3 4 3 7l0 86c0 5-5 10-10 10z"/>
 <glyph unicode="&#65;" d="M208 1c-47 0-91 19-124 52-34 33-52 77-52 124 0 47 18 91 52 125l178 174c48 48 132 48 180 0 50-50 50-131 0-181l-160-157c-31-30-81-31-113 1-31 31-31 82 0 113l62 62 46-45-62-62c-4-5-5-9-5-12 0-2 1-7 5-11 8-8 14-8 22 0l160 156c25 25 25 66 0 91-24 24-66 24-90 0l-178-175c-21-21-33-49-33-79 0-30 12-58 33-79 42-42 116-42 158 0l80 80 45-45-80-80c-33-33-77-52-124-52z"/>
 <glyph unicode="&#122;" d="M468 210c0-1 0-1 0-2-12-51-38-92-77-124-38-32-84-47-136-47-28 0-55 5-81 15-26 11-49 26-69 45l-37-37c-4-3-8-5-13-5-5 0-9 2-13 5-4 4-5 8-5 13l0 128c0 5 1 9 5 13 4 4 8 5 13 5l128 0c5 0 9-1 13-5 3-4 5-8 5-13 0-5-2-9-5-13l-39-39c13-12 28-22 46-29 17-7 35-10 53-10 26 0 49 6 71 18 23 13 40 30 54 51 2 4 7 15 15 34 1 4 4 6 8 6l55 0c3 0 5 0 7-2 1-2 2-4 2-7z m7 229l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-5 0-9 1-13 5-3 4-5 8-5 13 0 5 2 9 5 13l40 39c-28 26-62 39-100 39-26 0-49-6-71-18-23-13-40-30-54-51-2-4-7-15-15-34-1-4-4-6-8-6l-57 0c-3 0-5 0-7 2-1 2-2 4-2 7l0 2c12 51 38 92 77 124 39 32 85 47 137 47 28 0 55-5 81-15 26-11 50-26 70-45l37 37c4 3 8 5 13 5 5 0 9-2 13-5 4-4 5-8 5-13z"/>
+<glyph unicode="&#66;" d="M236 204l-73 0c-4 0-7-4-7-8l0-112c0-4 3-8 7-8l73 0c4 0 8 4 8 8l0 112c0 5-4 8-8 8z m113 232l-73 0c-4 0-8-4-8-8l0-344c0-4 4-8 8-8l73 0c4 0 7 4 7 8l0 344c0 4-3 8-7 8z m113-105l-72 0c-5 0-8-3-8-7l0-240c0-4 3-8 8-8l72 0c4 0 8 4 8 8l0 240c0 4-4 7-8 7z m-340 0l-72 0c-4 0-8-3-8-7l0-240c0-4 4-8 8-8l72 0c5 0 8 4 8 8l0 240c0 4-3 7-8 7z"/>
+<glyph unicode="&#67;" d="M256 475c40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110 0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29z m37-356l0 54c0 3-1 5-3 7-2 2-4 3-6 3l-55 0c-3 0-5-1-7-3-2-2-3-4-3-7l0-54c0-2 1-5 3-6 2-2 4-3 7-3l55 0c2 0 4 1 6 2 2 2 3 4 3 7z m-1 98l5 178c0 2-1 4-3 5-2 2-4 2-7 2l-62 0c-3 0-5 0-7-2-2-1-3-3-3-5l5-178c0-1 1-3 3-5 1-1 4-2 6-2l53 0c3 0 5 1 7 2 2 2 3 4 3 5z"/>
 </font></defs></svg>

app/partials/us-detail.jade

@@ -0,0 +1,86 @@
+extends layout
+
+block head
+    title Taiga  Project management web application with scrum in mind!
+
+block content
+    div.wrapper
+        div.main.us-detail
+            div.us-detail-header
+                h1
+                    span ProjectName
+                    span.green User Story
+                a.button.button-green(href="", title="Edit") Edit
+            section.us-story-main-data
+                h2.us-title
+                    span.us-number 125
+                    span.us-name Tagear contenido dentro de las catas privadas
+                div.blocked-warning
+                    span.icon.icon-warning
+                    p.blocked Blocked!
+                    p We need Pilar to make a prototype out of this or we are not sure what to show at this part.
+                    a.button.button-red.button-block(href="", title="Unblock US") Unblock
+                div.user-story-tags
+                    - for(var y = 0; y < 6; y++)
+                        include views/components/tag
+                    input(type="text", placeholder="Add Tag")
+            section.us-content
+                p Hay que cambiar el texto "Hola NombreDelUsuario" por "Nivel de conexion al XX%"
+                p La propuesta que esperábamos de UX debía incluir nombre y nivel de conexión. Esperamos nueva propuesta corregida donde aparezca tanto el nombre como el % de conexión
+                p <strong>Test de aceptación</strong>
+                ul
+                    li Entro en la aplicación
+                    li Compruebo que el indicador crece
+                p <strong>Prototipos</strong><br /><a href="">share.axure.com/lalala</a>
+                p <strong>Prototipos</strong><br /><a href="">share.axure.com/lalala</a>
+            include views/modules/attachments
+            section.us-activity
+                ul.us-activity-tabs
+                    li
+                        a.active(href="#")
+                            span.icon.icon-bulk
+                            span.tab-title Comments
+
+                    li
+                        a(href="#")
+                            span.icon.icon-issues
+                            span.tab-title Activity
+                //-include views/modules/comments
+                include views/modules/activity
+        sidebar.menu-secondary.sidebar
+             h1
+                 span Open
+                 span.us-detail-status In progress
+             div.us-detail-progress-bar
+                 div.current-progress
+                 span.tasks-completed 6/7 tasks completed
+             ul.points-per-role
+                 li.total
+                     span.points 10
+                     span.role total
+                 - for(var x=0; x<5; x++)
+                     li.total
+                         span.points 10
+                         span.role UX
+                 section.us-detail-assigned-to
+                     div.user-avatar
+                         a.avatar(href="", title="Assigned to")
+                             img(src="http://thecodeplayer.com/u/uifaces/18.jpg", alt="username")
+                     div.assigned-to
+                         span.assigned-title Assigned to
+                         span.user-assigned Anler Hernández
+                 section.watchers
+                     div.watchers-header
+                         span.title watchers
+                         a.icon.icon-plus(href="", title="Add watcher")
+                     div.watchers-content
+                         - for(var y=0; y<5; y++)
+                             div.watcher-single
+                                 div.watcher-avatar
+                                     a.avatar(href="", title="Assigned to")
+                                         img(src="http://thecodeplayer.com/u/uifaces/32.jpg", alt="username")
+                                 a.watcher-name(href="", title="Jesús Espino") Jesús Espino
+                section.us-settings
+                    a.button.button-gray(href="", title="Client requirement") Client requirement
+                    a.button.button-gray(href="", title="Team requirement") Team requirement
+                    a.button.button-red(href="", title="Block") Block

app/partials/views/modules/activity.jade

@@ -0,0 +1,24 @@
+div.us-activity
+    - for(var x = 0; x < 6; x++)
+        div.activity-single
+            div.activity-user
+                a.avatar(href="", title="User preferences")
+                    img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
+            div.activity-content
+                div.activity-username
+                    a.username(href="", title="User name") User Name
+                    span.date 15 junio 2014 15:30h
+                - for(var y = 0; y < 2; y++)
+                    div.activity-inner
+                        div.activity-changed
+                            span US status
+                        div.activity-fromto
+                            p
+                                strong from <br />
+                                Este es el título que tenía la historia
+                            p
+                                strong to <br />
+                                Este es el título que tenía la historia modificado
+    a.more-activity(href="", title="show more comments")
+         span show previous activity
+         span.prev-activity-num (3 more)

app/partials/views/modules/attachments.jade

@@ -0,0 +1,22 @@
+section.attachments
+    div.attachments-header
+        h3.attachments-title
+            span.icon.icon-attachment
+            span.attachments-num 5
+            span.attachments-text attachments
+            a.button.button-gray(href="", title="Add new attachment")
+                span +new file
+    div.attachment-body
+        - for(var x = 0; x < 3; x++)
+            div.single-attachment
+                div.attachment-name
+                    span.icon.icon-document
+                    a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefildeusuariopefildeusuario.png
+                div.attachment-comment
+                    span Comentario sobre el contenido
+                    span.attachment-size (125kb.)
+                a.settings.icon.icon-edit(href="","Edit")
+                a.settings.icon.icon-drag-v(href="","Drag")
+        a.more-attachments(href="", title="show atachments history")
+            span + show atachments history
+            span.more-attachments-num (3 more)

app/partials/views/modules/comment-activity.jade

@@ -0,0 +1,15 @@
+div.us-activity
+    a.activity-title(href="", title="Show activity")
+        span made 3 changes
+        span.icon.icon-arrow-up
+    - for(var y = 0; y < 2; y++)
+        div.activity-inner
+            div.activity-changed
+                span US status
+            div.activity-fromto
+                p
+                    strong from <br />
+                    Este es el título que tenía la historia
+                p
+                    strong to <br />
+                    Este es el título que tenía la historia modificado

app/partials/views/modules/comments.jade

@@ -0,0 +1,21 @@
+section.us-comments
+    div.add-comment
+        textarea(placeholder="Write here a new commet")
+        a.button.button-green(href="", title="Comment") Comment
+    div.comment-list
+         - for(var x = 0; x < 6; x++)
+            div.comment-single
+                div.comment-user
+                    a.avatar(href="", title="User preferences")
+                        img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
+                div.comment-content
+                    a.username(href="", title="User name") User Name
+                    //- includes module activity
+                    include comment-activity
+                    p.comment
+                        Para un escenario en el cual ya están cargados en la DB la lista de usuarios para un Grupo o varios, tenemos que tener la posibilidad de lanzar a todos los miembros de un grupo y/o a un individuo en concreto, un mail. El mail lleva un bloque de texto (pendiende de que os lo pasemos) y también llevará un link que llevará a una pantalla donde ponga la pw que usará a partir de ese momento. Si elige su PW dentro de las reglas de PW establecidas (pendientes de decidir), el sistema le logará automáticamente.
+                    p.date 15 junio 2014 15:30h
+                    a.delete-comment.icon.icon-delete(href="", title="delete comment")
+         a.more-comments(href="", title="show more comments")
+                span show previous comments
+                span.prev-comments-num (3 more)

app/partials/views/modules/nav.jade

@@ -37,7 +37,7 @@ nav.menu
             li
                 a(href="", title="Logout") Logout
         a.avatar(href="", title="User preferences")
-        img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
+            img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
     div.settings
       a(href="", title="User preferences") Pilar
       a(href="", title="Site preferences")

app/styles/components/buttons.scss

@@ -11,28 +11,23 @@
     }
 }
 
-%button {
+%button,
+.button {
     @extend %large;
+    @include transition (background .3s linear);
     display: inline-block;
     font-family: 'ostrichSans';
     padding: 8px 40px;
-    .icon {
+    &:hover {
-        margin-right: .3rem;
+        @include transition (background .3s linear);
     }
-}
-
-.button-green,
-.button-gray,
-.button-red {
-    @extend %button;
-    @include transition (background .3s linear);
     span {
         color: $white;
         position: relative;
         top: 2px;
     }
-    &:hover {
+    .icon {
-         @include transition (background .3s linear);
+        margin-right: .3rem;
     }
 }
 
@@ -59,6 +54,15 @@
     }
 }
 
+a.button-block {
+    background: $white;
+    color: $red;
+    &:hover {
+        background: $red-light;
+        color: $white;
+    }
+}
+
 .button-bulk {
     @extend %button;
     background: $green-taiga;

app/styles/dependencies/mixins.scss

@@ -10,13 +10,13 @@
 }
 
 // Table Flex - http://devbryce.com/site/flexbox/
-@mixin table-flex() {
+@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
-    align-content: stretch;
+    align-content: $align-content;
-    align-items: stretch;
+    align-items: $align-items;
-    display: flex;
+    display: $display;
-    flex-direction: row;
+    flex-direction: $flex-direction;
-    flex-wrap: wrap;
+    flex-wrap: $flex-wrap;
-    justify-content: flex-start;
+    justify-content: $justify-content;
 }
 
 @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {
@@ -32,3 +32,11 @@
 @mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) {
     box-shadow: $h-shadow $v-shadow $blur $spread $color;
 }
+
+@mixin clearfix {
+    &:after {
+        clear: both;
+        content: '';
+        display: table;
+    }
+}

app/styles/dependencies/typography.scss

@@ -115,83 +115,89 @@ a:visited {
 }
 
 .icon-backlog:before {
-  content: 'a';
+    content: 'a';
 }
 .icon-issues:before {
-  content: 'b';
+    content: 'b';
 }
 .icon-kanban:before {
-  content: 'c';
+    content: 'c';
 }
 .icon-search:before {
-  content: 'd';
+    content: 'd';
 }
 .icon-video:before {
-  content: 'e';
+    content: 'e';
 }
 .icon-wiki:before {
-  content: 'f';
+    content: 'f';
 }
 .icon-settings:before {
-  content: 'g';
+    content: 'g';
 }
 .icon-move:before {
-  content: 'i';
+    content: 'i';
 }
 .icon-filter:before {
-  content: 'j';
+    content: 'j';
 }
 .icon-tag:before {
-  content: 'k';
+    content: 'k';
 }
 .icon-bulk:before {
-  content: 'l';
+    content: 'l';
 }
 .icon-arrow-up:before {
-  content: 'h';
+    content: 'h';
 }
 .icon-arrow-right:before {
-  content: 'm';
+    content: 'm';
 }
 .icon-arrow-left:before {
-  content: 'n';
+    content: 'n';
 }
 .icon-arrow-bottom:before {
-  content: 'o';
+    content: 'o';
 }
 .icon-edit:before {
-  content: 'p';
+    content: 'p';
 }
 .icon-delete:before {
-  content: 'q';
+    content: 'q';
 }
 .icon-iocaine:before {
-  content: 'r';
+    content: 'r';
 }
 .icon-drag-h:before {
-  content: 's';
+    content: 's';
 }
 .icon-drag-v:before {
-  content: 't';
+    content: 't';
 }
 .icon-fontawesome-webfont:before {
-  content: 'u';
+    content: 'u';
 }
-.icon-fontawesome-webfont-1:before {
+.icon-document:before {
-  content: 'v';
+    content: 'v';
 }
 .icon-clipboard-notes:before {
-  content: 'w';
+    content: 'w';
 }
 .icon-male:before {
-  content: 'x';
+    content: 'x';
 }
 .icon-plus:before {
-  content: 'y';
+    content: 'y';
 }
 .icon-attachment:before {
-  content: 'A';
+    content: 'A';
 }
 .icon-reload:before {
-  content: 'z';
+    content: 'z';
+}
+.icon-graph:before {
+    content: 'B';
+}
+.icon-warning:before {
+    content: 'C';
 }

app/styles/layout/us-detail.scss

@@ -0,0 +1,246 @@
+.us-detail-header {
+    position: relative;
+    .button {
+        color: $white;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+}
+
+.us-story-main-data {
+    margin-bottom: 2rem;
+    .us-title {
+        @extend %xlarge;
+        background: $whitish;
+        font-family: 'DroidSans';
+        padding: 2rem 1rem;
+        .us-number {
+            color: $gray-light;
+            margin-right: .5rem;
+        }
+        .us-name {
+            color: $grayer;
+        }
+    }
+    .blocked-warning {
+        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;
+            margin-bottom: .3em;
+        }
+        p {
+            margin-bottom: 0;
+            margin-left: 4rem;
+            margin-right: 10rem;
+        }
+        .button-block {
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
+        }
+    }
+}
+
+.us-content {
+    ul {
+        margin-left: 1rem;
+    }
+    li {
+        list-style-type: disc;
+    }
+    a {
+        color: $green-taiga;
+    }
+}
+
+.user-story-tags {
+    input {
+        display: inline-block;
+        width: 14rem;
+    }
+}
+
+.us-activity-tabs {
+    border-bottom: 3px solid $gray-light;
+    font-family: 'ostrichSans';
+    padding: .5rem 0;
+    li {
+        @extend %large;
+        display: inline-block;
+        &:first-child {
+            border-right: 1px solid $gray-light;
+        }
+    }
+    a {
+        @include transition(color .2s ease-in);
+        color: $gray-light;
+        padding: 0 2rem;
+        &.active {
+            color: $grayer;
+        }
+        &:hover {
+            @include transition(color .2s ease-in);
+            color: $green-taiga;
+        }
+    }
+    .icon {
+        margin-right: .5rem;
+    }
+}
+
+.comment-list {
+    padding: 1rem 2rem;
+}
+
+.us-detail-status {
+    @extend %large;
+    color: $green-taiga;
+    vertical-align: middle;
+}
+
+.us-detail-progress-bar {
+    background: $grayer;
+    height: 26px;
+    margin-bottom: 1rem;
+    position: relative;
+    .current-progress {
+        background: $fresh-taiga;
+        height: 26px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 60%;
+    }
+    .tasks-completed {
+        @extend %small;
+        color: $white;
+        left: 10px;
+        position: absolute;
+        top: 2px;
+    }
+}
+
+.points-per-role {
+    li {
+        border-right: 1px solid $grayer;
+        display: inline-block;
+        margin: .5rem .1rem;
+        opacity: .3;
+        text-align: center;
+        width: 18%;
+        &:first-child {
+            opacity: 1;
+        }
+        &:nth-child(5n) {
+            border: 0;
+        }
+    }
+    .points {
+        @extend %xlarge;
+        display: block;
+        font-family: 'ostrichSans';
+        text-align: center;
+    }
+    .role {
+        display: inline-block;
+        max-width: 90%;
+        overflow: hidden;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.us-detail-assigned-to {
+    @include table-flex();
+    margin-top: 2rem;
+    .user-avatar {
+        @include table-flex-child(1, 0);
+    }
+    .assigned-to {
+        @include table-flex-child(3, 0);
+        margin-left: 1rem;
+        margin-top: 15px;
+        .assigned-title {
+            color: $gray-light;
+            display: block;
+        }
+        .user-assigned {
+            @extend %large;
+            color: $green-taiga;
+        }
+    }
+}
+
+.watchers {
+    margin-top: 2rem;
+    .watchers-header {
+        border-bottom: 2px solid $gray-light;
+        padding: .5rem;
+        position: relative;
+        .title {
+            @extend %large;
+            font-family: 'ostrichSans';
+        }
+        .icon {
+            @extend %large;
+            position: absolute;
+            right: 1rem;
+            top: 4px;
+        }
+    }
+    .watcher-single {
+        @include table-flex(center, center, flex, row, wrap, center);
+        border-bottom: 1px solid $gray-light;
+        padding: .5rem;
+        vertical-align: middle;
+        &:last-child {
+            border: 0;
+        }
+        .watcher-avatar {
+            @include table-flex-child(1, 0);
+        }
+        .watcher-name {
+            @include table-flex-child(8, 0);
+            @extend %large;
+            color: $grayer;
+            margin-left: 1rem;
+        }
+    }
+}
+
+.us-settings {
+    margin-top: 2rem;
+    .button {
+        color: $white;
+        display: block;
+        margin-bottom: .5rem;
+        text-align: center;
+        width: 100%;
+    }
+    .button-gray {
+        background: $gray-light;
+        &:hover,
+        &.active {
+            background: $grayer;
+        }
+    }
+    .button-red {
+        &:hover,
+        &.active {
+            background: $red;
+        }
+    }
+}

app/styles/main.scss

@@ -46,6 +46,10 @@ $prefix-for-spec:      true;
 @import 'modules/admin-membership-table';
 @import 'modules/category-config';
 @import 'modules/project-details';
+@import 'modules/attachments';
+@import 'modules/comments';
+@import 'modules/comment-activity';
+@import 'modules/activity';
 
 // Responsive
 @import 'responsive/mobile';
@@ -55,5 +59,6 @@ $prefix-for-spec:      true;
 @import 'layout/base';
 @import 'layout/backlog';
 @import 'layout/taskboard';
+@import 'layout/us-detail';
 @import 'layout/admin-membership';
 @import 'layout/kanban';

app/styles/modules/activity.scss

@@ -0,0 +1,93 @@
+.us-activity {
+    margin-bottom: 1rem;
+    padding: 0 1rem;
+}
+
+.activity-title {
+    display: block;
+    padding: .5rem;
+    &:hover {
+        .icon {
+            @include transform(rotate(180deg));
+            @include transition(all.2s linear);
+            color: $green-taiga;
+        }
+    }
+    .icon {
+        @include transform(rotate(0));
+        @include transition(all.2s linear);
+        color: $grayer;
+        float: right;
+    }
+}
+
+.activity-inner {
+    @include table-flex;
+    border-bottom: 1px solid $gray-light;
+    padding: 1rem 0;
+    &:last-child {
+        border-bottom: 0;
+    }
+    .activity-changed,
+    .activity-fromto {
+        @include table-flex-child(1, 50px, 0);
+    }
+    .activity-changed {
+        font-family: 'DroidSans-Bold';
+    }
+    .activity-fromto {
+        @extend %small;
+    }
+}
+
+.activity-single {
+    @include table-flex;
+    border-bottom: 2px solid $gray-light;
+    padding: 2rem 0;
+    position: relative;
+    &:first-child {
+        margin-top: 0;
+    }
+    .username {
+        color: $green-taiga;
+        margin-bottom: 1rem;
+    }
+    .activity-user {
+        @include table-flex-child(1, 50px, 0);
+        img {
+            max-width: 70px;
+            width: 100%;
+        }
+    }
+    .activity-username {
+        border-bottom: 1px dotted $gray-light;
+        color: $green-taiga;
+        margin-bottom: 1rem;
+    }
+    .activity-content {
+        @include table-flex-child(20, 150px, 0);
+    }
+    .us-activity {
+        background: $whitish;
+        .activity-inner {
+            display: none;
+        }
+    }
+    .date {
+        @extend %small;
+        color: $gray-light;
+        margin-left: 1rem;
+    }
+}
+
+.more-activity {
+    @extend %small;
+    border-bottom: 1px solid $gray-light;
+    color: $gray-light;
+    display: block;
+    padding: 1rem;
+    .prev-activity-num {
+        color: $green-taiga;
+        margin-left: .5rem;
+    }
+}

app/styles/modules/attachments.scss

@@ -0,0 +1,81 @@
+.attachments {
+    margin-bottom: 2rem;
+}
+
+.attachments-header {
+    background: $whitish;
+    @include clearfix;
+    padding: .5rem 1rem;
+    .button {
+        float: right;
+        padding: .2rem 6rem;
+    }
+    .icon,
+    .attachments-num,
+    .attachments-text {
+        @extend %medium;
+        margin-right: .5rem;
+        position: relative;
+        top: 2px;
+    }
+}
+
+.single-attachment {
+    @include table-flex();
+    @extend %small;
+    border-bottom: 1px solid #cdcdcd;
+    padding: 1rem 0 1rem 1rem;
+    position: relative;
+    &:last-child {
+        border: 0;
+    }
+    .attachment-name {
+        @include ellipsis(200px);
+        @include table-flex-child(1, 200px);
+        padding-right: 1rem;
+        .icon {
+            margin-right: .5rem;
+        }
+    }
+    .attachment-comment {
+        @include table-flex-child(10, 300px);
+        .attachment-size {
+            color: $gray-light;
+            margin-left: .5rem;
+        }
+    }
+    .settings {
+        @extend %large;
+        color: $gray-light;
+        display: none;
+    }
+    &:hover {
+        @include transition (background .2s ease-in);
+        background: lighten($green-taiga, 60%);
+        .settings {
+            @include transition (opacity .2s ease-in);
+            display: block;
+            position: absolute;
+            top: 1rem;
+        }
+        .icon-edit {
+            right: 4rem;
+        }
+        .icon-drag-v {
+            cursor: move;
+            right: 1rem;
+        }
+    }
+}
+
+.more-attachments {
+    @extend %small;
+    border-bottom: 1px solid $gray-light;
+    color: $gray-light;
+    display: block;
+    padding: 1rem 0 1rem 1rem;
+    .more-attachments-num {
+        color: $green-taiga;
+        margin-left: .5rem;
+    }
+}

app/styles/modules/comment-activity.scss

@@ -0,0 +1,41 @@
+.us-activity {
+    margin-bottom: 1rem;
+    padding: 0 1rem;
+}
+
+.activity-title {
+    display: block;
+    padding: .5rem;
+    &:hover {
+        .icon {
+            @include transform(rotate(180deg));
+            @include transition(all.2s linear);
+            color: $green-taiga;
+        }
+    }
+    .icon {
+        @include transform(rotate(0));
+        @include transition(all.2s linear);
+        color: $grayer;
+        float: right;
+    }
+}
+
+.activity-inner {
+    @include table-flex;
+    border-bottom: 1px solid $gray-light;
+    padding: 1rem 0;
+    &:last-child {
+        border-bottom: 0;
+    }
+    .activity-changed,
+    .activity-fromto {
+        @include table-flex-child(1, 50px, 0);
+    }
+    .activity-changed {
+        font-family: 'DroidSans-Bold';
+    }
+    .activity-fromto {
+        @extend %small;
+    }
+}

app/styles/modules/comments.scss

@@ -0,0 +1,84 @@
+.add-comment {
+    @include clearfix;
+    textarea {
+        @include transition(height .3s ease-in);
+        &:focus {
+            @include transition(height .3s ease-in);
+            height: 150px;
+            +a {
+                display: inline-block;
+            }
+        }
+    }
+    a {
+        color: $white;
+        display: none;
+        float: right;
+    }
+}
+
+.comment-single {
+    @include table-flex;
+    border-bottom: 2px solid $gray-light;
+    padding: 1rem 0;
+    position: relative;
+    &:hover {
+        .delete-comment {
+            opacity: 1;
+            @include transition(opacity .2s linear);
+        }
+    }
+    &:first-child {
+        margin-top: 0;
+    }
+    .username {
+        color: $green-taiga;
+        display: block;
+        margin-bottom: 1rem;
+    }
+    .comment-user {
+        @include table-flex-child(1, 50px, 0);
+        img {
+            max-width: 70px;
+            width: 100%;
+        }
+    }
+    .comment-content {
+        @include table-flex-child(20, 150px, 0);
+    }
+    .us-activity {
+        background: $whitish;
+        .activity-inner {
+            display: none;
+        }
+    }
+    .date {
+        @extend %small;
+        color: $gray-light;
+    }
+    .delete-comment {
+        @include transition(all .2s linear);
+        bottom: 2rem;
+        color: $grayer;
+        opacity: 0;
+        position: absolute;
+        right: 1.5rem;
+        &:hover {
+            @include transition(color .2s linear);
+            color: $red;
+
+        }
+    }
+}
+
+.more-comments {
+    @extend %small;
+    border-bottom: 1px solid $gray-light;
+    color: $gray-light;
+    display: block;
+    padding: 1rem;
+    .prev-comments-num {
+        color: $green-taiga;
+        margin-left: .5rem;
+    }
+}

app/styles/modules/lightbox.scss

@@ -104,10 +104,10 @@
                 color: $white;
             }
             &.selected {
-               @include transition(all .2s ease-in);
+                @include transition(all .2s ease-in);
-               background: $green-taiga;
+                background: $green-taiga;
-               border: 1px solid $green-taiga;
+                border: 1px solid $green-taiga;
-               color: $white;
+                color: $white;
             }
         }
         .blocked {

app/us-detail.jade

@@ -1,31 +0,0 @@
-extends layout
-
-block head
-    title Taiga  Project management web application with scrum in mind!
-
-block content
-    div.main.us-detail
-        header
-            h1
-                span ProjectName
-                span.green User Story
-            a.button.button-green(href="", title="Edit") Edit
-        section.us-story-main-data
-            h2.us-title
-                span.us-number 125
-                span-us-name Tagear contenido dentro de las catas privadas
-            div.user-story-tags
-                - for(var y = 0; y < 6; y++)
-                    include views/components/tag
-                input(type="text", placeholder="Add Tag")
-            div.us-description
-                p Hay que cambiar el texto "Hola NombreDelUsuario" por "Nivel de conexion al XX%"
-                p La propuesta que esperábamos de UX debía incluir nombre y nivel de conexión. Esperamos nueva propuesta corregida donde aparezca tanto el nombre como el % de conexión
-                p <strong>Test de aceptación</strong>
-                ul
-                    li Entro en la aplicación
-                    li Compruebo que el indicador crece
-                p <strong>Prototipos</strong><br /><a href="">share.axure.com/lalala</a>
-                p <strong>Prototipos</strong><br /><a href="">share.axure.com/lalala</a>
-        include views/modules/attachments
-    sidebar.menu-secondary.sidebar

app/views/modules/attachments.jade

@@ -1,9 +0,0 @@
-section.attachments
-    div.attachments-header
-        div.attachments-inner
-            h3.attachments-title
-                span.icon.icon-attachment
-                span.attachments-num {{5}}
-                span.attachemnts-text attachments
-            a(href="", title="Add new attachment")
-                span.icon.icon-plus