ticket zoom basic layout

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

@@ -1,7 +1,11 @@
 <div class="main flex">
 
-  <div class="page-header ticket-zoom">
+  <div class="page-header ticket-zoom horizontal">
-    <h1 class="ticket-title"></h1>
+    <div class="flex vertical center">
+      <div class="big avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
+      <div class="ticket-title"></div>
+      <div class="task-meta">ID #10098 - Dienstag, <time datetime="2014-01-07T15:26:31">07. Januar 2014 um 15:26</time></div>
+    </div>
     <div class="page-header-meta">
       <% if @C( 'LastOverview' ) && @nav: %>
         <div class="pull-right">
@@ -17,6 +21,7 @@
   </div>
 
 <div class="ticket-article"></div>
+
 <div class="ticket-edit"></div>
   
 </div>

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

@@ -1,41 +1,11 @@
 <% for article in @articles: %>
-<div class="horizontal ticket-article-item <% if article.internal is true: %> internal<% end %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
+<div class="ticket-article-item <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
-  <div class="avatar">
+  <div class="horizontal<%= ' reverse' if article.sender.name is 'Customer' %>">
-    <img class="thumbnail user-popover" data-id="<%= article.created_by_id %>" src="<%= article.created_by.image %>" alt="">
+    <div class="avatar" style="background-image: url(<%= article.created_by.image %>)"></div>
-    <ul>
+    <div class="flex">
-      <li style="font-size: 10px;"><%- @T(article.type.name) %></li>
+      <div class="article-message"><div class="article-message-arrow"></div><%- article.html %></div>
-      <% 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>
-    </ul>
-  </div>
-  <div class="ticket-article-message flex">
-    <% if article.from: %>
-      <strong title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%= article.from %></strong>
-      <% if article.actions: %>
-        <% 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 %>
-      <% end %>
-     - <span class="humanTimeFromNow" data-time="<%- article.created_at %>">?</span>
-    <% end %>
-    <% if article.to: %>
-      <div title="<%- @Ti( 'To' ) %>: <%= article.to %>"><%= article.to %></div>
-    <% end %>
-    <% if article.cc: %>
-      <div title="<%- @Ti( 'Cc' ) %>: <%= article.cc %>"><%= article.cc %></div>
-    <% end %>
-    <% if article.subject: %>
-      <div title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>"><%= article.subject %></div>
-    <% end %>
-    <% if article.attachments: %>
-      <div>
-      <% for attachment in article.attachments: %>
-        <a href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= article.ticket_id %>/<%= article.id %>/<%= attachment.id %>" target="_blank" data-type="attachment" class="attachment" title="<%= attachment.size %>"><%= attachment.filename %></a>
-      <% end %>
-      </div>
-    <% end %>
-    <div style="white-space:pre-wrap;" class="message"><%- article.html %></div>
   </div>
+  <time class="task-meta humanTimeFromNow" datetime="<%- article.created_at %>" data-time="<%- article.created_at %>">?</time>
 </div>
-<hr>
 <% end %>

app/assets/stylesheets/zzz.css.erb

@@ -1382,36 +1382,6 @@ footer {
   }
 }
 
-.message {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-
-.ticket-update {
-  width: 100%;
-}
-.ticket-update .span2 {
-  width: 152px;
-  margin-right: 4px;
-}
-.ticket-update .medium {
-  width: 160px;
-}
-
-.ticket-article .avatar {
-  width: 80px;
-}
-
-.ticket-article .avatar ul {
-  margin-left: -22px;
-}
-
-.ticket-article-item {
-  min-height: 100px;
-}
-
-
 .show_toogle {
   font-size: 10px;
   line-height: 12px;
@@ -1991,6 +1961,11 @@ footer {
   vertical-align: bottom;
 }
 
+  .big.avatar {
+    width: 50px;
+    height: 50px;
+  }
+
 .sidebar {
   width: 32%;
   max-width: 353px;
@@ -2000,6 +1975,11 @@ footer {
   overflow: auto;
 }
 
+  .main + .sidebar {
+    border-right: none;
+    border-left: 1px solid #e6e6e6;
+  }
+
 .NavBarAdmin.sidebar {
   padding-top: 1px;
   width: 270px;
@@ -2332,6 +2312,100 @@ footer {
             appearance: none;
   }
 
+.ticket-zoom {
+  margin-top: 52px;
+  margin-bottom: 46px;
+  border-bottom: none;
+}
+
+  .ticket-title {
+    max-width: 400px;
+  }
+
+    .ticket-title h1 {
+      margin-top: 15px;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+  .task-meta {
+    color: #c6c6c5;
+    font-size: 12px;
+  }
+
+.ticket-article-item {
+  max-width: 800px;
+  margin: 33px auto;
+}
+
+  .ticket-article-item .avatar {
+    margin: 0 15px;
+  }
+
+  .article-message {
+    padding: 10px 20px;
+    margin-right: 70px;
+    white-space: pre-wrap;
+    background: white;
+    border-radius: 5px;
+    border: 1px solid hsl(240,4%,95%);
+    box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
+    position: relative;
+  }
+
+  .customer.ticket-article-item .article-message {
+    background: #e5f0f5;
+    margin-right: 0;
+    margin-left: 70px;
+    border-color: hsl(199,38%,92%);
+    box-shadow: none;
+  }
+
+    .article-message-arrow {
+      position: absolute;
+      width: 7px;
+      height: 9px;
+      left: -6px;
+      top: 15px;
+      overflow: hidden;
+    }
+    
+    .article-message-arrow:after {
+      content: "";
+      position: absolute;
+      top: -1px;
+      left: 2px;
+      width: 11px;
+      height: 11px;
+      background: white;
+      border: 1px solid hsl(240,4%,95%);
+      box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
+      transform: rotate(-45deg);
+    }
+
+    .customer.ticket-article-item .article-message-arrow {
+      left: auto;
+      right: -6px;
+    }
+
+    .customer.ticket-article-item .article-message-arrow:after {
+      background: #e5f0f5;
+      left: auto;
+      right: 2px;
+      border-color: hsl(199,38%,92%);
+      box-shadow: none;
+    }
+
+  .ticket-article-item .task-meta {
+    margin-top: 12px;
+    text-align: center;
+    display: block;
+  }
+
+.ticket-edit {
+  display: none;
+}
+
 /* 
 
   ----------------