diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade
index 139f34c3..1a4a893d 100644
--- a/app/partials/us-detail.jade
+++ b/app/partials/us-detail.jade
@@ -28,4 +28,17 @@ block content
p Prototipos
share.axure.com/lalala
p Prototipos
share.axure.com/lalala
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
diff --git a/app/partials/views/modules/activity.jade b/app/partials/views/modules/activity.jade
new file mode 100644
index 00000000..2a146327
--- /dev/null
+++ b/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
+ Este es el título que tenía la historia
+ p
+ strong to
+ Este es el título que tenía la historia modificado
diff --git a/app/partials/views/modules/comments.jade b/app/partials/views/modules/comments.jade
new file mode 100644
index 00000000..0f0cfac1
--- /dev/null
+++ b/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
diff --git a/app/partials/views/modules/nav.jade b/app/partials/views/modules/nav.jade
index edb2b024..bffc7f62 100644
--- a/app/partials/views/modules/nav.jade
+++ b/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")
diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss
index bf2fd2d2..ffab73b0 100644
--- a/app/styles/layout/us-detail.scss
+++ b/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;
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index d5d64ae8..b5a4f2b0 100755
--- a/app/styles/main.scss
+++ b/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';
diff --git a/app/styles/modules/activity.scss b/app/styles/modules/activity.scss
new file mode 100644
index 00000000..ff658130
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/app/styles/modules/comments.scss b/app/styles/modules/comments.scss
new file mode 100644
index 00000000..e6918bc5
--- /dev/null
+++ b/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;
+ }
+}