From f5ed9b765f90958952e29a5390e060d92c3c0302 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Thu, 7 Aug 2014 01:17:26 +0200
Subject: [PATCH] ticket zoom improvements

---
 .../javascripts/app/views/ticket_zoom.jst.eco | 49 ++++++++++---------
 app/assets/stylesheets/zzz.css.erb            | 35 ++++++++-----
 2 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
index 21dc89684..6186125d2 100644
--- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
@@ -1,29 +1,30 @@
-<div class="main flex no-padding">
+<div class="main flex relative no-padding">
+  <div class="flex-overflow vertical">
+    <div class="page-header ticket-zoom horizontal">
+      <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">
+            <span class="pagination-count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
+            <% base_url ="#ticket/view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
+            <ul class="pagination pagination-sm">
+              <li class="<% if @C('LastOverviewPosition') <= 1: %>disabled<% end %>"><a href="<%- base_url %>previous" title="<%- @Ti( 'previous Ticket in Overview' ) %>">«</a></li>
+              <li class="<% if @C('LastOverviewPosition') is @C('LastOverviewTotal'): %>disabled<% end %>"><a href="<%- base_url %>next" title="<%- @Ti( 'next Ticket in Overview' ) %>">»</a></li>
+            </ul>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="ticket-article"></div>
+
+    <div class="ticket-edit"></div>
 
-  <div class="page-header ticket-zoom horizontal">
-    <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">
-          <span class="pagination-count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
-          <% base_url ="#ticket/view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
-          <ul class="pagination pagination-sm">
-            <li class="<% if @C('LastOverviewPosition') <= 1: %>disabled<% end %>"><a href="<%- base_url %>previous" title="<%- @Ti( 'previous Ticket in Overview' ) %>">«</a></li>
-            <li class="<% if @C('LastOverviewPosition') is @C('LastOverviewTotal'): %>disabled<% end %>"><a href="<%- base_url %>next" title="<%- @Ti( 'next Ticket in Overview' ) %>">»</a></li>
-          </ul>
-        </div>
-      <% end %>
-    </div>
   </div>
-
-<div class="ticket-article"></div>
-
-<div class="ticket-edit"></div>
-  
 </div>
 
 <div class="sidebar">
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 06467cb81..8c6cc33e4 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -2295,10 +2295,10 @@ footer {
 
   .form-inline .form-control {
     margin: 0 10px;
-    display: block;
     padding: 0 0 2px;
-    float: none;
     height: auto;
+    float: none;
+    display: block;
     border-radius: 0;
     -webkit-appearance: none;
        -moz-appearance: none;
@@ -2330,10 +2330,16 @@ footer {
 .bubble-grid {
   max-width: 800px;
   margin: 0 auto;
+  padding: 0 21px;
 }
 
   .bubble-grid .avatar {
-    margin: 0 15px;
+    margin-right: 15px;
+  }
+
+  .customer.ticket-article-item .avatar {
+    margin-right: 0;
+    margin-left: 15px;
   }
 
   .ticket-article-item {
@@ -2367,11 +2373,18 @@ footer {
   }
 
     .edit textarea {
+      width: 100%;
+      height: 38px;
+      padding: 10px 20px;
+      vertical-align: bottom;
       border: none;
       background: none;
-      padding: 10px 20px;
       outline: none;
-      height: 38px;
+      transition: 500ms;
+    }
+
+    .edit textarea:focus {
+      height: 105px;
     }
 
     .edit textarea:focus + .bubble-placeholder {
@@ -2432,14 +2445,14 @@ footer {
     display: block;
   }
 
-.edit-ticket-properties {
-  margin-top: 36px;
-  background: white;
+.ticket-edit {
+  margin-top: auto;
 }
 
-.sidebar {
-  display: none;
-}
+  .edit-ticket-properties {
+    margin-top: 37px;
+    background: white;
+  }
 
 /*