Us detail comments
Xavier Julián
parent
711074eed9
commit
998bd17732
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue