Merge branch 'us-detail'
Xavier Julián
commit
2f0c2343f0
Binary file not shown.
|
|
@ -34,4 +34,6 @@
|
|||
<glyph unicode="y" d="M432 309l-123 0 0 123c0 5-5 10-10 10l-86 0c-5 0-10-5-10-10l0-123-123 0c-5 0-10-5-10-10l0-86c0-3 1-5 3-7 2-2 4-3 7-3l123 0 0-123c0-3 1-5 3-7 2-2 4-3 7-3l86 0c3 0 5 1 7 3 2 2 3 4 3 7l0 123 123 0c3 0 5 1 7 3 2 2 3 4 3 7l0 86c0 5-5 10-10 10z"/>
|
||||
<glyph unicode="A" d="M208 1c-47 0-91 19-124 52-34 33-52 77-52 124 0 47 18 91 52 125l178 174c48 48 132 48 180 0 50-50 50-131 0-181l-160-157c-31-30-81-31-113 1-31 31-31 82 0 113l62 62 46-45-62-62c-4-5-5-9-5-12 0-2 1-7 5-11 8-8 14-8 22 0l160 156c25 25 25 66 0 91-24 24-66 24-90 0l-178-175c-21-21-33-49-33-79 0-30 12-58 33-79 42-42 116-42 158 0l80 80 45-45-80-80c-33-33-77-52-124-52z"/>
|
||||
<glyph unicode="z" d="M468 210c0-1 0-1 0-2-12-51-38-92-77-124-38-32-84-47-136-47-28 0-55 5-81 15-26 11-49 26-69 45l-37-37c-4-3-8-5-13-5-5 0-9 2-13 5-4 4-5 8-5 13l0 128c0 5 1 9 5 13 4 4 8 5 13 5l128 0c5 0 9-1 13-5 3-4 5-8 5-13 0-5-2-9-5-13l-39-39c13-12 28-22 46-29 17-7 35-10 53-10 26 0 49 6 71 18 23 13 40 30 54 51 2 4 7 15 15 34 1 4 4 6 8 6l55 0c3 0 5 0 7-2 1-2 2-4 2-7z m7 229l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-5 0-9 1-13 5-3 4-5 8-5 13 0 5 2 9 5 13l40 39c-28 26-62 39-100 39-26 0-49-6-71-18-23-13-40-30-54-51-2-4-7-15-15-34-1-4-4-6-8-6l-57 0c-3 0-5 0-7 2-1 2-2 4-2 7l0 2c12 51 38 92 77 124 39 32 85 47 137 47 28 0 55-5 81-15 26-11 50-26 70-45l37 37c4 3 8 5 13 5 5 0 9-2 13-5 4-4 5-8 5-13z"/>
|
||||
<glyph unicode="B" d="M236 204l-73 0c-4 0-7-4-7-8l0-112c0-4 3-8 7-8l73 0c4 0 8 4 8 8l0 112c0 5-4 8-8 8z m113 232l-73 0c-4 0-8-4-8-8l0-344c0-4 4-8 8-8l73 0c4 0 7 4 7 8l0 344c0 4-3 8-7 8z m113-105l-72 0c-5 0-8-3-8-7l0-240c0-4 3-8 8-8l72 0c4 0 8 4 8 8l0 240c0 4-4 7-8 7z m-340 0l-72 0c-4 0-8-3-8-7l0-240c0-4 4-8 8-8l72 0c5 0 8 4 8 8l0 240c0 4-3 7-8 7z"/>
|
||||
<glyph unicode="C" d="M256 475c40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110 0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29z m37-356l0 54c0 3-1 5-3 7-2 2-4 3-6 3l-55 0c-3 0-5-1-7-3-2-2-3-4-3-7l0-54c0-2 1-5 3-6 2-2 4-3 7-3l55 0c2 0 4 1 6 2 2 2 3 4 3 7z m-1 98l5 178c0 2-1 4-3 5-2 2-4 2-7 2l-62 0c-3 0-5 0-7-2-2-1-3-3-3-5l5-178c0-1 1-3 3-5 1-1 4-2 6-2l53 0c3 0 5 1 7 2 2 2 3 4 3 5z"/>
|
||||
</font></defs></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -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 <strong>Test de aceptación</strong>
|
||||
ul
|
||||
li Entro en la aplicación
|
||||
li Compruebo que el indicador crece
|
||||
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
|
||||
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
|
||||
|
|
@ -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 <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
|
||||
a.more-activity(href="", title="show more comments")
|
||||
span show previous activity
|
||||
span.prev-activity-num (3 more)
|
||||
|
|
@ -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)
|
||||
|
|
@ -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,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)
|
||||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,4 +59,4 @@ body {
|
|||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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,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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 <strong>Test de aceptación</strong>
|
||||
ul
|
||||
li Entro en la aplicación
|
||||
li Compruebo que el indicador crece
|
||||
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
|
||||
sidebar.menu-secondary.sidebar
|
||||
|
|
@ -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
|
||||
Loading…
Reference in New Issue