diff --git a/app/fonts/taiga.eot b/app/fonts/taiga.eot
index e827d9a4..c0590ee8 100644
Binary files a/app/fonts/taiga.eot and b/app/fonts/taiga.eot differ
diff --git a/app/fonts/taiga.svg b/app/fonts/taiga.svg
index 7097c6f2..63480eff 100644
--- a/app/fonts/taiga.svg
+++ b/app/fonts/taiga.svg
@@ -34,4 +34,6 @@
+
+
diff --git a/app/fonts/taiga.ttf b/app/fonts/taiga.ttf
index aaa07b68..a6c79474 100644
Binary files a/app/fonts/taiga.ttf and b/app/fonts/taiga.ttf differ
diff --git a/app/fonts/taiga.woff b/app/fonts/taiga.woff
index 93d57a0f..67cb0dd3 100644
Binary files a/app/fonts/taiga.woff and b/app/fonts/taiga.woff differ
diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade
new file mode 100644
index 00000000..69d9ef73
--- /dev/null
+++ b/app/partials/us-detail.jade
@@ -0,0 +1,86 @@
+extends layout
+
+block head
+ title Taiga Project management web application with scrum in mind!
+
+block content
+ div.wrapper
+ div.main.us-detail
+ div.us-detail-header
+ h1
+ span ProjectName
+ span.green User Story
+ a.button.button-green(href="", title="Edit") Edit
+ section.us-story-main-data
+ h2.us-title
+ span.us-number 125
+ span.us-name Tagear contenido dentro de las catas privadas
+ div.blocked-warning
+ span.icon.icon-warning
+ p.blocked Blocked!
+ p We need Pilar to make a prototype out of this or we are not sure what to show at this part.
+ a.button.button-red.button-block(href="", title="Unblock US") Unblock
+ div.user-story-tags
+ - for(var y = 0; y < 6; y++)
+ include views/components/tag
+ input(type="text", placeholder="Add Tag")
+ section.us-content
+ p Hay que cambiar el texto "Hola NombreDelUsuario" por "Nivel de conexion al XX%"
+ p La propuesta que esperábamos de UX debía incluir nombre y nivel de conexión. Esperamos nueva propuesta corregida donde aparezca tanto el nombre como el % de conexión
+ p Test de aceptación
+ ul
+ li Entro en la aplicación
+ li Compruebo que el indicador crece
+ 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
+ h1
+ span Open
+ span.us-detail-status In progress
+ div.us-detail-progress-bar
+ div.current-progress
+ span.tasks-completed 6/7 tasks completed
+ ul.points-per-role
+ li.total
+ span.points 10
+ span.role total
+ - for(var x=0; x<5; x++)
+ li.total
+ span.points 10
+ span.role UX
+ section.us-detail-assigned-to
+ div.user-avatar
+ a.avatar(href="", title="Assigned to")
+ img(src="http://thecodeplayer.com/u/uifaces/18.jpg", alt="username")
+ div.assigned-to
+ span.assigned-title Assigned to
+ span.user-assigned Anler Hernández
+ section.watchers
+ div.watchers-header
+ span.title watchers
+ a.icon.icon-plus(href="", title="Add watcher")
+ div.watchers-content
+ - for(var y=0; y<5; y++)
+ div.watcher-single
+ div.watcher-avatar
+ a.avatar(href="", title="Assigned to")
+ img(src="http://thecodeplayer.com/u/uifaces/32.jpg", alt="username")
+ a.watcher-name(href="", title="Jesús Espino") Jesús Espino
+ section.us-settings
+ a.button.button-gray(href="", title="Client requirement") Client requirement
+ a.button.button-gray(href="", title="Team requirement") Team requirement
+ a.button.button-red(href="", title="Block") Block
diff --git a/app/partials/views/modules/activity.jade b/app/partials/views/modules/activity.jade
new file mode 100644
index 00000000..e60d3cda
--- /dev/null
+++ b/app/partials/views/modules/activity.jade
@@ -0,0 +1,24 @@
+div.us-activity
+ - 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/attachments.jade b/app/partials/views/modules/attachments.jade
new file mode 100644
index 00000000..4dac8daa
--- /dev/null
+++ b/app/partials/views/modules/attachments.jade
@@ -0,0 +1,22 @@
+section.attachments
+ div.attachments-header
+ h3.attachments-title
+ span.icon.icon-attachment
+ span.attachments-num 5
+ span.attachments-text attachments
+ a.button.button-gray(href="", title="Add new attachment")
+ span +new file
+ div.attachment-body
+ - for(var x = 0; x < 3; x++)
+ div.single-attachment
+ div.attachment-name
+ span.icon.icon-document
+ a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefildeusuariopefildeusuario.png
+ div.attachment-comment
+ span Comentario sobre el contenido
+ span.attachment-size (125kb.)
+ a.settings.icon.icon-edit(href="","Edit")
+ a.settings.icon.icon-drag-v(href="","Drag")
+ a.more-attachments(href="", title="show atachments history")
+ span + show atachments history
+ span.more-attachments-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
new file mode 100644
index 00000000..787e945a
--- /dev/null
+++ b/app/partials/views/modules/comments.jade
@@ -0,0 +1,21 @@
+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
+ //- 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/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/components/buttons.scss b/app/styles/components/buttons.scss
index 438a0d89..acc18fa6 100755
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -11,28 +11,23 @@
}
}
-%button {
+%button,
+.button {
@extend %large;
+ @include transition (background .3s linear);
display: inline-block;
font-family: 'ostrichSans';
padding: 8px 40px;
- .icon {
- margin-right: .3rem;
+ &:hover {
+ @include transition (background .3s linear);
}
-}
-
-.button-green,
-.button-gray,
-.button-red {
- @extend %button;
- @include transition (background .3s linear);
span {
color: $white;
position: relative;
top: 2px;
}
- &:hover {
- @include transition (background .3s linear);
+ .icon {
+ margin-right: .3rem;
}
}
@@ -59,6 +54,15 @@
}
}
+a.button-block {
+ background: $white;
+ color: $red;
+ &:hover {
+ background: $red-light;
+ color: $white;
+ }
+}
+
.button-bulk {
@extend %button;
background: $green-taiga;
diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss
index be90c214..97c623ee 100644
--- a/app/styles/dependencies/mixins.scss
+++ b/app/styles/dependencies/mixins.scss
@@ -10,13 +10,13 @@
}
// Table Flex - http://devbryce.com/site/flexbox/
-@mixin table-flex() {
- align-content: stretch;
- align-items: stretch;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
+@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
+ align-content: $align-content;
+ align-items: $align-items;
+ display: $display;
+ flex-direction: $flex-direction;
+ flex-wrap: $flex-wrap;
+ justify-content: $justify-content;
}
@mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {
@@ -32,3 +32,11 @@
@mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) {
box-shadow: $h-shadow $v-shadow $blur $spread $color;
}
+
+@mixin clearfix {
+ &:after {
+ clear: both;
+ content: '';
+ display: table;
+ }
+}
diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss
index c192ce4a..75a28d83 100755
--- a/app/styles/dependencies/typography.scss
+++ b/app/styles/dependencies/typography.scss
@@ -115,83 +115,89 @@ a:visited {
}
.icon-backlog:before {
- content: 'a';
+ content: 'a';
}
.icon-issues:before {
- content: 'b';
+ content: 'b';
}
.icon-kanban:before {
- content: 'c';
+ content: 'c';
}
.icon-search:before {
- content: 'd';
+ content: 'd';
}
.icon-video:before {
- content: 'e';
+ content: 'e';
}
.icon-wiki:before {
- content: 'f';
+ content: 'f';
}
.icon-settings:before {
- content: 'g';
+ content: 'g';
}
.icon-move:before {
- content: 'i';
+ content: 'i';
}
.icon-filter:before {
- content: 'j';
+ content: 'j';
}
.icon-tag:before {
- content: 'k';
+ content: 'k';
}
.icon-bulk:before {
- content: 'l';
+ content: 'l';
}
.icon-arrow-up:before {
- content: 'h';
+ content: 'h';
}
.icon-arrow-right:before {
- content: 'm';
+ content: 'm';
}
.icon-arrow-left:before {
- content: 'n';
+ content: 'n';
}
.icon-arrow-bottom:before {
- content: 'o';
+ content: 'o';
}
.icon-edit:before {
- content: 'p';
+ content: 'p';
}
.icon-delete:before {
- content: 'q';
+ content: 'q';
}
.icon-iocaine:before {
- content: 'r';
+ content: 'r';
}
.icon-drag-h:before {
- content: 's';
+ content: 's';
}
.icon-drag-v:before {
- content: 't';
+ content: 't';
}
.icon-fontawesome-webfont:before {
- content: 'u';
+ content: 'u';
}
-.icon-fontawesome-webfont-1:before {
- content: 'v';
+.icon-document:before {
+ content: 'v';
}
.icon-clipboard-notes:before {
- content: 'w';
+ content: 'w';
}
.icon-male:before {
- content: 'x';
+ content: 'x';
}
.icon-plus:before {
- content: 'y';
+ content: 'y';
}
.icon-attachment:before {
- content: 'A';
+ content: 'A';
}
.icon-reload:before {
- content: 'z';
+ content: 'z';
+}
+.icon-graph:before {
+ content: 'B';
+}
+.icon-warning:before {
+ content: 'C';
}
diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss
index 2d978414..7e57d691 100644
--- a/app/styles/layout/base.scss
+++ b/app/styles/layout/base.scss
@@ -59,4 +59,4 @@ body {
.hidden {
display: none;
-}
\ No newline at end of file
+}
diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss
new file mode 100644
index 00000000..3d49229f
--- /dev/null
+++ b/app/styles/layout/us-detail.scss
@@ -0,0 +1,246 @@
+.us-detail-header {
+ position: relative;
+ .button {
+ color: $white;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+}
+
+.us-story-main-data {
+ margin-bottom: 2rem;
+ .us-title {
+ @extend %xlarge;
+ background: $whitish;
+ font-family: 'DroidSans';
+ padding: 2rem 1rem;
+ .us-number {
+ color: $gray-light;
+ margin-right: .5rem;
+ }
+ .us-name {
+ color: $grayer;
+ }
+ }
+ .blocked-warning {
+ background: $red;
+ color: $white;
+ margin-bottom: 1rem;
+ padding: 1rem;
+ position: relative;
+ .icon {
+ @extend %xxlarge;
+ display: inline;
+ left: 1rem;
+ position: absolute;
+ top: 1rem;
+ }
+ .blocked {
+ @extend %xlarge;
+ margin-bottom: .3em;
+ }
+ p {
+ margin-bottom: 0;
+ margin-left: 4rem;
+ margin-right: 10rem;
+ }
+ .button-block {
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+ }
+ }
+}
+
+.us-content {
+ ul {
+ margin-left: 1rem;
+ }
+ li {
+ list-style-type: disc;
+ }
+ a {
+ color: $green-taiga;
+ }
+}
+
+.user-story-tags {
+ input {
+ display: inline-block;
+ 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;
+}
+
+.us-detail-status {
+ @extend %large;
+ color: $green-taiga;
+ vertical-align: middle;
+}
+
+.us-detail-progress-bar {
+ background: $grayer;
+ height: 26px;
+ margin-bottom: 1rem;
+ position: relative;
+ .current-progress {
+ background: $fresh-taiga;
+ height: 26px;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 60%;
+ }
+ .tasks-completed {
+ @extend %small;
+ color: $white;
+ left: 10px;
+ position: absolute;
+ top: 2px;
+ }
+}
+
+.points-per-role {
+ li {
+ border-right: 1px solid $grayer;
+ display: inline-block;
+ margin: .5rem .1rem;
+ opacity: .3;
+ text-align: center;
+ width: 18%;
+ &:first-child {
+ opacity: 1;
+ }
+ &:nth-child(5n) {
+ border: 0;
+ }
+ }
+ .points {
+ @extend %xlarge;
+ display: block;
+ font-family: 'ostrichSans';
+ text-align: center;
+ }
+ .role {
+ display: inline-block;
+ max-width: 90%;
+ overflow: hidden;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+
+.us-detail-assigned-to {
+ @include table-flex();
+ margin-top: 2rem;
+ .user-avatar {
+ @include table-flex-child(1, 0);
+ }
+ .assigned-to {
+ @include table-flex-child(3, 0);
+ margin-left: 1rem;
+ margin-top: 15px;
+ .assigned-title {
+ color: $gray-light;
+ display: block;
+ }
+ .user-assigned {
+ @extend %large;
+ color: $green-taiga;
+ }
+ }
+}
+
+.watchers {
+ margin-top: 2rem;
+ .watchers-header {
+ border-bottom: 2px solid $gray-light;
+ padding: .5rem;
+ position: relative;
+ .title {
+ @extend %large;
+ font-family: 'ostrichSans';
+ }
+ .icon {
+ @extend %large;
+ position: absolute;
+ right: 1rem;
+ top: 4px;
+ }
+ }
+ .watcher-single {
+ @include table-flex(center, center, flex, row, wrap, center);
+ border-bottom: 1px solid $gray-light;
+ padding: .5rem;
+ vertical-align: middle;
+ &:last-child {
+ border: 0;
+ }
+ .watcher-avatar {
+ @include table-flex-child(1, 0);
+ }
+ .watcher-name {
+ @include table-flex-child(8, 0);
+ @extend %large;
+ color: $grayer;
+ margin-left: 1rem;
+ }
+ }
+}
+
+.us-settings {
+ margin-top: 2rem;
+ .button {
+ color: $white;
+ display: block;
+ margin-bottom: .5rem;
+ text-align: center;
+ width: 100%;
+ }
+ .button-gray {
+ background: $gray-light;
+ &:hover,
+ &.active {
+ background: $grayer;
+ }
+ }
+ .button-red {
+ &:hover,
+ &.active {
+ background: $red;
+ }
+ }
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 84c340b4..3bbfc4e7 100755
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -46,6 +46,10 @@ $prefix-for-spec: true;
@import 'modules/admin-membership-table';
@import 'modules/category-config';
@import 'modules/project-details';
+@import 'modules/attachments';
+@import 'modules/comments';
+@import 'modules/comment-activity';
+@import 'modules/activity';
// Responsive
@import 'responsive/mobile';
@@ -55,5 +59,6 @@ $prefix-for-spec: true;
@import 'layout/base';
@import 'layout/backlog';
@import 'layout/taskboard';
+@import 'layout/us-detail';
@import 'layout/admin-membership';
@import 'layout/kanban';
diff --git a/app/styles/modules/activity.scss b/app/styles/modules/activity.scss
new file mode 100644
index 00000000..62674b1f
--- /dev/null
+++ b/app/styles/modules/activity.scss
@@ -0,0 +1,93 @@
+.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;
+ }
+}
+
+.activity-single {
+ @include table-flex;
+ border-bottom: 2px solid $gray-light;
+ padding: 2rem 0;
+ position: relative;
+ &: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;
+ color: $green-taiga;
+ margin-bottom: 1rem;
+ }
+ .activity-content {
+ @include table-flex-child(20, 150px, 0);
+ }
+ .us-activity {
+ background: $whitish;
+ .activity-inner {
+ display: none;
+ }
+ }
+ .date {
+ @extend %small;
+ 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/attachments.scss b/app/styles/modules/attachments.scss
new file mode 100644
index 00000000..cb4e44b6
--- /dev/null
+++ b/app/styles/modules/attachments.scss
@@ -0,0 +1,81 @@
+.attachments {
+ margin-bottom: 2rem;
+}
+
+.attachments-header {
+ background: $whitish;
+ @include clearfix;
+ padding: .5rem 1rem;
+ .button {
+ float: right;
+ padding: .2rem 6rem;
+ }
+ .icon,
+ .attachments-num,
+ .attachments-text {
+ @extend %medium;
+ margin-right: .5rem;
+ position: relative;
+ top: 2px;
+ }
+}
+
+.single-attachment {
+ @include table-flex();
+ @extend %small;
+ border-bottom: 1px solid #cdcdcd;
+ padding: 1rem 0 1rem 1rem;
+ position: relative;
+ &:last-child {
+ border: 0;
+ }
+ .attachment-name {
+ @include ellipsis(200px);
+ @include table-flex-child(1, 200px);
+ padding-right: 1rem;
+ .icon {
+ margin-right: .5rem;
+ }
+ }
+ .attachment-comment {
+ @include table-flex-child(10, 300px);
+ .attachment-size {
+ color: $gray-light;
+ margin-left: .5rem;
+ }
+ }
+ .settings {
+ @extend %large;
+ color: $gray-light;
+ display: none;
+ }
+ &:hover {
+ @include transition (background .2s ease-in);
+ background: lighten($green-taiga, 60%);
+ .settings {
+ @include transition (opacity .2s ease-in);
+ display: block;
+ position: absolute;
+ top: 1rem;
+ }
+ .icon-edit {
+ right: 4rem;
+ }
+ .icon-drag-v {
+ cursor: move;
+ right: 1rem;
+ }
+ }
+}
+
+.more-attachments {
+ @extend %small;
+ border-bottom: 1px solid $gray-light;
+ color: $gray-light;
+ display: block;
+ padding: 1rem 0 1rem 1rem;
+ .more-attachments-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
new file mode 100644
index 00000000..059509ca
--- /dev/null
+++ b/app/styles/modules/comments.scss
@@ -0,0 +1,84 @@
+.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;
+ position: relative;
+ &:hover {
+ .delete-comment {
+ opacity: 1;
+ @include transition(opacity .2s linear);
+ }
+ }
+ &:first-child {
+ margin-top: 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;
+ }
+ .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;
+ }
+}
diff --git a/app/styles/modules/lightbox.scss b/app/styles/modules/lightbox.scss
index 1a28c714..60e79ce6 100644
--- a/app/styles/modules/lightbox.scss
+++ b/app/styles/modules/lightbox.scss
@@ -104,10 +104,10 @@
color: $white;
}
&.selected {
- @include transition(all .2s ease-in);
- background: $green-taiga;
- border: 1px solid $green-taiga;
- color: $white;
+ @include transition(all .2s ease-in);
+ background: $green-taiga;
+ border: 1px solid $green-taiga;
+ color: $white;
}
}
.blocked {
diff --git a/app/us-detail.jade b/app/us-detail.jade
deleted file mode 100644
index 62b6aaa6..00000000
--- a/app/us-detail.jade
+++ /dev/null
@@ -1,31 +0,0 @@
-extends layout
-
-block head
- title Taiga Project management web application with scrum in mind!
-
-block content
- div.main.us-detail
- header
- h1
- span ProjectName
- span.green User Story
- a.button.button-green(href="", title="Edit") Edit
- section.us-story-main-data
- h2.us-title
- span.us-number 125
- span-us-name Tagear contenido dentro de las catas privadas
- div.user-story-tags
- - for(var y = 0; y < 6; y++)
- include views/components/tag
- input(type="text", placeholder="Add Tag")
- div.us-description
- p Hay que cambiar el texto "Hola NombreDelUsuario" por "Nivel de conexion al XX%"
- p La propuesta que esperábamos de UX debía incluir nombre y nivel de conexión. Esperamos nueva propuesta corregida donde aparezca tanto el nombre como el % de conexión
- p Test de aceptación
- ul
- li Entro en la aplicación
- li Compruebo que el indicador crece
- p Prototipos
share.axure.com/lalala
- p Prototipos
share.axure.com/lalala
- include views/modules/attachments
- sidebar.menu-secondary.sidebar
diff --git a/app/views/modules/attachments.jade b/app/views/modules/attachments.jade
deleted file mode 100644
index d9dbaae8..00000000
--- a/app/views/modules/attachments.jade
+++ /dev/null
@@ -1,9 +0,0 @@
-section.attachments
- div.attachments-header
- div.attachments-inner
- h3.attachments-title
- span.icon.icon-attachment
- span.attachments-num {{5}}
- span.attachemnts-text attachments
- a(href="", title="Add new attachment")
- span.icon.icon-plus