From 5961d4c11086fdd2825d0092abbc97cd5cc0b787 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Mon, 9 Jun 2014 19:22:17 +0200 Subject: [PATCH 1/3] f**ck infernal taskboard table --- app/styles/layout/taskboard.scss | 5 + app/styles/main.scss | 2 + app/styles/modules/taskboard-table.scss | 265 ++++++++++++++++++++++++ app/taskboard.jade | 4 +- app/views/modules/taskboard-table.jade | 31 +++ 5 files changed, 306 insertions(+), 1 deletion(-) create mode 100644 app/styles/layout/taskboard.scss create mode 100644 app/styles/modules/taskboard-table.scss create mode 100644 app/views/modules/taskboard-table.jade 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 ba897377..9dae6962 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -29,6 +29,7 @@ $prefix-for-spec: true; //Layout @import 'layout/base'; @import 'layout/backlog'; +@import 'layout/taskboard'; //Modules @import 'modules/nav'; @@ -38,6 +39,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/taskboard-table.scss b/app/styles/modules/taskboard-table.scss new file mode 100644 index 00000000..fe074723 --- /dev/null +++ b/app/styles/modules/taskboard-table.scss @@ -0,0 +1,265 @@ +%table-flex { + display:flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; +} + +%table-flex-child { + flex-grow: 1; + flex-shrink: 0; + flex-basis: 300px; + width: 300px; +} + +.taskboard-table { + width:100%; + overflow: hidden; +} + +.taskboard-table-header{ + width:100%; + margin-bottom: .5rem; + .taskboard-table-inner { + overflow: hidden; + @extend %table-flex; + width:3500px; + } + .task-colum_name{ + @extend %table-flex-child; + background: $whitish; + padding: .5rem 0; + text-align: center; + @extend .large; + margin: 0 .3rem; + } +} + +.taskboard-table-body { + width:100%; + height: 700px; + overflow-y: scroll; + overflow-x: scroll; + .taskboard-table-inner { + overflow: hidden; + @extend %table-flex; + width:3500px; + } + .task-column { + @extend %table-flex-child; + } + .task-row { + height: 30rem; + margin-bottom: 1rem; + padding: 1rem; + margin: 0 .3rem 1rem .3rem; + } + .taskboard_task-playground { + .task-row { + background: $whitish; + } + } +} + +.taskboard_task-list { + .tag-list { + margin-bottom: 1rem; + display: none; + } + .task-title { + font-family: 'DroidSans'; + @extend .large; + margin-bottom: 1rem; + } + .task-num{ + color: $gray; + margin-right: .5rem; + } + .task-status { + color: $greenTaiga; + margin-bottom: .5rem; + } + .task-list { + span { + margin-left: .5rem; + color: $gray; + } + } +} + +/* +.taskboard-table { + width:100%; + overflow: hidden; +} + +.taskboard-table-header{ + width:100%; + .taskboard-table-inner { + overflow: hidden; + @extend %table-flex; + width:3500px; + } + .task-colum_name{ + @extend %table-flex-child; + background: $whitish; + padding: .5rem 0; + text-align: center; + @extend .large; + margin: 0 .3rem; + } +} + +.taskboard-table-body { + width:100%; + .taskboard-table-inner { + overflow: hidden; + @extend %table-flex; + width:3500px; + } +} + +.task-row { + height: 30rem; + margin-bottom: 1rem; + padding: 1rem; +} + +.taskboard_task-list { + @extend %table-flex-child; + .tag-list { + margin-bottom: 1rem; + display: none; + } + .task-title { + font-family: 'DroidSans'; + @extend .large; + margin-bottom: 1rem; + } + .task-num{ + color: $gray; + margin-right: .5rem; + } + .task-status { + color: $greenTaiga; + margin-bottom: .5rem; + } + .task-list { + span { + margin-left: .5rem; + color: $gray; + } + } +} + +.taskboard_task-status { + flex-grow: 10; + flex-shrink: 0; + flex-basis: 300px; + padding: 0 .3rem; + .task-row { + background: $whitish; + } +} + + +/* .taskboard-table { + width:100%; + .tag { + width: 30%; + } +} + +.taskboard_task-list { + flex-grow: 1; + flex-shrink: 0; + flex-basis: 300px; + padding: 0 .3rem; + width: 300px; + .tag-list { + margin-bottom: 1rem; + display: none; + } + .task-title { + font-family: 'DroidSans'; + @extend .large; + margin-bottom: 1rem; + } + .task-num{ + color: $gray; + margin-right: .5rem; + } + .task-status { + color: $greenTaiga; + margin-bottom: .5rem; + } + .task-list { + span { + margin-left: .5rem; + color: $gray; + } + } +} + +.taskboard_task-status { + flex-grow: 20; + flex-shrink: 0; + flex-basis: 300px; + padding: 0 .3rem; + .task-row { + background: $whitish; + } +} + +.task-row { + height: 30rem; + margin-bottom: 1rem; + padding: 1rem; +} + +.taskboard-table-inner, +.taskboard-table-header { + display:flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; +} +.taskboard-table-inner { + height: 700px; + overflow-x: scroll; +} + +.taskboard-table-header{ + width:3500px; +} + +.task-colum_name{ + flex-grow: 1; + flex-shrink: 0; + flex-basis: 300px; + width: 300px; + background: $whitish; + padding: .5rem 0; + text-align: center; + @extend .large; +} + +.taskboard-wrapper { + width:3500px; //Just a simple example. It should be calculated by JS + display:flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; + .task-column { + flex-grow: 1; + flex-shrink: 0; + flex-basis: 300px; + padding: 0 .3rem; + } +} */ 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/views/modules/taskboard-table.jade b/app/views/modules/taskboard-table.jade new file mode 100644 index 00000000..804a2c46 --- /dev/null +++ b/app/views/modules/taskboard-table.jade @@ -0,0 +1,31 @@ +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 + - 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 From 3d3587dce60413a3e044ce9d4b3ef1c1f8c44623 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Tue, 10 Jun 2014 08:44:19 +0200 Subject: [PATCH 2/3] us-story-detail file not used --- app/usstory-detail.jade | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 app/usstory-detail.jade 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 - - From 904b358b40f5c8a0ec254a08afcd25708e065202 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Tue, 10 Jun 2014 09:08:23 +0200 Subject: [PATCH 3/3] taskboard add new button points --- app/styles/layout/backlog.scss | 7 +++---- app/styles/modules/taskboard-table.scss | 10 ++++++++++ app/views/modules/taskboard-table.jade | 1 + 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/app/styles/layout/backlog.scss b/app/styles/layout/backlog.scss index 36939ffb..1ec8bac5 100644 --- a/app/styles/layout/backlog.scss +++ b/app/styles/layout/backlog.scss @@ -1,4 +1,7 @@ .backlog { + .new-us { + float: right; + } } .backlog-menu { @@ -13,7 +16,3 @@ display: inline-block; } } - -.new-us { - float: right; -} diff --git a/app/styles/modules/taskboard-table.scss b/app/styles/modules/taskboard-table.scss index fe074723..e9447f84 100644 --- a/app/styles/modules/taskboard-table.scss +++ b/app/styles/modules/taskboard-table.scss @@ -87,6 +87,16 @@ color: $gray; } } + .task-row { + position: relative; + } + .new-us { + position: absolute; + bottom: 2rem; + } + .button-green { + padding: 7px 80px; + } } /* diff --git a/app/views/modules/taskboard-table.jade b/app/views/modules/taskboard-table.jade index 804a2c46..c0063d98 100644 --- a/app/views/modules/taskboard-table.jade +++ b/app/views/modules/taskboard-table.jade @@ -24,6 +24,7 @@ div.taskboard-table 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++)