diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade
index 1a4a893d..7fe56c70 100644
--- a/app/partials/us-detail.jade
+++ b/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
diff --git a/app/partials/views/modules/activity.jade b/app/partials/views/modules/activity.jade
index 2a146327..e60d3cda 100644
--- a/app/partials/views/modules/activity.jade
+++ b/app/partials/views/modules/activity.jade
@@ -1,15 +1,24 @@
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
+ - 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
+ Este es el título que tenía la historia
+ p
+ strong to
+ 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)
diff --git a/app/partials/views/modules/comment-activity.jade b/app/partials/views/modules/comment-activity.jade
new file mode 100644
index 00000000..2a146327
--- /dev/null
+++ b/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
+ 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
index 0f0cfac1..787e945a 100644
--- a/app/partials/views/modules/comments.jade
+++ b/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)
diff --git a/app/styles/main.scss b/app/styles/main.scss
index b5a4f2b0..342b0fc0 100755
--- a/app/styles/main.scss
+++ b/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
diff --git a/app/styles/modules/activity.scss b/app/styles/modules/activity.scss
index ff658130..8b7e986f 100644
--- a/app/styles/modules/activity.scss
+++ b/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;
+ }
+}
diff --git a/app/styles/modules/comment-activity.scss b/app/styles/modules/comment-activity.scss
new file mode 100644
index 00000000..ff658130
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/app/styles/modules/comments.scss b/app/styles/modules/comments.scss
index e6918bc5..059509ca 100644
--- a/app/styles/modules/comments.scss
+++ b/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;
+ }
}