diff --git a/app/backlog.jade b/app/backlog.jade index 5b0b1a71..63eb7264 100644 --- a/app/backlog.jade +++ b/app/backlog.jade @@ -21,10 +21,4 @@ block content include views/components/addnewus include views/modules/backlog-table sidebar.menu-secondary.sidebar - header - h2 Sprints - body - ul - li Text1 - li text2 - li test2 + include views/modules/sprints diff --git a/app/fonts/taiga.eot b/app/fonts/taiga.eot index 70b0097c..e9a8445f 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 fa76156c..567e0833 100644 --- a/app/fonts/taiga.svg +++ b/app/fonts/taiga.svg @@ -18,4 +18,8 @@ + + + + diff --git a/app/fonts/taiga.ttf b/app/fonts/taiga.ttf index 9954af74..61b06ce1 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 ef70dfc3..ae234b32 100644 Binary files a/app/fonts/taiga.woff and b/app/fonts/taiga.woff differ diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss new file mode 100644 index 00000000..b79d3a7e --- /dev/null +++ b/app/styles/dependencies/mixins.scss @@ -0,0 +1,6 @@ +@mixin ellipsis($width: 100px) { + max-width: $width; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index dbe6de08..d03e092b 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -21,12 +21,12 @@ h1, h2, h3, h4, h5, h6 { } /*__Font Sizes__*/ +.xsmall {font-size: .5rem;} .small {font-size: .8rem;} .medium {font-size: 1rem;} .large {font-size: 1.2rem;} .xlarge {font-size: 2rem;} .xxlarge {font-size: 3rem;} -.xxxlarge {font-size: 3rem;} h1 { @extend .xxlarge; @@ -123,3 +123,15 @@ a, a:visited { .icon-bulk:before { content: "l"; } +.icon-arrow-up:before { + content: "h"; +} +.icon-arrow-right:before { + content: "m"; +} +.icon-arrow-left:before { + content: "n"; +} +.icon-arrow-bottom:before { + content: "o"; +} diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss index 30742ff6..5d7a3edd 100644 --- a/app/styles/layout/base.scss +++ b/app/styles/layout/base.scss @@ -21,7 +21,6 @@ body { justify-content: flex-start; align-content: stretch; align-items: stretch; - height: 100%; } .menu-secondary { diff --git a/app/styles/main.scss b/app/styles/main.scss index e9cf5279..115608d8 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -15,6 +15,7 @@ $prefix-for-spec: true; @import 'dependencies/colors'; @import 'dependencies/typography'; @import 'dependencies/elements'; +@import 'dependencies/mixins'; //Components @import 'components/buttons'; @@ -29,6 +30,7 @@ $prefix-for-spec: true; //Modules @import 'modules/nav'; @import 'modules/sidebar'; +@import 'modules/sprints'; @import 'modules/burndown'; @import 'modules/backlog-table'; diff --git a/app/styles/modules/sprints.scss b/app/styles/modules/sprints.scss new file mode 100644 index 00000000..353dc803 --- /dev/null +++ b/app/styles/modules/sprints.scss @@ -0,0 +1,121 @@ +.sprints{ + .summary{ + background: $grayLight; + @include clearfix; + ul { + width: 40%; + } + li { + color: $grayer; + } + } + .new-sprint { + float: right; + } + .sprint-name { + font-family: 'ostrichSans'; + margin-right: 3px; + @extend .large; + max-width: 100px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + display: inline-block; + } + .sprint-date { + font-family: 'ostrichSans'; + color: $grayLight; + @extend .large; + } + .sprint { + .sprint-summary { + width: 65%; + display: inline-block; + } + ul { + float: right; + width: 32%; + .number { + @extend .large; + } + .description { + @extend .xsmall; + line-height: .6rem; + margin-top: 5px; + } + } + li { + display: inline-block; + &:first-child { + margin-right: 3px; + } + } + } + .sprint-progress-bar{ + height: 8px; + margin-bottom: 0; + background: $grayLight; + width: 100%; + position: relative; + border-radius: 2px; + margin-top: .5rem; + .current-progress { + position: absolute; + top: 0; + left: 0; + width: calc(30% - 4px); + background: $greenTaiga; + height: 8px; + border-radius: 2px; + } + } + .sprint-table { + display:flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-content: stretch; + align-items: center; + width: 100%; + .row { + display:flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; + width: 100%; + text-align: left; + padding: .5em 0; + border-bottom: 1px solid $grayLight; + @for $i from 1 through 8 { + .width-#{$i} { + flex-grow: $i; + flex-shrink: 0; + flex-basis: 50px; + } + } + &:hover { + background: lighten($grayLight, 10%); + @include transition (background .2s ease-in); + cursor: move; + } + &:last-child { + border-bottom: none; + } + } + .column-us { + @extend .small; + padding: 0 4px; + span { + @include ellipsis(250px); + display: block; + } + } + .column-points { + text-align: right; + padding: 0 4px; + } + } +} diff --git a/app/views/modules/sprints.jade b/app/views/modules/sprints.jade new file mode 100644 index 00000000..335dd164 --- /dev/null +++ b/app/views/modules/sprints.jade @@ -0,0 +1,33 @@ +section.sprints + header + h1 SPRINTS + div.summary + ul + li + span.number 12 + span.description project
points + div.new-sprint + a.button-green(href="", title="Add New US") + span.text + New sprint + + section.sprint.sprint-current + header + div.sprint-summary + a.icon.icon-arrow-up(href="", title="compact Sprint") + span.sprint-name current sprint + span.sprint-date 04/06/14-20/06/14 + ul + li + span.number 12 + span.description closed
points + li + span.number 24 + span.description total
points + div.sprint-progress-bar + div.current-progress + div.sprint-table + - for (var x = 0; x < 10; x++) + div.row + div.column-us.width-8 + span #125 Crear el perfil de usuario Senior en el admin + div.column-points.width-1 45