Us detail comments

app/partials/us-detail.jade

@@ -28,4 +28,17 @@ block content
             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

app/partials/views/modules/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,16 @@
+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
+                    include 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

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/layout/us-detail.scss

@@ -42,3 +42,35 @@
         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;
+}

app/styles/main.scss

@@ -43,6 +43,8 @@ $prefix-for-spec:      true;
 @import 'modules/attachments';
 @import 'modules/search-filter';
 @import 'modules/search-result-table';
+@import 'modules/comments';
+@import 'modules/activity';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/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,55 @@
+.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;
+    &:first-child {
+        margin-top: 0;
+    }
+    &:last-child {
+        border-bottom: 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;
+    }
+}