Streamline of layout and markup for user/organization in sidebar/widget and user/orzanization/ticket in popovers.

app/assets/javascripts/app/views/popover/organization.jst.eco

@@ -1,20 +1,19 @@
 <hr>
-<div>
 <% for row in @organizationData: %>
   <% if @organization[row.name]: %>
-    <div class="column">
-      <h3><%- @T( row.display ) %></h3>
-      <div><%- @P( @organization, row.name ) %></div>
+    <div class="popover-block">
+      <label><%- @T( row.display ) %></label>
+      <%- @P( @organization, row.name ) %>
     </div>
   <% end %>
 <% end %>
 </div>
 <% if  @organization.members: %>
   <hr>
-  <h3><%- @T('Members') %></h3>
-  <% for user in @organization.members: %>
-  <div class="person">
-    <%= user.displayName() %>
+  <div class="popover-block">
+    <label><%- @T('Members') %></label>
+    <% for user in @organization.members: %>
+      <div class="person"><%= user.displayName() %></div>
+    <% end %>
   </div>
-  <% end %>
 <% end %>

app/assets/javascripts/app/views/popover/ticket.jst.eco

@@ -2,36 +2,40 @@
   <span class="<%- @ticket.icon() %>" title="<%- @ticket.iconTitle() %>"></span> <span class="<%- @ticket.iconTextClass() %>"><%- @ticket.iconTitle() %></span>
 </div>
 <hr>
-<h3><%- @T('Agent') %></h3>
-<div class="person">
-  <%= @ticket.owner.displayName() %>
-  <% if @ticket.owner.organization: %>
-    <span class="organization"><%= @ticket.owner.organization.displayName() %></span>
-  <% end %>
+<div class="popover-block">
+  <label><%- @T('Agent') %></label>
+  <div class="person">
+    <%= @ticket.owner.displayName() %>
+    <% if @ticket.owner.organization: %>
+      <span class="organization"><%= @ticket.owner.organization.displayName() %></span>
+    <% end %>
+  </div>
 </div>
-<h3><%- @T('Customer') %></h3>
-<div class="person">
-  <%= @ticket.customer.displayName() %>
-  <% if @ticket.customer.organization: %>
-    <span class="organization"><%= @ticket.customer.organization.displayName() %></span>
-  <% end %>
+<div class="popover-block">
+  <label><%- @T('Customer') %></label>
+  <div class="person">
+    <%= @ticket.customer.displayName() %>
+    <% if @ticket.customer.organization: %>
+      <span class="organization"><%= @ticket.customer.organization.displayName() %></span>
+    <% end %>
+  </div>
 </div>
 <hr>
 <div class="horizontal two-columns">
   <div class="column">
-    <h3>#</h3>
+    <label>#</label>
     <div class="u-textTruncate"><%- @P( @ticket, 'number' ) %></div>
   </div>
   <div class="column">
-    <h3><%- @T( 'Priority' ) %></h3>
+    <label><%- @T( 'Priority' ) %></label>
     <div class="u-textTruncate"><%- @P( @ticket, 'priority' ) %></div>
   </div>
   <div class="column">
-    <h3><%- @T( 'Created' ) %></h3>
+    <label><%- @T( 'Created' ) %></label>
     <div class="u-textTruncate"><%- @P( @ticket, 'created_at' ) %></div>
   </div>
   <div class="column">
-    <h3><%- @T( 'Group' ) %></h3>
+    <label><%- @T( 'Group' ) %></label>
     <div class="u-textTruncate"><%- @P( @ticket, 'group' ) %></div>
   </div>
 </div>

app/assets/javascripts/app/views/popover/user.jst.eco

@@ -5,15 +5,15 @@
 <div>
 <% for row in @userData: %>
   <% if @user[row.name]: %>
-  <div class="column">
-    <h3><%- @T( row.display ) %></h3>
-    <div><%- @P( @user, row.name ) %></div>
+  <div class="popover-block">
+    <label><%- @T( row.display ) %></label>
+    <%- @P( @user, row.name ) %>
   </div>
   <% end %>
 <% end %>
 <% if !_.isEmpty(@user['accounts']): %>
-    <div class="customer-info">
-      <h3><%- @T( 'Linked Accounts' ) %></h3>
+    <div class="popover-block">
+      <label><%- @T( 'Linked Accounts' ) %></label>
       <% for account of @user['accounts']: %>
         <a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
       <% end %>
@@ -21,8 +21,8 @@
 <% end %>
 <% if !_.isEmpty( @user['links'] ): %>
   <% for link in @user['links']: %>
-    <div class="customer-info">
-      <h3><%- @T( link['title'] ) %></h3>
+    <div class="popover-block">
+      <label><%- @T( link['title'] ) %></label>
       <% for item in link['items']: %>
         <% if item['url']: %>
           <a href="<%= item['url'] %>" title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>" <% if link.new_window: %>target="_blank"<% end %>>

app/assets/javascripts/app/views/widget/organization.jst.eco

@@ -1,7 +1,8 @@
 <div class="sidebar-block">
-  <h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
-    <%= @organization.displayName() %>
-  </h3>
+    <div class="avatar organizationInfo-avatar size-50">
+      <a href="<%- @organization.uiUrl() %>" class="organization icon"></a>
+    </div>
+    <h3 title="<%- @Ti( 'Name') %>"><%= @organization.displayName() %></h3>
 </div>
 
 <% for row in @organizationData: %>

app/assets/javascripts/app/views/widget/user.jst.eco

@@ -1,10 +1,7 @@
-<div class="userInfo">
-  <div class="sidebar-block">
-    <%- @user.avatar("50", "", "userInfo-avatar") %>
-    <h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
-      <%= @user.displayName() %>
-    </h3>
-  </div>
+<div class="sidebar-block">
+  <%- @user.avatar("50", "", "userInfo-avatar") %>
+  <h3 title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></h3>
+</div>
 <% for row in @userData: %>
   <% if @user[row.name] || row.name is 'note': %>
     <div class="sidebar-block">
@@ -45,5 +42,4 @@
   </div>
 <% end %>
   <% end %>
-<% end %>
-</div>
+<% end %>

app/assets/stylesheets/zammad.css.scss

@@ -2572,12 +2572,18 @@ footer {
 
   .sidebar-block {
     margin: 20px 0;
-    word-wrap: break-word;
 
     &:first-child {
       margin-top: 0;
     }
   }
+  .sidebar-block,
+  .sidebar-block > * {
+    @extend .u-textTruncate;
+  }
+  .sidebar-block [contenteditable=true] {
+    white-space: normal; // do no u-textTruncate, we want to edit it inline
+  }
 
   .main + .sidebar {
     border-right: none;
@@ -2741,10 +2747,16 @@ footer {
   }
 
   .popover .user-organization {
+    @extend .u-textTruncate;
     margin-bottom: 8px;
     margin-top: -4px;
   }
 
+  .popover-block {
+    @extend .sidebar-block;
+    margin: 10px 0;
+  }
+
   .popover hr {
     margin: 8px 0;
   }
@@ -2752,7 +2764,15 @@ footer {
   .popover .person .organization:before { content: '('; }
   .popover .person .organization:after { content: ')'; }
 
-  .popover .column h3 {
+  .popover label {
+    font-size: 13px;
+    color: #a9bcc4;
+    font-weight: 200;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+  }
+
+  .popover .column label {
     margin: 8px 0 1px;
   }
 
@@ -4403,22 +4423,26 @@ footer {
   position: relative;
 }
 
+.organizationInfo-avatar {
+  @extend .userInfo-avatar;
+  padding: 18px 0 0 18px;
+}
+
 .userList {
   list-style: none;
   padding: 0;
-  
+
   li {
-    @extend .horizontal;
-    @extend .center;
+    position: relative;
     margin: 10px 0;
   }
 
   a {
     @extend .u-textTruncate;
-  }
-
-  .avatar {
-    margin-right: 7px;
+    position: absolute;
+    top: 10px;
+    right: 0px;
+    left: 48px;
   }
 }