From ad0b59f0a917b091ff5e912aa0cbfc66f242bf21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 26 Jul 2016 11:09:40 +0200
Subject: [PATCH] Epics table layout

---
 app/locales/taiga/locale-en.json                 |  3 ++-
 .../epics/dashboard/epic-row/epic-row.jade       | 16 ++++++++++++----
 .../epics/dashboard/epic-row/epic-row.scss       |  8 ++++++++
 .../epics/dashboard/epics-table/epics-table.scss | 13 ++++++++++---
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json
index e8b17d53..cfd6397d 100644
--- a/app/locales/taiga/locale-en.json
+++ b/app/locales/taiga/locale-en.json
@@ -394,7 +394,8 @@
     "EPICS": {
         "TITLE": "EPICS",
         "DASHBOARD": {
-            "ADD": "+ ADD EPIC"
+            "ADD": "+ ADD EPIC",
+            "UNASSIGNED": "Unassigned"
         },
         "TABLE": {
             "VOTES": "Votes",
diff --git a/app/modules/epics/dashboard/epic-row/epic-row.jade b/app/modules/epics/dashboard/epic-row/epic-row.jade
index 8e7adee3..d260d601 100644
--- a/app/modules/epics/dashboard/epic-row/epic-row.jade
+++ b/app/modules/epics/dashboard/epic-row/epic-row.jade
@@ -23,15 +23,23 @@
         translate="EPICS.TABLE.SPRINT"
     )
     .assigned(
-        ng-if="vm.column.assigned && vm.epic.getIn(['assigned_to_extra_info', 'photo'])"
+        ng-if="vm.column.assigned && vm.epic.get('assigned_to')"
     ) 
         img(
+            ng-if="vm.epic.getIn(['assigned_to_extra_info', 'photo'])"
             ng-src="{{vm.epic.getIn(['assigned_to_extra_info', 'photo'])}}"
-            alt="::vm.epic.getIn(['assigned_to_extra_info', 'name'])"
+            alt="{{::vm.epic.getIn(['assigned_to_extra_info', 'full_name_display'])}}"
+        )    
+        img(
+            ng-if="!vm.epic.getIn(['assigned_to_extra_info', 'photo'])"
+            ng-src="https://www.gravatar.com/avatar/{{vm.epic.getIn(['assigned_to_extra_info', 'gravatar_id'])}}"
+            alt="{{::vm.epic.getIn(['assigned_to_extra_info', 'full_name_display'])}}"
         )    
     .assigned(
-        ng-if="vm.column.assigned && !vm.epic.getIn(['assigned_to_extra_info', 'photo'])"
-    ) Unassigned
+        ng-if="vm.column.assigned && !vm.epic.get('assigned_to')"
+        ng-class="{'is-unassigned': !vm.epic.get('assigned_to')}"
+        translate="EPICS.DASHBOARD.UNASSIGNED"
+    )
     .status(
         ng-if="vm.column.status && !vm.permissions.canEdit"
     )
diff --git a/app/modules/epics/dashboard/epic-row/epic-row.scss b/app/modules/epics/dashboard/epic-row/epic-row.scss
index 540450aa..23b55494 100644
--- a/app/modules/epics/dashboard/epic-row/epic-row.scss
+++ b/app/modules/epics/dashboard/epic-row/epic-row.scss
@@ -56,12 +56,20 @@
     .vote {
         color: $gray;
     }
+    .assigned {
+        img {
+            width: 40px;
+        }
+    }
     .icon-upvote {
         @include svg-size(.75rem);
         fill: $gray;
         margin-right: .25rem;
         vertical-align: middle;
     }
+    .is-unassigned {
+        color: $gray-light;
+    }
     .epic-statuses {
         @include font-type(light);
         @include font-size(small);
diff --git a/app/modules/epics/dashboard/epics-table/epics-table.scss b/app/modules/epics/dashboard/epics-table/epics-table.scss
index 8aff604d..9342d0cd 100644
--- a/app/modules/epics/dashboard/epics-table/epics-table.scss
+++ b/app/modules/epics/dashboard/epics-table/epics-table.scss
@@ -4,7 +4,9 @@
 
 .epics-table-header,
 .epics-table-body {
-    .assigned,
+    .assigned {
+        padding: .5rem;
+    }
     .project,
     .vote,
     .status,
@@ -17,7 +19,7 @@
     .assigned,
     .project,
     .vote {
-        flex-basis: 80px;
+        flex-basis: 100px;
         flex-grow: 0;
         flex-shrink: 0;
         flex-wrap: wrap;
@@ -33,7 +35,9 @@
     }
     .name,
     .progress {
-        flex: 1;
+        flex-basis: 20vw;
+        flex-grow: 1;
+        flex-shrink: 2;
         max-width: 40vw;
     }
     .name,
@@ -54,6 +58,9 @@
     display: flex;
     padding: .5rem;
     position: relative;
+    .assigned {
+        padding: 1rem .5rem;
+    }
 }
 
 .epics-table-options-wrapper {