From 436dab6a1a18c4db467e743a3b1ee122be82ecd5 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Wed, 23 Mar 2016 15:15:38 +0100
Subject: [PATCH] refactor userList

---
 .../layout_ref/merge_customer_view.jst.eco     | 10 +++++-----
 .../app/views/layout_ref/ticket_zoom.jst.eco   | 10 +++++-----
 .../views/organization_profile/object.jst.eco  |  6 +++---
 .../app/views/widget/organization.jst.eco      | 10 +++++-----
 app/assets/stylesheets/zammad.scss             | 18 ++++++++++--------
 5 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco b/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
index d17ff9628..731ea4c88 100644
--- a/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
@@ -860,11 +860,11 @@
         <hr>
         <label>Members</label>
 
-        <ul class="userList">
-          <li>
-            <span class="avatar unique size-40 user-popover" data-id="2" data-original-title="" style="background-position: -96.5079185759074px -112.28590086669901px;" title="">NB</span> <a class="user-popover" data-id="2" data-original-title="" href="#user/profile/2" title="">Nicole Braun</a>
-          </li>
-        </ul>
+        <div class="userList">
+          <div class="userList-entry">
+            <span class="avatar unique size-40 user-popover" data-id="2" data-original-title="" style="background-position: -96.5079185759074px -112.28590086669901px;" title="">NB</span> <a class="userList-entry user-popover" data-id="2" data-original-title="" href="#user/profile/2" title="">Nicole Braun</a>
+          </div>
+        </div>
       </div>
     </div>
 
diff --git a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
index d5070211f..0946446a3 100644
--- a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
@@ -602,11 +602,11 @@
         </div>
         <hr>
         <label>Members</label>
-        <ul class="userList">
-          <li>
-            <span class="avatar unique size-40 user-popover" data-id="2" data-original-title="" style="background-position: -96.5079185759074px -112.28590086669901px;" title="">NB</span> <a class="user-popover" data-id="2" data-original-title="" href="#user/profile/2" title="">Nicole Braun</a>
-          </li>
-        </ul>
+        <div class="userList">
+          <div class="userList-entry">
+            <span class="avatar unique size-40 user-popover" data-id="2" data-original-title="" style="background-position: -96.5079185759074px -112.28590086669901px;" title="">NB</span> <a class="userList-entry user-popover" data-id="2" data-original-title="" href="#user/profile/2" title="">Nicole Braun</a>
+          </div>
+        </div>
       </div>
     </div>
     <div class="tabsSidebar-tabs">
diff --git a/app/assets/javascripts/app/views/organization_profile/object.jst.eco b/app/assets/javascripts/app/views/organization_profile/object.jst.eco
index 698e6f4c7..c4d01fbd3 100644
--- a/app/assets/javascripts/app/views/organization_profile/object.jst.eco
+++ b/app/assets/javascripts/app/views/organization_profile/object.jst.eco
@@ -27,11 +27,11 @@
 <% if @organization.members: %>
 <div class="profile-section profile-memberSection">
   <label><%- @T('Members') %></label>
-  <div class="profile-details horizontal wrap">
+  <div class="userList">
     <% for user in @organization.members: %>
-      <div class="profile-organizationMember">
+      <div class="userList-entry">
         <%- user.avatar("40") %>
-        <a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>"><%= user.displayName() %></a>
+        <a href="<%- user.uiUrl() %>" class="userList-name user-popover" data-id="<%- user.id %>"><%= user.displayName() %></a>
       </div>
     <% end %>
   </div>
diff --git a/app/assets/javascripts/app/views/widget/organization.jst.eco b/app/assets/javascripts/app/views/widget/organization.jst.eco
index 8c575c6fb..a7de46b7a 100644
--- a/app/assets/javascripts/app/views/widget/organization.jst.eco
+++ b/app/assets/javascripts/app/views/widget/organization.jst.eco
@@ -23,16 +23,16 @@
 
 <% if @organization.members: %>
 <hr>
-<user class="sidebar-block">
+<div class="sidebar-block">
   <label><%- @T('Members') %></label>
-  <ul class="userList">
+  <div class="userList">
 <% for user in @organization.members: %>
-    <li>
+    <div class="userList-entry">
       <%- user.avatar("40") %>
-      <a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>">
+      <a href="<%- user.uiUrl() %>" class="userList-name user-popover" data-id="<%- user.id %>">
         <%= user.displayName() %>
       </a>
 <% end %>
-  </ul>
+  </div>
 </div>
 <% end %>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 51724dd25..75ebcd501 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -5877,17 +5877,19 @@ footer {
   list-style: none;
   padding: 0;
 
-  li {
-    position: relative;
+  .userList-entry {
     margin: 10px 0;
+    display: flex;
+    align-items: center;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
-
-  a {
+  
+  .userList-name {
     @extend .u-textTruncate;
-    position: absolute;
-    top: 10px;
-    right: 0px;
-    left: 48px;
+    margin-left: 7px;
   }
 }