large-summary and key style fixes

app/fonts/taiga.svg

@@ -24,4 +24,5 @@
 <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"/>
 <glyph unicode="&#112;" d="M455 362l-93 93c-5 5-14 5-20 0l-253-254 1 0-1 0-35-130 0 0c-2-4 0-10 3-14 5-4 11-5 16-2l0 0 128 34 0 0 0 0 254 254c5 5 5 14 0 19z m-359-265l21 76 56-56z"/>
 <glyph unicode="&#113;" d="M434 160l-96 96 96 96c4 4 4 10 0 14l-68 68c-4 4-10 4-14 0l-96-96-96 96c-4 4-11 4-14 0l-68-68c-2-1-3-4-3-7 0-2 1-5 3-7l96-96-96-96c-2-2-3-5-3-7 0-3 1-6 3-7l68-68c1-2 4-3 7-3 2 0 5 1 7 3l96 96 96-96c2-2 5-3 7-3 3 0 5 1 7 3l68 68c4 4 4 10 0 14z"/>
+<glyph unicode="&#114;" d="M364 364c-17 6-31 20-35 38l-36 0c5-34 28-61 59-71 21-7 36-27 36-50l0-18-226 0 0-88-36 0 0 106c0 23 15 43 36 50 31 10 54 37 59 71l-36 0c-5-18-18-32-35-38-34-12-59-45-59-83l0-246c0-20 16-37 36-37l259 0 0 1c21 0 37 16 37 36l0 246c0 38-25 71-59 83z m-101-133c28 0 51-22 51-50 0-15-6-28-16-37-1-2-2-3-2-5l0-2c0-2-1-4-2-4-9-6-18-9-28-9l-5 0c-10 0-20 3-28 9-1 0-2 2-2 4l0 2c0 2-1 3-2 5-10 9-16 22-16 37 0 28 22 50 50 50z m64-136c-3 0-6 2-8 4l-31-11 25-9c2 3 6 5 9 5 6 0 11-4 11-10 0-3-2-6-4-7 1-2 1-3 1-5 0-6-5-12-11-12-7 0-12 6-12 12 0 0 0 1 0 1l-43 16-45-16c0 0 0-1 0-1 0-6-6-12-12-12-7 0-12 6-12 12 0 2 1 3 1 5-2 1-3 4-3 7 0 6 5 10 10 10 4 0 7-2 9-5l27 9-27 10c-2-2-4-4-7-4-6 0-10 4-10 10 0 4 3 7 6 8 0 0 0 0 0 0 0 5 4 9 8 9 5 0 8-4 9-8l45-16 51 17c0 5 4 8 8 8 5 0 8-4 8-8l0 0c4-2 6-5 6-9 0-5-4-10-9-10z m-154 327l168 0c2 0 4 1 4 4l0 48c0 2-2 4-4 4l-12 0 0 23c0 3-2 6-6 6l-132 0c-4 0-6-3-6-6l0-23-12 0c-2 0-4-2-4-4l0-48c0-3 2-4 4-4z m82-255c0-7-6-13-13-13-8 0-14 6-14 13 0 7 6 13 14 13 7 0 13-6 13-13z m43 0c0-7-6-13-13-13-7 0-13 6-13 13 0 7 6 13 13 13 7 0 13-6 13-13z"/>
 </font></defs></svg>

app/styles/components/summary.scss

@@ -7,14 +7,11 @@
     ul {
         margin: 0;
         padding: 0;
-        float: left;
+        display: inline-block;
-        margin-top: 4px;
-        width: 50%;
     }
     li {
-        float: left;
+        display: inline-block;
-        display: block;
+        margin-right: 1rem;
-        margin-right: 4%;
     }
     .data {
         float: left;
@@ -22,27 +19,34 @@
         margin-right: 1.5em;
         .number {
             color: $freshTaiga;
+            top: 0;
         }
+
+    }
+    .icon{
+        @extend .large;
+        float: left;
     }
     .number {
         font-family: 'DroidSans-Bold';
         @extend .xlarge;
         float: left;
-        margin-right: .2rem;
+        margin-right: .3rem;
+        position: relative;
+        top: 5px;
     }
 
     .description {
-        font-family: 'DroidSans';
+        font-family: DroidSans;
-        @extend .small;
-        float: left;
         line-height: .9rem;
-        position: relative;
+        /* line-height: 0; */
-        top: -6px;
+        float: left;
+        @extend .small;
     }
 }
 
 .summary-progress-bar {
-    height: 30px;
+    height: 26px;
     margin-bottom: 0;
     margin-right: 10px;
     background: $whitish;
@@ -55,6 +59,24 @@
         left: 2px;
         width: calc(30% - 4px);
         background: $freshTaiga;
-        height: 24px;
+        height: 20px;
+    }
+}
+
+
+.large-summary{
+    ul {
+        margin-right: 1rem;
+        border-right: 1px solid $whitish;
+        &:last-child {
+            margin-right: 0;
+        }
+        &:last-child {
+            border-right: none;
+        }
+    }
+    .icon {
+       @extend .xlarge;
+        margin-right: .4rem;
     }
 }

app/styles/dependencies/typography.scss

@@ -35,12 +35,14 @@ h1 {
     margin-bottom: 1rem;
     span {
         @include ellipsis(250px);
+        margin-right: .5rem;
     }
     .green {
         color: $greenTaiga;
     }
     .date {
         color: $grayLight;
+        @include ellipsis(500px);
     }
 }
 
@@ -153,3 +155,6 @@ a, a:visited {
 .icon-delete:before {
   content: "q";
 }
+.icon-iocaine:before {
+  content: "r";
+}

app/taskboard.jade

@@ -9,3 +9,4 @@ block content
             span ProjectName
             span.green Sprint Name
             span.date 02/10/2014-15/10/2014
+        include views/components/large-summary

app/views/components/large-summary.jade

@@ -0,0 +1,36 @@
+div.summary.large-summary
+    div.summary-progress-bar
+        div.current-progress
+    div.data
+        span.number 30%
+        span.description completed
+    ul
+        li
+            span.number 12
+            span.description project<br />points
+        li
+            span.number 23
+            span.description defined<br />points
+        li
+            span.number 12
+            span.description assigned<br />points
+        li
+            span.number 23
+            span.description closed<br />points
+
+    ul
+        li
+            span.icon.icon-bulk
+            span.number 73
+            span.description created<br />tasks
+        li
+            span.number 72
+            span.description closed<br />tasks
+        li
+            span.number 18
+            span.description remaining<br />tasks
+    ul
+        li
+            span.icon.icon-iocaine
+            span.number 10
+            span.description iocanie<br />doses