I+D en Taskboard

app/partials/views/components/taskboard-task.jade

@@ -3,6 +3,7 @@ div.taskboard-tagline
 div.taskboard-task-inner
     div(tg-taskboard-user-avatar="task.assigned_to", click="ctrl.editTaskAssignedTo(task)")
     p.taskboard-text
+        span.task-assigned Username
         span.task-num(tg-bo-ref="task.ref")
         a.task-name(href="", title="See task details", tg-bind-html="task.subject",
                     tg-nav="project-tasks-detail:project=project.slug,ref=task.ref")

app/partials/views/modules/taskboard-table.jade

@@ -39,8 +39,6 @@ div.taskboard-table
                     a.icon.icon-bulk(href="", title="Add new tasks in bulk",
                                      ng-click="ctrl.addNewTask('bulk', us)")
 
-                div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id",
-                                                    tg-taskboard-sortable)
-                    div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id",
-                                       tg-taskboard-task)
+                div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", tg-taskboard-sortable)
+                        div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id", tg-taskboard-task)
                             include ../components/taskboard-task

app/styles/components/taskboard-task.scss

@@ -1,49 +1,61 @@
 .taskboard-task {
     @include transition (box-shadow .4s linear);
-    background: $postit;
+    background: $very-light-gray;
     box-shadow: none;
-    margin-bottom: 1rem;
+    min-height: 7rem;
     position: relative;
+    &:hover {
+        .icon {
+            @include transition(color .3s linear);
+            color: $gray-light;
+        }
+    }
     &.ui-sortable-helper {
-        box-shadow: 1px 1px 15px rgba($black, .2);
+        box-shadow: 1px 1px 15px rgba($black, .1);
     }
     &.ui-sortable-placeholder {
         background: $grayer;
     }
     .taskboard-tagline {
         @include table-flex();
+        height: .4rem;
     }
     .taskboard-tag {
         @include table-flex-child(1, 0, 0, 0);
         background: $postit-hover; //Fallback
-        height: .3rem;
+        height: .1rem;
     }
     .taskboard-task-inner {
         @include table-flex();
         padding: 1rem .5rem;
     }
     .avatar {
-        @include table-flex-child($flex-basis: 70px);
+        @include table-flex-child($flex-basis: 50px);
         a {
             @extend %small;
             display: block;
             text-align: center;
         }
         img {
-            border: 2px solid $postit-hover;
+            border: 0;
             margin: 0 auto;
         }
         figcaption {
             color: darken($postit-hover, 15%);
-            display: block;
+            display: none;
+            //display: block;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             width: 100%;
         }
     }
+    .task-assigned {
+        @extend %bold;
+        display: block;
+    }
     .task-num {
-        color: $postit-hover;
+        color: $grayer;
         margin-right: .5em;
     }
     .taskboard-text {
@@ -51,20 +63,21 @@
         @include table-flex-child($flex-grow: 10, $flex-basis: 50px);
         padding: 0 .5rem 0 1rem;
     }
+    .icon {
+        @include transition(color .3s linear);
+    }
     .icon-edit,
     .icon-drag-h {
         @extend %large;
-        bottom: .2rem;
-        color: $postit-hover;
-        display: none;
+        bottom: .5rem;
+        color: $whitish;
         position: absolute;
         &:hover {
-            @include transition(color, .3s, linear);
-            color: darken($postit-hover, 15%);
+            color: $grayer;
         }
     }
     .icon-edit {
-        right: .5rem;
+        right: 1rem;
     }
     .icon-drag-h {
         @extend %xlarge;

app/styles/dependencies/colors.scss

@@ -7,6 +7,7 @@ $grayer: #444;
 $gray-light: #cdcdcd;
 $very-light-gray: #e3e3e3;
 $whitish: #f5f5f5;
+$very-light-gray: #fcfcfc;
 $white: #fff;
 
 $green-taiga: #72a114;

app/styles/modules/backlog/taskboard-table.scss

@@ -44,7 +44,6 @@ $column-margin: 0 10px 0 0;
     .task-column {
         @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
         margin: $column-margin;
-        padding: 1rem;
         &:last-child {
             margin-right: 0;
         }