From fe5ea78d0fc2d2633379c967b75bd96cf3864507 Mon Sep 17 00:00:00 2001
From: Alex Coles <alex@alexbcoles.com>
Date: Tue, 7 Oct 2014 19:09:42 +0200
Subject: [PATCH] Rework user + avatar component with CSS flexboxes

Signed-off-by: Alex Coles <alex@alexbcoles.com>
---
 .../stylesheets/content/_user_avatars.md      | 27 ++++++++++++
 .../stylesheets/content/_user_avatars.sass    | 23 ++++++++++
 .../stylesheets/content/_work_packages.sass   |  8 ----
 .../_work_packages_details_overview.md        | 43 +++++++++++--------
 .../work_packages/tabs/_user_field.html       | 16 ++++---
 5 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/app/assets/stylesheets/content/_user_avatars.md b/app/assets/stylesheets/content/_user_avatars.md
index 2c2d53deb6..5331c90465 100644
--- a/app/assets/stylesheets/content/_user_avatars.md
+++ b/app/assets/stylesheets/content/_user_avatars.md
@@ -15,3 +15,30 @@ Gravatar Mini:<br />
 <img src="http://gravatar.com/avatar/cb4f282fed12016bd18a879c1f27ff97" class="avatar-mini" />
 
 ```
+
+## User Avatar with Container
+### with a user
+
+```
+<div class="user-avatar--container">
+  <img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
+  <span class="user-avatar--user-with-role">
+    <span class="user-avatar--user">
+      <a class="user-avatar--user-link" href="#">Max Mustermann</a>
+    </span>
+    <span class="user-avatar--role">
+      Fully Generic Person
+    </span>
+  </span>
+</div>
+```
+
+### without a user
+
+```
+<div class="user-avatar--container">
+  <span class="user-avatar--user-with-role">
+    <span class="user-avatar--user"> - </span>
+  </span>
+</div>
+```
diff --git a/app/assets/stylesheets/content/_user_avatars.sass b/app/assets/stylesheets/content/_user_avatars.sass
index d5d1a8a9fd..c2f18c58f2 100644
--- a/app/assets/stylesheets/content/_user_avatars.sass
+++ b/app/assets/stylesheets/content/_user_avatars.sass
@@ -10,3 +10,26 @@ h1, h2, h3, h4, tr
   .avatar, .avatar-mini
     vertical-align: middle
     margin-right: 7px
+
+
+.user-avatar--container
+  +display(flex)
+  +align-items(flex-start)
+
+.user-avatar--avatar
+  @extend .avatar-mini
+  margin-right: 0.5em
+
+.user-avatar--user-with-role
+  +flex(1)
+
+.user-avatar--user
+  display:      block
+  line-height:  16px
+
+.user-avatar--role
+  display:      block
+  font-size:    11px
+  font-style:   italic
+  color:        #777777
+  line-height:  16px
diff --git a/app/assets/stylesheets/content/_work_packages.sass b/app/assets/stylesheets/content/_work_packages.sass
index 753736e61b..c5a6eae688 100644
--- a/app/assets/stylesheets/content/_work_packages.sass
+++ b/app/assets/stylesheets/content/_work_packages.sass
@@ -176,8 +176,6 @@ div
         clear: both
         height: 24px
 
-    .user-field-user-link
-      float: left
     .detail-panel-watchers-delete-watcher-icon
       padding: 0 8px
       font-size: 10px
@@ -228,12 +226,6 @@ div
   &.-text,
     +ellipsis
 
-span.role
-  font-size: 11px
-  font-size: 0.6875rem
-  font-style: italic
-  color: #777777
-  line-height: 20px
 
 div.detail-panel-latest-activity
   float: left
diff --git a/app/assets/stylesheets/content/_work_packages_details_overview.md b/app/assets/stylesheets/content/_work_packages_details_overview.md
index 9f2a56274b..00822850e2 100644
--- a/app/assets/stylesheets/content/_work_packages_details_overview.md
+++ b/app/assets/stylesheets/content/_work_packages_details_overview.md
@@ -17,14 +17,14 @@
       <div class="work-package-attributes--label">Assignee</div>
       <div class="work-package-attributes--value-container">
         <div class="work-package-attributes--value -user">
-          <p>
-            <span>
-              <img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
-              <span class="user">
-                <a class="user-field-user-link" href="#">Max Mustermann</a>
+          <span class="user-avatar--container">
+            <img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
+            <span class="user-avatar--user-with-role">
+              <span class="user-avatar--user">
+                <a class="user-avatar--user-link" href="#">testing.long.emails+filter-junk-away@openproject.org</a>
               </span>
             </span>
-          </p>
+          </span>
         </div>
       </div>
     </li>
@@ -32,14 +32,18 @@
       <div class="work-package-attributes--label">Responsible</div>
       <div class="work-package-attributes--value-container">
         <div class="work-package-attributes--value -user">
-          <p>
-            <span>
-              <img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
-              <span class="user">
-                <a class="user-field-user-link" href="#">Max Mustermann</a>
+          <span class="user-avatar--container">
+            <img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
+            <span class="user-avatar--user-with-role">
+              <span class="user-avatar--user">
+                <a class="user-avatar--link" href="#">Karl-Theodor zu Guttenberg (copy)</a>
+              </span>
+              <span class="user-avatar--role">
+                Distinguished Statesman.
+                Former Minister for Economics and Technology.
               </span>
             </span>
-          </p>
+          </span>
         </div>
       </div>
     </li>
@@ -97,14 +101,17 @@
       <div class="work-package-attributes--label">Custom User</div>
       <div class="work-package-attributes--value-container">
         <div class="work-package-attributes--value -user">
-          <p>
-            <span>
-              <img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
-              <span class="user">
-                <a class="user-field-user-link" href="#">Max Mustermann</a>
+          <span class="user-avatar--container">
+            <img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
+            <span class="user-avatar--user-with-role">
+              <span class="user-avatar--user">
+                <a class="user-avatar--user-link" href="#">Max Mustermann</a>
+              </span>
+              <span class="user-avatar--role">
+                Fully Generic Person
               </span>
             </span>
-          </p>
+          </span>
         </div>
       </div>
     </li>
diff --git a/public/templates/work_packages/tabs/_user_field.html b/public/templates/work_packages/tabs/_user_field.html
index dd0ad78036..dc5fc7bb8a 100644
--- a/public/templates/work_packages/tabs/_user_field.html
+++ b/public/templates/work_packages/tabs/_user_field.html
@@ -1,13 +1,15 @@
-<p>
-  <span ng-if="userName">
-    <img class="avatar-mini"
+<span class="user-avatar--container">
+  <span class="user-avatar--user-with-role" ng-if="userName">
+    <img class="user-avatar--avatar"
          ng-if="user.props.avatar"
          ng-src="{{user.props.avatar}}" alt="Avatar" title="{{userName}}" />
-    <span class="user">
+    <span class="user-avatar--user">
       <a ng-href="{{ userPath(user.props.id) }}" ng-bind="user.props.name"
          class="user-field-user-link"/>
     </span>
-    <span class="role" ng-if="user.props.role" ng-bind="user.props.role"/>
+    <span class="user-avatar--role" ng-if="user.props.role" ng-bind="user.props.role"/>
   </span>
-  <span ng-if="!userName"> - </span>
-</p>
+  <span class="user-avatar--user-with-role" ng-if="!userName">
+    <span class="user-avatar--user"> - </span>
+  </span>
+</span>