Sidebar options for User Story detail

app/partials/us-detail.jade

@@ -48,3 +48,39 @@ block content
                 //-include views/modules/comments
                 include views/modules/activity
         sidebar.menu-secondary.sidebar
+             h1
+                 span Open
+                 span.us-detail-status In progress
+             div.us-detail-progress-bar
+                 div.current-progress
+                 span.tasks-completed 6/7 tasks completed
+             ul.points-per-role
+                 li.total
+                     span.points 10
+                     span.role total
+                 - for(var x=0; x<5; x++)
+                     li.total
+                         span.points 10
+                         span.role UX
+                 section.us-detail-assigned-to
+                     div.user-avatar
+                         a.avatar(href="", title="Assigned to")
+                             img(src="http://thecodeplayer.com/u/uifaces/18.jpg", alt="username")
+                     div.assigned-to
+                         span.assigned-title Assigned to
+                         span.user-assigned Anler Hernández
+                 section.watchers
+                     div.watchers-header
+                         span.title watchers
+                         a.icon.icon-plus(href="", title="Add watcher")
+                     div.watchers-content
+                         - for(var y=0; y<5; y++)
+                             div.watcher-single
+                                 div.watcher-avatar
+                                     a.avatar(href="", title="Assigned to")
+                                         img(src="http://thecodeplayer.com/u/uifaces/32.jpg", alt="username")
+                                 a.watcher-name(href="", title="Jesús Espino") Jesús Espino
+                section.us-settings
+                    a.button.button-gray(href="", title="Client requirement") Client requirement
+                    a.button.button-gray(href="", title="Team requirement") Team requirement
+                    a.button.button-red(href="", title="Block") Block

app/styles/components/buttons.scss

@@ -11,28 +11,23 @@
     }
 }
 
-%button {
+%button,
+.button {
     @extend %large;
+    @include transition (background .3s linear);
     display: inline-block;
     font-family: 'ostrichSans';
     padding: 8px 40px;
-    .icon {
+    &:hover {
-        margin-right: .3rem;
+        @include transition (background .3s linear);
     }
-}
-
-.button-green,
-.button-gray,
-.button-red {
-    @extend %button;
-    @include transition (background .3s linear);
     span {
         color: $white;
         position: relative;
         top: 2px;
     }
-    &:hover {
+    .icon {
-        @include transition (background .3s linear);
+        margin-right: .3rem;
     }
 }
 

app/styles/dependencies/mixins.scss

@@ -10,13 +10,13 @@
 }
 
 // Table Flex - http://devbryce.com/site/flexbox/
-@mixin table-flex {
+@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
-    align-content: stretch;
+    align-content: $align-content;
-    align-items: stretch;
+    align-items: $align-items;
-    display: flex;
+    display: $display;
-    flex-direction: row;
+    flex-direction: $flex-direction;
-    flex-wrap: wrap;
+    flex-wrap: $flex-wrap;
-    justify-content: flex-start;
+    justify-content: $justify-content;
 }
 
 @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {

app/styles/layout/us-detail.scss

@@ -104,30 +104,143 @@
     padding: 1rem 2rem;
 }
 
-.activity-single {
+.us-detail-status {
-    @include table-flex;
+    @extend %large;
-    border-bottom: 2px solid $gray-light;
+    color: $green-taiga;
-    padding: 1rem 0;
+    vertical-align: middle;
+}
+
+.us-detail-progress-bar {
+    background: $grayer;
+    height: 26px;
+    margin-bottom: 1rem;
     position: relative;
-    .username {
+    .current-progress {
-        color: $green-taiga;
+        background: $fresh-taiga;
-        margin-bottom: 1rem;
+        height: 26px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 60%;
     }
-    .date {
+    .tasks-completed {
         @extend %small;
-        color: $gray-light;
+        color: $white;
-        margin-left: 1rem;
+        left: 10px;
+        position: absolute;
+        top: 2px;
     }
 }
 
-.activity-user {
+.points-per-role {
-    @include table-flex-child(1, 50px, 0);
+    li {
-    img {
+        border-right: 1px solid $grayer;
-        max-width: 70px;
+        display: inline-block;
+        margin: .5rem .1rem;
+        opacity: .3;
+        text-align: center;
+        width: 18%;
+        &:first-child {
+            opacity: 1;
+        }
+        &:nth-child(5n) {
+            border: 0;
+        }
+    }
+    .points {
+        @extend %xlarge;
+        display: block;
+        font-family: 'ostrichSans';
+        text-align: center;
+    }
+    .role {
+        display: inline-block;
+        max-width: 90%;
+        overflow: hidden;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.us-detail-assigned-to {
+    @include table-flex();
+    margin-top: 2rem;
+    .user-avatar {
+        @include table-flex-child(1, 0);
+    }
+    .assigned-to {
+        @include table-flex-child(3, 0);
+        margin-left: 1rem;
+        margin-top: 15px;
+        .assigned-title {
+            color: $gray-light;
+            display: block;
+        }
+        .user-assigned {
+            @extend %large;
+            color: $green-taiga;
+        }
+    }
+}
+
+.watchers {
+    margin-top: 2rem;
+    .watchers-header {
+        border-bottom: 2px solid $gray-light;
+        padding: .5rem;
+        position: relative;
+        .title {
+            @extend %large;
+            font-family: 'ostrichSans';
+        }
+        .icon {
+            @extend %large;
+            position: absolute;
+            right: 1rem;
+            top: 4px;
+        }
+    }
+    .watcher-single {
+        @include table-flex(center, center, flex, row, wrap, center);
+        border-bottom: 1px solid $gray-light;
+        padding: .5rem;
+        vertical-align: middle;
+        &:last-child {
+            border: 0;
+        }
+        .watcher-avatar {
+            @include table-flex-child(1, 0);
+        }
+        .watcher-name {
+            @include table-flex-child(8, 0);
+            @extend %large;
+            color: $grayer;
+            margin-left: 1rem;
+        }
+    }
+}
+
+.us-settings {
+    margin-top: 2rem;
+    .button {
+        color: $white;
+        display: block;
+        margin-bottom: .5rem;
+        text-align: center;
         width: 100%;
     }
-}
+    .button-gray {
-
+        background: $gray-light;
-.activity-content {
+        &:hover,
-    @include table-flex-child(20, 150px, 0);
+        &.active {
+            background: $grayer;
+        }
+    }
+    .button-red {
+        &:hover,
+        &.active {
+            background: $red;
+        }
+    }
 }

app/styles/main.scss

@@ -42,9 +42,10 @@ $prefix-for-spec:      true;
 @import 'modules/admin-functionalities';
 @import 'modules/category-config';
 @import 'modules/project-details';
-@import 'modules/comments';
 @import 'modules/attachments';
+@import 'modules/comments';
 @import 'modules/comment-activity';
+@import 'modules/activity';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/activity.scss

@@ -44,6 +44,7 @@
     @include table-flex;
     border-bottom: 2px solid $gray-light;
     padding: 2rem 0;
+    position: relative;
     &:first-child {
         margin-top: 0;
     }
@@ -60,7 +61,8 @@
     }
     .activity-username {
         border-bottom: 1px dotted $gray-light;
-        padding-bottom: 1rem;
+        color: $green-taiga;
+        margin-bottom: 1rem;
     }
     .activity-content {
         @include table-flex-child(20, 150px, 0);
@@ -72,6 +74,7 @@
         }
     }
     .date {
+        @extend %small;
         color: $gray-light;
         margin-left: 1rem;
     }