From bf3fe114084d2f1a130ca85eda0441088dce93f3 Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Mon, 23 Sep 2013 00:07:11 +0200
Subject: [PATCH] Improved css for ticket zoom.

---
 .../app/controllers/ticket_zoom.js.coffee     |  6 +-
 .../views/ticket_zoom/article_view.jst.eco    | 48 +++++-----
 .../app/views/ticket_zoom/edit.jst.eco        | 40 ++++----
 app/assets/stylesheets/zzz.css                | 91 +++++++++----------
 4 files changed, 93 insertions(+), 92 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
index 537415ad3..5ddbd9ee4 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
@@ -424,9 +424,9 @@ class Edit extends App.Controller
       if !@autosaveLast || ( diff && !_.isEmpty( diff ) )
         @autosaveLast = currentData
         @log 'notice', 'form hash changed', diff, currentData
-        @el.find('.edit-ticket').addClass('form-changed')
-        @el.find('.edit-ticket').find('.reset-message').show()
-        @el.find('.edit-ticket').find('.reset-message').removeClass('hide')
+        @el.find('.ticket-edit').addClass('form-changed')
+        @el.find('.ticket-edit').find('.reset-message').show()
+        @el.find('.ticket-edit').find('.reset-message').removeClass('hide')
         App.TaskManager.update( @task_key, { 'state': currentData })
     @interval( update, 3000, 'autosave' )
 
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index f5a298c93..7c2e70eab 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -1,16 +1,16 @@
+<div class="ticket-article-view">
 <% for article in @articles: %>
-  <div class="article clearfix" data-id="<%= article.id %>" id="article-<%= article.id %>">
-    <div class="avatar thumbnails">
+  <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">
       <img class="thumbnail user-popover" data-id="<%= article.created_by_id %>" src="<%= article.created_by.image %>" alt="">
       <ul>
         <li style="font-size: 10px;"><%- @T(article.article_type.name) %></li>
         <% if article.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 %>
       </ul>
     </div>
-    <div class="article-message clearfix <% if article.internal is true: %> internal<% end %>">
-      <div class="article-content">
-      <% if article.from: %>
-        <div>
+    <div class="ticket-article-message">
+      <div class="ticket-article-meta">
+        <% if article.from: %>
           <strong title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%= article.from %></strong>
           <% if article.actions: %>
             <% for action in article.actions: %>
@@ -19,26 +19,26 @@
             <% end %>
           <% end %>
          - <span class="humanTimeFromNow" data-time="<%- article.created_at %>">?</span>
-        </div>
-      <% 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="" title="<%= attachment.size %>"><%= attachment.filename %></a>
         <% end %>
-        </div>
-      <% end %>
-      <div style="white-space:pre-wrap;" class=""><%- article.html %></div>
+        <% 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>
+      <div style="white-space:pre-wrap;" class="message"><%- article.html %></div>
     </div>
   </div>
 <% end %>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
index b66883d13..67cf27af3 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
@@ -1,21 +1,23 @@
-<div class="article clearfix">
-  <div class="avatar thumbnails">
-    <img class="thumbnail user-popover" data-id="<%= @S('id') %>" src="<%- @S('image') %>" alt="">
-  </div>
-  <div class="well edit-ticket article-message <% if @formChanged: %>form-changed<% end %>">
-    <div class="edit-title article-content">
-      <h4><%- @T('Edit') %>
-      <small class="reset-message<% if !@formChanged: %> hide<% end %>">
-        <a href="#" data-type="reset"><%- @T('Discard your unsaved changes.') %></a> <href="#" class="glyphicon glyphicon-repeat" data-type="reset"></a>
-      </small>
-      </h4>
+<div class="ticket-article-view">
+  <div class="ticket-article well ticket-edit <% if @formChanged: %>form-changed<% end %>">
+    <div class="avatar">
+      <img class="thumbnail user-popover" data-id="<%= @S('id') %>" src="<%- @S('image') %>" alt="">
+    </div>
+    <div class="ticket-article-message">
+      <div class="edit-title">
+        <h4><%- @T('Edit') %>
+        <small class="reset-message<% if !@formChanged: %> hide<% end %>">
+          <a href="#" data-type="reset"><%- @T('Discard your unsaved changes.') %></a> <href="#" class="glyphicon glyphicon-repeat" data-type="reset"></a>
+        </small>
+        </h4>
+      </div>
+      <div class="edit-content">
+        <form class="form-stacked ticket-update">
+          <div class="form-ticket-update"></div>
+          <div class="form-article-update"></div>
+          <button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
+        </form>
+      <div>
     </div>
-    <div class="edit-content">
-      <form class="form-stacked ticket-update">
-        <div class="form-ticket-update"></div>
-        <div class="form-article-update"></div>
-        <button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
-      </form>
-    <div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zzz.css b/app/assets/stylesheets/zzz.css
index e2c9642f4..bbbe66f83 100644
--- a/app/assets/stylesheets/zzz.css
+++ b/app/assets/stylesheets/zzz.css
@@ -602,10 +602,6 @@ form.form-inline input[type="password"] {
 }
 
 
-.edit-ticket {
-  padding: 4px 14px 10px;
-  width: 720px;
-}
 .edit {
 }
 .edit .form-group {
@@ -619,15 +615,11 @@ form.form-inline input[type="password"] {
   outline: 0;
 }
 .edit-title {
-
 }
 .edit-title small {
   font-size: 12px;
 }
-.edit-content {
-  margin-left: 68px;
-  margin-right: 22px;
-}
+
 
 .delete {
   background:url("../assets/close.png") no-repeat;
@@ -715,16 +707,57 @@ footer {
   }
 }
 
-.ticket-answer .avatar {
+.avatar {
   padding-left: 6px;
   padding-top: 4px;
   width: 70px;
   float: left;
 }
-.ticket-answer .avatar ul {
+.avatar ul {
   padding-left: 20px;
 }
 
+.ticket-article-view {
+  max-width: 750px;
+}
+
+.ticket-article {
+  padding: 8px 0 6px 2px;
+  min-height: 110px;
+  margin: 2px 0;
+}
+.ticket-article-item {
+  border-bottom: 1px solid #eeeeee;
+}
+.ticket-article-item:last-child {
+  border-bottom: none;
+}
+.ticket-article h4 {
+  margin-top: 2px;
+  margin-bottom: 6px;
+}
+.ticket-article.well {
+  padding: 4px 0 20px 2px;
+  margin-top: 4px;
+}
+.ticket-article-meta {
+  border-bottom: 1px solid #eeeeee;
+  padding-bottom: 10px;
+}
+.ticket-article-message {
+  padding-left: 6px;
+  padding-top: 4px;
+  margin-left: 70px;
+}
+.ticket-edit .ticket-article-message {
+  padding-right: 40px;
+}
+.message {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+
 .ticket-update {
   width: 100%;
 }
@@ -736,40 +769,6 @@ footer {
   width: 160px;
 }
 
-.article {
-  width: 100%;
-
-  margin-left: 0;
-  margin-top: 0;
-  margin-bottom: 10px;
-
-  padding-top: 0;
-  padding-bottom: 2px;
-  padding-right: 0;
-
-  border-bottom: 1px solid #eeeeee;
-}
-
-.article-content {
-  
-  margin-left: 70px;
-}
-.article-message {
-  padding: 4px 2px;
-/*
-  margin-top: 0;
-  margin-bottom: 6px;
-  margin-left: 10px;
-
-  padding-top: 10px;
-  padding-bottom: 8px;
-  padding-left: 10px;
-
-  margin-left: 70px;
-
-  min-height: 85px;
-*/
-}
 
 .show_toogle {
   font-size: 10px;
@@ -793,7 +792,7 @@ footer {
   background-color: #f2dede;
   border-color: #eed3d7;
   border: 1px solid #fbeed5;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .merged, .merge:hover {