Projects Page

app/modules/home/projects/home-project-list.scss

@@ -34,14 +34,6 @@
             vertical-align: middle;
             white-space: nowrap;
         }
-        .private {
-            display: inline-block;
-            margin-left: .3rem;
-            width: .5rem;
-            path {
-                fill: $gray-light;
-            }
-        }
     }
     p {
         @extend %text;

app/modules/projects/listing/projects-listing.scss

@@ -29,15 +29,6 @@
         vertical-align: middle;
         white-space: nowrap;
     }
-    .private {
-        display: inline-block;
-        margin-left: .3rem;
-        width: .5rem;
-        path {
-            fill: $gray-light;
-            transition: fill .3s linear;
-        }
-    }
     p {
         @extend %text;
         @extend %small;

app/partials/project/project.jade

@@ -2,9 +2,30 @@ doctype html
 
 div.wrapper(ng-controller="ProjectController as ctrl")
     nav.menu.hidden(tg-project-menu)
-    section.main.single-project
+    div.main.centered.single-project
-        h1
+        section.single-project-intro
-            span.green(tg-bo-bind="project.name", class="project-name")
+            h1
+                span.green(tg-bo-bind="project.name", class="project-name")
+                span.private(ng-if="project.is_private", title="{{'PROJECT.PRIVATE' | translate}}")
+                    include ../../svg/lock.svg
+            p.description(tg-bo-bind="project.description")
+            div.project-list-single-tags.tags-container(ng-if="::project.tags")
+                div.tags-block(tg-colorize-tags="project.tags", tg-colorize-tags-type="backlog")
+        div.project-data
+            section.timeline
+                span TODO. Missing the amazing timeline around!!
+            section.involved-data
+                h2.title Team
+                ul.involved-team
+                    a(href="", title="{{member.full_name}}", ng-repeat="member in project.memberships")
+                        img(tg-bo-src="member.photo", alt="{{member.full_name}}")
+
+                h2.title Organizations
+                div.involved-organization
+                    a(href="", title="User Name")
+                        img(src="https://s3.amazonaws.com/uifaces/faces/twitter/dan_higham/48.jpg", alt="{{member.full_name}}")
+
+    //
         div.summary
             div.summary-stats
                 span.number(ng-bind="stats.total_points") --

app/styles/components/private.scss

@@ -0,0 +1,9 @@
+.private {
+    display: inline-block;
+    margin-left: .3rem;
+    width: .5rem;
+    path {
+        fill: $gray-light;
+        transition: fill .3s linear;
+    }
+}

app/styles/modules/home-project.scss

@@ -1,34 +1,84 @@
-.summary-stats {
+.single-project {
-    align-items: flex-start;
+    h1 {
-    display: flex;
+        line-height: 1.2;
-    .info-num {
+        margin: 0;
-        @extend %xlarge;
+        vertical-align: middle;
-        @extend %bold;
-        float: left;
-        margin-right: .3rem;
-        position: relative;
-        top: 5px;
     }
-    .info-text {
+    .private {
-        @extend %small;
+        font-size: 1rem;
-        float: left;
+        vertical-align: super;
-        line-height: .9rem;
     }
-}
+    .project-data {
-
+        display: flex;
-.project-data-container {
-    display: flex;
-    justify-content: space-between;
-    ul {
-        flex-grow: 0;
-        max-width: 33%;
     }
-    li {
+    .title {
-        display: inline-block;
+        @extend %larger;
-        margin-right: .1rem;
+        @extend %title;
-        width: 10%;
+        align-content: center;
-        figure {
+        background: $whitish;
+        display: flex;
+        margin-bottom: .5rem;
+        padding: .9rem 1rem;
+    }
+    .timeline {
+        flex: 1;
+        margin-right: 1rem;
+    }
+    .involved-data {
+        flex-basis: 200px;
+    }
+    .involved-team,
+    .involved-organization {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 1rem;
+        a {
+            display: block;
+            margin-right: .14rem;
+            width: 24%;
+            &:nth-child(4n) {
+                margin-right: 0;
+            }
+        }
+        img {
             width: 100%;
         }
     }
 }
+
+
+//.summary-stats {
+//    align-items: flex-start;
+//    display: flex;
+//    .info-num {
+//        @extend %xlarge;
+//        @extend %bold;
+//        float: left;
+//        margin-right: .3rem;
+//        position: relative;
+//        top: 5px;
+//    }
+//    .info-text {
+//        @extend %small;
+//        float: left;
+//        line-height: .9rem;
+//    }
+//}
+//
+//.project-data-container {
+//    display: flex;
+//    justify-content: space-between;
+//    ul {
+//        flex-grow: 0;
+//        max-width: 33%;
+//    }
+//    li {
+//        display: inline-block;
+//        margin-right: .1rem;
+//        width: 10%;
+//        figure {
+//            width: 100%;
+//        }
+//    }
+//}
+//