Activity + comments in Us detail

app/partials/us-detail.jade

@@ -40,5 +40,5 @@ block content
                         span.icon.icon-issues
                         span.tab-title Activity
             include views/modules/comments
-            //include views/modules/activity
+            //-include views/modules/activity
     sidebar.menu-secondary.sidebar

app/partials/views/modules/activity.jade

@@ -1,7 +1,13 @@
 div.us-activity
-    a.activity-title(href="", title="Show activity")
+    - for(var x = 0; x < 6; x++)
-        span made 3 changes
+        div.activity-single
-        span.icon.icon-arrow-up
+            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
@@ -13,3 +19,6 @@ div.us-activity
                             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/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

@@ -10,7 +10,12 @@ section.us-comments
                         img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
                 div.comment-content
                     a.username(href="", title="User name") User Name
-                    include activity
+                    //- 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/styles/main.scss

@@ -44,6 +44,7 @@ $prefix-for-spec:      true;
 @import 'modules/search-filter';
 @import 'modules/search-result-table';
 @import 'modules/comments';
+@import 'modules/comment-activity';
 @import 'modules/activity';
 
 // Responsive

app/styles/modules/activity.scss

@@ -39,3 +39,52 @@
         @extend %small;
     }
 }
+
+.activity-single {
+    @include table-flex;
+    border-bottom: 2px solid $gray-light;
+    padding: 2rem 0;
+    &: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;
+        padding-bottom: 1rem;
+    }
+    .activity-content {
+        @include table-flex-child(20, 150px, 0);
+    }
+    .us-activity {
+        background: $whitish;
+        .activity-inner {
+            display: none;
+        }
+    }
+    .date {
+        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/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

@@ -21,12 +21,16 @@
     @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;
     }
-    &:last-child {
-        border-bottom: 0;
-    }
     .username {
         color: $green-taiga;
         display: block;
@@ -52,4 +56,29 @@
         @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;
+    }
 }