article meta design

app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco

@@ -1,38 +1,47 @@
 <% for article in @articles: %>
 <div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
   <div class="horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
-    <div class="avatar" style="background-image: url(<%= article.created_by.imageUrl %>)">
+    <div class="avatar" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
-
+    <div class="article-content flex">
-      <ul>
+      <div class="article-meta top">
-        <li style="font-size: 10px;"><%- @T(article.type.name) %></li>
+      <% if article.from: %>
-        <% if article.type.name is 'email': %><li style="font-size: 10px;"><a href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= article.id %>"><%- @T( 'raw' ) %></a></li><% end %>
+        <div class="horizontal article-meta-row" title="<%- @Ti( 'From' ) %>: <%= article.from %>">
-      </ul>
+          <div class="article-meta-key contain-text"><%- @T( 'From' ) %></div>
-
+          <div class="article-meta-value flex contain-text"><%= article.from %></div>
-      <% if article.actions: %>
+        </div>
-        <% for action in article.actions: %>
+      <% end %>
-          -
+      <% if article.to: %>
-          <a href="<%= action.href %>" data-type="<%= action.type %>" class="<% if action.class: %><%= action.class %><% end %>"><%- @T( action.name ) %></a>
+        <div class="horizontal article-meta-row" title="<%- @Ti( 'To' ) %>: <%= article.to %>">
-        <% end %>
+          <div class="article-meta-key contain-text"><%- @T( 'To' ) %></div>
+          <div class="article-meta-value flex contain-text"><%= article.to %></div>
+        </div>
+      <% end %>
+      <% if article.cc: %>
+        <div class="horizontal article-meta-row" title="<%- @Ti( 'Kopie' ) %>: <%= article.cc %>">
+          <div class="article-meta-key contain-text"><%- @T( 'Kopie' ) %></div>
+          <div class="article-meta-value flex contain-text"><%= article.cc %></div>
+        </div>
+      <% end %>
+      <% if article.subject: %>
+        <div class="horizontal article-meta-row" title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>">
+          <div class="article-meta-key contain-text"><%- @T( 'Subject' ) %></div>
+          <div class="article-meta-value flex contain-text"><%= article.subject %></div>
+        </div>
       <% end %>
-    </div>
-    <div class="flex">
-
-
-      <div class="show-on-text-bubble-hover">
-        <% if article.from: %>
-          <div title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%- @T( 'From' ) %>: <%= article.from %></div>
-        <% end %>
-        <% if article.to: %>
-          <div title="<%- @Ti( 'To' ) %>: <%= article.to %>"><%- @T( 'To' ) %>: <%= article.to %></div>
-        <% end %>
-        <% if article.cc: %>
-          <div title="<%- @Ti( 'Cc' ) %>: <%= article.cc %>"><%- @T( 'Cc' ) %>: <%= article.cc %></div>
-        <% end %>
-        <% if article.subject: %>
-          <div title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>"><%- @T( 'Subject' ) %>: <%= article.subject %></div>
-        <% end %>
       </div>
-
+      <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
+      <div class="article-meta bottom">
+        <div class="horizontal article-meta-row">
+          <div class="article-meta-key"><%- @T( 'Kanal' ) %></div>
+          <div class="article-meta-value">
+            <span class="icon <%- article.type.name %> channel"></span>
+            <%- @T(article.type.name) %>
+            <% if article.type.name is 'email': %>
+            <a class="text-muted" href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= article.id %>"><%- @T( 'raw' ) %></a>
+            <% end %>
+          </div>
+        </div>
+      </div>
       <% if article.attachments: %>
         <div class="always-shown">
         <% for attachment in article.attachments: %>
@@ -40,8 +49,13 @@
         <% end %>
         </div>
       <% end %>
-
+      <% if article.actions: %>
-      <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
+      <div class="article-actions horizontal stretch">
+        <% for action in article.actions: %>
+          <a href="<%= action.href %>" data-type="<%= action.type %>" class="<% if action.class: %><%= action.class %><% end %>"><%- @T( action.name ) %></a>
+        <% end %>
+      </div>
+      <% end %>
 <!--
   <div class="ticket-article ticket-article-item <% if article.internal is true: %> internal<% end %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
     <div class="avatar">
@@ -54,6 +68,6 @@
 -->
     </div>
   </div>
-  <time class="task-meta humanTimeFromNow" datetime="<%- article.created_at %>" data-time="<%- article.created_at %>">?</time>
+  <small class="task-subline"><time class="humanTimeFromNow" datetime="<%- article.created_at %>" data-time="<%- article.created_at %>">?</time></small>
 </div>
 <% end %>

app/assets/javascripts/app/views/ticket_zoom/title.jst.eco

@@ -1,5 +1,5 @@
 <h1><span contenteditable="true" class="ticket-title-update inline-edit"><%= @P( @ticket.title ) %></span></h1>
 
-<div class="task-meta">
+<small class="task-subline">
   <%- @C('ticket_hook') %> <%- @ticket.number %> - <span class="humanTimeFromNow" data-time="<%- @ticket.created_at %>">?</span> <% if !@isCustomer && @ticket.escalation_time: %><%- @T('Escalation') %> <span class="humanTimeFromNow escalation" data-time="<%- @ticket.escalation_time %>">?</span><% end %>
-</div>
+</small>

app/assets/stylesheets/zzz.css.erb

@@ -5,6 +5,11 @@ body {
   background: #2c2d36;
 }
 
+small {
+  color: #c6c6c5;
+  font-size: 12px;
+}
+
 .highlight {
   color: hsl(202,68%,54%);
 }
@@ -2352,10 +2357,9 @@ footer {
       text-align: center;
     }
 
-  .task-meta {
+  .task-subline {
-    color: #c6c6c5;
-    font-size: 12px;
     text-align: center;
+    display: block;
   }
 
 .bubble-grid {
@@ -2378,9 +2382,50 @@ footer {
     margin-bottom: 33px;
   }
 
+  .article-content {
+    margin-right: 55px;
+  }
+
+    .customer.ticket-article-item .article-content {
+      margin-right: 0;
+      margin-left: 55px;
+    }
+
+  .article-meta {
+    background: #2c2d36;
+    color: white;
+    padding: 21px 25px 11px;
+    margin: 0 12px;
+  }
+
+    .article-meta.bottom {
+      padding-top: 17px;
+      padding-bottom: 8px;
+    }
+
+    .article-meta-row {
+      margin-bottom: 5px;
+    }
+
+    .article-meta-key {
+      width: 13%;
+      text-transform: uppercase;
+    }
+
+    .article-meta-value {
+      margin-left: 8px;
+    }
+
+    .article-meta .icon {
+      vertical-align: bottom;
+    }
+
+    .article-meta .text-muted {
+      color: #96969b;
+    }
+
   .text-bubble {
     padding: 10px 20px;
-    margin-right: 55px;
     white-space: pre-wrap;
     background: white;
     border-radius: 5px;
@@ -2391,8 +2436,6 @@ footer {
 
   .customer.ticket-article-item .text-bubble {
     background: #e5f0f5;
-    margin-right: 0;
-    margin-left: 55px;
     border-color: hsl(199,38%,92%);
     box-shadow: none;
   }
@@ -2470,10 +2513,12 @@ footer {
       box-shadow: none;
     }
 
-  .ticket-article-item .task-meta {
+  .ticket-article-item .task-subline {
     margin-top: 12px;
+  }
+
+  .article-actions {
     text-align: center;
-    display: block;
   }
 
 .ticket-edit {