Current Sprint

app/backlog.jade

@@ -21,10 +21,4 @@ block content
       include views/components/addnewus
     include views/modules/backlog-table
   sidebar.menu-secondary.sidebar
-    header
+    include views/modules/sprints
-      h2 Sprints
-    body
-      ul
-        li Text1
-        li text2
-        li test2

app/fonts/taiga.svg

@@ -18,4 +18,8 @@
 <glyph unicode="&#106;" d="M456 428c3-8 2-15-4-20l-141-141 0-212c0-8-4-14-11-17-3-1-5-1-7-1-6 0-10 1-13 5l-73 73c-4 4-6 8-6 13l0 139-141 141c-6 5-7 12-4 20 4 7 9 11 17 11l366 0c8 0 13-4 17-11z"/>
 <glyph unicode="&#107;" d="M165 384c0 10-4 19-11 26-7 7-16 11-26 11-10 0-19-4-26-11-7-7-11-16-11-26 0-10 4-19 11-26 7-7 16-11 26-11 10 0 19 4 26 11 7 7 11 16 11 26z m304-165c0-10-3-18-10-25l-140-141c-8-7-17-10-26-10-11 0-19 3-26 10l-204 205c-8 7-14 16-19 29-5 12-7 23-7 33l0 119c0 10 3 18 10 26 8 7 16 10 26 10l119 0c10 0 21-2 33-7 13-5 22-11 30-19l204-204c7-7 10-16 10-26z"/>
 <glyph unicode="&#108;" d="M411 167l-182 0 0 0c0 0 0 0 0 0-6 0-11-6-11-12 0 0 0 0 0-1l0-53 0 0c0-6 5-11 11-11l0 0 182 0 0 0c6 0 11 5 11 11l0 53c0 1 0 1 0 1 0 6-5 12-11 12z m-256 0l-54 0c-6 0-11-6-11-12l0-54c0-6 5-11 11-11l54 0c6 0 12 5 12 11l0 54c0 6-6 12-12 12z m256 128l-182 0 0 0c0 0 0 0 0 0-6 0-11-6-11-12 0 0 0 0 0-1l0-53 0 0c0-6 5-11 11-11l0 0 182 0 0 0c6 0 11 5 11 11l0 53c0 1 0 1 0 1 0 6-5 12-11 12z m-256 0l-54 0c-6 0-11-6-11-12l0-54c0-6 5-11 11-11l54 0c6 0 12 5 12 11l0 54c0 6-6 12-12 12z m63 62l0 0c0-6 5-12 11-12l0 0 182 0 0 0c6 0 11 6 11 12l0 53c0 0 0 0 0 1 0 6-5 11-11 11l0 0-182 0 0 0c0 0 0 0 0 0-6 0-11-5-11-11 0-1 0-1 0-1l0-53z m-63 65l-54 0c-6 0-11-5-11-11l0-54c0-6 5-12 11-12l54 0c6 0 12 6 12 12l0 54c0 6-6 11-12 11z"/>
+<glyph unicode="&#104;" d="M399 174c0-3-1-5-3-7l-15-14c-1-2-4-3-6-3-3 0-5 1-7 3l-112 112-112-112c-2-2-4-3-7-3-2 0-5 1-6 3l-15 14c-2 2-3 4-3 7 0 2 1 4 3 6l133 133c2 2 5 3 7 3 2 0 5-1 7-3l133-133c2-2 3-4 3-6z"/>
+<glyph unicode="&#109;" d="M335 238c0-3-1-5-3-7l-133-133c-2-2-5-3-7-3-2 0-5 1-7 3l-14 14c-2 2-3 4-3 7 0 2 1 5 3 6l112 113-112 112c-2 2-3 4-3 7 0 2 1 4 3 6l14 14c2 2 5 3 7 3 2 0 5-1 7-3l133-133c2-2 3-4 3-6z"/>
+<glyph unicode="&#110;" d="M344 357c0-3-1-5-3-7l-112-112 112-113c2-1 3-4 3-6 0-3-1-5-3-7l-14-14c-2-2-5-3-7-3-2 0-5 1-7 3l-133 133c-2 2-3 4-3 7 0 2 1 4 3 6l133 133c2 2 5 3 7 3 2 0 5-1 7-3l14-14c2-2 3-4 3-6z"/>
+<glyph unicode="&#111;" d="M399 302c0-3-1-5-3-7l-133-133c-2-2-5-3-7-3-2 0-5 1-7 3l-133 133c-2 2-3 4-3 7 0 2 1 4 3 6l15 15c1 1 4 2 6 2 3 0 5-1 7-2l112-113 112 113c2 1 4 2 7 2 2 0 5-1 6-2l15-15c2-2 3-4 3-6z"/>
 </font></defs></svg>

app/styles/dependencies/mixins.scss

@@ -0,0 +1,6 @@
+@mixin ellipsis($width: 100px) {
+    max-width: $width;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

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";
+}

app/styles/layout/base.scss

@@ -21,7 +21,6 @@ body {
     justify-content: flex-start;
     align-content: stretch;
     align-items: stretch;
-    height: 100%;
 }
 
 .menu-secondary {

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';
 

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;
+        }
+    }
+}

app/views/modules/sprints.jade

@@ -0,0 +1,33 @@
+section.sprints
+    header
+        h1 SPRINTS
+        div.summary
+            ul
+                li
+                    span.number 12
+                    span.description project<br />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<br />points
+                li
+                    span.number 24
+                    span.description total<br />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