From 0d31cec90e7ddd2122f0c981e7ce87b5b28fa41b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 3 Jun 2014 15:09:46 +0200
Subject: [PATCH] Main Titles and module summary

---
 app/backlog.jade                        |  2 +-
 app/styles/components/summary.scss      | 60 +++++++++++++++++++++++++
 app/styles/dependencies/typography.scss | 21 ++++++---
 app/styles/layout/base.scss             |  4 +-
 app/styles/main.scss                    |  1 +
 app/styles/modules/nav.scss             |  6 +--
 app/views/components/mainTitle.jade     |  2 +
 app/views/components/summary.jade       | 12 ++---
 8 files changed, 93 insertions(+), 15 deletions(-)
 create mode 100644 app/styles/components/summary.scss
 create mode 100644 app/views/components/mainTitle.jade

diff --git a/app/backlog.jade b/app/backlog.jade
index c7ca108c..bc5f0816 100644
--- a/app/backlog.jade
+++ b/app/backlog.jade
@@ -5,7 +5,7 @@ block head
 
 block content
   section.main.backlog
-    h1 Decathlon Backlog
+    include views/components/mainTitle
     include views/components/summary
     include views/modules/burndown
     div.sub-menu
diff --git a/app/styles/components/summary.scss b/app/styles/components/summary.scss
new file mode 100644
index 00000000..723aaa1c
--- /dev/null
+++ b/app/styles/components/summary.scss
@@ -0,0 +1,60 @@
+.summary {
+    background: $blackish;
+    color: $white;
+    padding: 1em;
+    @include clearfix;
+    ul {
+        margin: 0;
+        padding: 0;
+        float: left;
+        margin-top: 4px;
+        width: 50%;
+    }
+    li {
+        float: left;
+        display: block;
+        margin-right: 4%;
+    }
+    .data {
+        float: left;
+        margin-top: 4px;
+        margin-right: 1.5em;
+        .number {
+            color: $freshTaiga;
+        }
+    }
+}
+
+.summary-progress-bar {
+    height: 30px;
+    margin-bottom: 0;
+    margin-right: 10px;
+    background: $whitish;
+    width: 20%;
+    position: relative;
+    float: left;
+    .current-progress {
+        position: absolute;
+        top: 3px;
+        left: 2px;
+        width: calc(30% - 4px);
+        background: $freshTaiga;
+        height: 24px;
+    }
+}
+
+.number {
+    font-family: 'DroidSans-Bold';
+    @extend .xlarge;
+    float: left;
+    margin-right: .2em;
+}
+
+.description {
+    font-family: 'DroidSans';
+    @extend .small;
+    float: left;
+    line-height: 1em;
+    position: relative;
+    top: -2px;
+}
diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss
index 3b55a4e7..642ad82a 100755
--- a/app/styles/dependencies/typography.scss
+++ b/app/styles/dependencies/typography.scss
@@ -21,11 +21,22 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /*__Font Sizes__*/
-.small {font-size: .7em;}
-.medium {font-size: 1em;}
-.large {font-size: 1.2em;}
-.xlarge {font-size: 2em;}
-.xxlarge {font-size: 3em;}
+.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;
+    font-family: 'ostrichSans';
+    margin-bottom: 2rem;
+    .green {
+        color: $greenTaiga;
+        margin-left: .3rem;
+    }
+}
 
 p { margin: 0 0 20px 0;
     img {
diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss
index cc4a530e..2252f731 100644
--- a/app/styles/layout/base.scss
+++ b/app/styles/layout/base.scss
@@ -7,7 +7,7 @@ body {
     width: 100%;
     height: 100%;
     background: #fff; /* fallback */
-    font: 14px/21px 'DroidSans', Arial, sans-serif;
+    font: 16px/21px 'DroidSans', Arial, sans-serif;
     color: #444;
     -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
     -webkit-text-size-adjust: 100%;
@@ -29,6 +29,7 @@ body {
     flex-grow: 1;
     flex-shrink: 0;
     flex-basis: 200px;
+    padding: 2em 1em;
 }
 
 .main {
@@ -36,6 +37,7 @@ body {
     flex-grow: 8;
     flex-shrink: 0;
     flex-basis: 200px;
+    padding: 2em;
 }
 
 .icon {
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 768a37db..fa6701ad 100755
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -19,6 +19,7 @@ $prefix-for-spec:      true;
 //Components
 @import 'components/buttons';
 @import 'components/avatar';
+@import 'components/summary';
 
 //Layout
 @import 'layout/base';
diff --git a/app/styles/modules/nav.scss b/app/styles/modules/nav.scss
index e46ca044..986175cd 100644
--- a/app/styles/modules/nav.scss
+++ b/app/styles/modules/nav.scss
@@ -2,14 +2,14 @@
     width: 90px;
     background-image: url("/images/menu.png");
     background-attachment: fixed;
-    background-position: center bottom;
+    background-position: left bottom;
     flex-wrap: wrap;
     padding: 2em .3em;
     font-family: 'ostrichSans';
 }
 
 .logo {
-    margin-bottom: 2em;
+    margin-bottom: 1em;
     img {
         width: 100%;
     }
@@ -37,7 +37,7 @@
         }
         .icon{
             @extend .xlarge;
-            line-height: 1.1em;
+            line-height: 2.2rem;
         }
         .item {
             @extend .large;
diff --git a/app/views/components/mainTitle.jade b/app/views/components/mainTitle.jade
new file mode 100644
index 00000000..bc7e5711
--- /dev/null
+++ b/app/views/components/mainTitle.jade
@@ -0,0 +1,2 @@
+h1 ProjectName
+  span.green Title
diff --git a/app/views/components/summary.jade b/app/views/components/summary.jade
index 0c02cbae..d8355d28 100644
--- a/app/views/components/summary.jade
+++ b/app/views/components/summary.jade
@@ -1,17 +1,19 @@
 div.summary
-  div.progress-bar
+  div.summary-progress-bar
     div.current-progress
+  div.data
     span.number 30%
+    span.description completed
   ul
     li
       span.number 12
-      span.description project points
+      span.description project<br />points
     li
       span.number 23
-      span.description defined points
+      span.description defined<br />points
     li
       span.number 12
-      span.description assigned points
+      span.description assigned<br />points
     li
       span.number 23
-      span.description closed points
+      span.description closed<br />points