diff --git a/app/styles/layout/backlog.scss b/app/styles/layout/backlog.scss index 3f6ac9e8..1655c727 100644 --- a/app/styles/layout/backlog.scss +++ b/app/styles/layout/backlog.scss @@ -1,3 +1,9 @@ +.backlog { + .new-us { + float: right; + } +} + .backlog-menu { @include clearfix; background: $whitish; @@ -10,7 +16,3 @@ padding: 4px 0; } } - -.new-us { - float: right; -} diff --git a/app/styles/layout/taskboard.scss b/app/styles/layout/taskboard.scss new file mode 100644 index 00000000..e8f26f98 --- /dev/null +++ b/app/styles/layout/taskboard.scss @@ -0,0 +1,5 @@ +.taskboard { + .burndown-container { + display: none; + } +} diff --git a/app/styles/main.scss b/app/styles/main.scss index b44b6d20..ee2b8b27 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -27,6 +27,7 @@ $prefix-for-spec: true; //Layout @import 'layout/base'; @import 'layout/backlog'; +@import 'layout/taskboard'; //Modules @import 'modules/nav'; @@ -36,6 +37,7 @@ $prefix-for-spec: true; @import 'modules/backlog-table'; @import 'modules/filters'; @import 'modules/lightbox'; +@import 'modules/taskboard-table'; // Responsive @import 'responsive/mobile'; diff --git a/app/styles/modules/sprints.scss b/app/styles/modules/sprints.scss index bda7ae12..bb66fa71 100644 --- a/app/styles/modules/sprints.scss +++ b/app/styles/modules/sprints.scss @@ -138,7 +138,7 @@ .icon { @include transform(rotate(180deg)); &:hover { - @include transform(rotate(0deg)); + @include transform(rotate(0)); @include transition (all .2s ease-in); } } @@ -154,7 +154,7 @@ .icon { @include transform(rotate(180deg)); &:hover { - @include transform(rotate(0deg)); + @include transform(rotate(0)); @include transition (all .2s ease-in); } } diff --git a/app/styles/modules/taskboard-table.scss b/app/styles/modules/taskboard-table.scss new file mode 100644 index 00000000..4c5c85b6 --- /dev/null +++ b/app/styles/modules/taskboard-table.scss @@ -0,0 +1,100 @@ +%table-flex { + align-content: stretch; + align-items: stretch; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; +} + +%table-flex-child { + flex-basis: 300px; + flex-grow: 1; + flex-shrink: 0; + width: 300px; +} + +.taskboard-table { + overflow: hidden; + width: 100%; +} + +.taskboard-table-header { + margin-bottom: .5rem; + width: 100%; + .taskboard-table-inner { + @extend %table-flex; + overflow: hidden; + width: 3500px; //Just and example, should be JS calc + } + .task-colum_name { + @extend %table-flex-child; + @extend %large; + background: $whitish; + margin: 0 .3rem; + padding: .5rem 0; + text-align: center; + } +} + +.taskboard-table-body { + height: 700px; + overflow-x: scroll; + overflow-y: scroll; + width: 100%; + .taskboard-table-inner { + @extend %table-flex; + overflow: hidden; + width: 3500px; //Just and example, should be JS calc + } + .task-column { + @extend %table-flex-child; + } + .task-row { + height: 30rem; + margin: 0 .3rem 1rem; + margin-bottom: 1rem; + padding: 1rem; + } + .taskboard_task-playground { + .task-row { + background: $whitish; + } + } +} + +.taskboard_task-list { + .tag-list { + display: none; + margin-bottom: 1rem; + } + .task-title { + @extend %large; + font-family: 'DroidSans'; + margin-bottom: 1rem; + } + .task-num { + color: $gray; + margin-right: .5rem; + } + .task-status { + color: $green-taiga; + margin-bottom: .5rem; + } + .task-list { + span { + color: $gray; + margin-left: .5rem; + } + } + .task-row { + position: relative; + } + .new-us { + bottom: 2rem; + position: absolute; + } + .button-green { + padding: 7px 80px; + } +} diff --git a/app/taskboard.jade b/app/taskboard.jade index 473280d7..0585eaf2 100644 --- a/app/taskboard.jade +++ b/app/taskboard.jade @@ -4,9 +4,11 @@ block head title Taiga Project management web application with scrum in mind! block content - section.main.usstory + section.main.taskboard h1 span ProjectName span.green Sprint Name span.date 02/10/2014-15/10/2014 include views/components/large-summary + include views/modules/burndown + include views/modules/taskboard-table diff --git a/app/usstory-detail.jade b/app/usstory-detail.jade deleted file mode 100644 index 5cf3296e..00000000 --- a/app/usstory-detail.jade +++ /dev/null @@ -1,12 +0,0 @@ -extends layout - -block head - title Taiga Project management web application with scrum in mind! - -block content - section.main.usstory - include views/components/mainTitle - - sidebar.menu-secondary.sidebar - - diff --git a/app/views/modules/taskboard-table.jade b/app/views/modules/taskboard-table.jade new file mode 100644 index 00000000..c0063d98 --- /dev/null +++ b/app/views/modules/taskboard-table.jade @@ -0,0 +1,32 @@ +div.taskboard-table + div.taskboard-table-header + div.taskboard-table-inner + - for(var z = 0; z < 11; z++) + h2.task-colum_name user stories + div.taskboard-table-body + div.taskboard-table-inner + div.taskboard_task-list.task-column + - for(var x = 0; x < 3; x++) + div.task-row + div.tag-list + - for(var y = 0; y < 5; y++) + include ../components/tag + h3.task-title + span.task-num 125 + span Invitacion de los usuarios a la plataforma + ul.task-list + li.task-status Open + li UX + span 4.5 + li DiseƱo + span 4.5 + li Front + span 4.5 + li Back + span 4.5 + include ../components/addnewus + - for(var z = 0; z < 10; z++) + div.taskboard_task-playground.task-column + - for(var x = 0; x < 3; x++) + div.task-row + //- Include tasks