From 2112e0844e3daa21fa39786b086afeb9d7688f6f Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 29 Sep 2014 11:08:51 +0200
Subject: [PATCH 1/6] style nav-tabs

---
 app/assets/stylesheets/zzz.css.erb | 43 ++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index a59ec7f82..a1376fa73 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -3473,6 +3473,49 @@ footer {
   margin: 0;
 }
 
+.nav-tabs {
+  border-bottom: none; 
+}
+
+.nav-tabs li {
+  margin: 0;
+}
+
+.nav-tabs > li > a,
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus {
+  background: white;
+  border-radius: 0;
+  border: 1px solid hsl(0,0%,90%);
+  color: hsl(0,0%,70%);
+  height: 40px;
+  margin: 0;
+}
+
+.nav-tabs > li:not(:last-child):not(:only-child) > a {
+  border-right: none;
+}
+
+.nav-tabs > li:first-child > a {
+  border-radius: 5px 0 0 5px;
+}
+
+.nav-tabs > li:last-child > a {
+  border-radius: 0 5px 5px 0;
+}
+
+.nav-tabs > li:only-child > a {
+  border-radius: 5px;
+}
+
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+  background: hsl(206,7%,28%);
+  color: white;
+  border: 1px solid hsl(0,0%,90%);
+}
+
 /*
 
   ----------------

From 8076f8344bb2d5f5ee7ed53c17c2c35710b93cff Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 29 Sep 2014 12:10:32 +0200
Subject: [PATCH 2/6] userSearch activate form-control

---
 app/assets/javascripts/app/views/user.jst.eco | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/app/views/user.jst.eco b/app/assets/javascripts/app/views/user.jst.eco
index cf6d9da72..4258db247 100644
--- a/app/assets/javascripts/app/views/user.jst.eco
+++ b/app/assets/javascripts/app/views/user.jst.eco
@@ -12,7 +12,7 @@
 </div>
 
 <div class="userSearch horizontal center">
-  <input type="text" class="js-search flex" name="search" placeholder="<%- @T('Search for users') %>">
+  <input type="text" class="js-search form-control flex" name="search" placeholder="<%- @T('Search for users') %>">
   <div class="userSearch-label"><%- @T('Filter') %>:</div>
   <div class="tabs tabs-wide horizontal">
     <% for role in @roles: %>

From 8abb6d4f2da0d3fb26c2e02978b707cfd0cae23b Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 29 Sep 2014 12:10:48 +0200
Subject: [PATCH 3/6] focus only form-control

---
 app/assets/stylesheets/zzz.css.erb | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index a1376fa73..88844ed34 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -441,15 +441,11 @@ textarea,
   outline: none;
 }
 
-  input[type=text]:focus,
-  input[type=password]:focus,
-  input[type=email]:focus,
-  textarea:focus {
+  .form-control:focus {
     border-color: hsl(200,71%,59%);
     box-shadow: 0 0 0 3px hsl(201,62%,90%);
   }
 
-  .form-control:focus,
   .tokenfield.focus {
     box-shadow: none;
     border-color: hsl(0,0%,90%);
@@ -3513,7 +3509,7 @@ footer {
 .nav-tabs > li.active > a:focus {
   background: hsl(206,7%,28%);
   color: white;
-  border: 1px solid hsl(0,0%,90%);
+  border-color: hsl(0,0%,90%);
 }
 
 /*

From f5a7c3c06cfc9ecc606a4f634a3a7652ed2da9e9 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 29 Sep 2014 12:17:31 +0200
Subject: [PATCH 4/6] less tabClose clickarea

---
 app/assets/stylesheets/zzz.css.erb | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 88844ed34..cb94beead 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -1615,7 +1615,6 @@ footer {
     right: 0;
     top: 0;
     width: 50px;
-    padding-left: 12px;
     height: 100%;
     visibility: hidden;
   }

From 0c3d3e63a6a137ee3558f6de104a93686143bbcf Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 29 Sep 2014 12:54:04 +0200
Subject: [PATCH 5/6] fix tabsSidebar overflow

by adding a tabsSidebar-holder to the parent element containing both the content and the sidebar
---
 .../app/views/agent_ticket_create.jst.eco     | 86 ++++++++++---------
 .../content_sidebar_tabs_right.jst.eco        | 28 +++---
 .../javascripts/app/views/ticket_zoom.jst.eco |  2 +-
 .../javascripts/app/views/user_zoom.jst.eco   |  2 +-
 app/assets/stylesheets/zzz.css.erb            |  6 ++
 5 files changed, 67 insertions(+), 57 deletions(-)

diff --git a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
index f6bccc058..067f3d155 100644
--- a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
+++ b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
@@ -1,49 +1,51 @@
-<div class="main no-padding flex tabsSidebarSpace">
-  <div class="newTicket">
-    <div class="box">
-      <div class="page-header">
-        <h1><%- @T( @head ) %></h1>
+<div class="tabsSidebar-holder">
+  <div class="main no-padding flex tabsSidebarSpace">
+    <div class="newTicket">
+      <div class="box">
+        <div class="page-header">
+          <h1><%- @T( @head ) %></h1>
+        </div>
+
+        <ul class="horizontal tabs type-tabs">
+
+          <li class="tab u-textTruncate" data-type="phone-in">
+            <div class="gray received-calls channel icon"></div>
+            <%- @T( 'Received Call' ) %>
+          </li>
+
+          <li class="tab u-textTruncate" data-type="phone-out">
+            <div class="gray outbound-calls channel icon"></div>
+            <%- @T( 'Outbound Call' ) %>
+          </li>
+
+         <li class="tab u-textTruncate" data-type="email-out">
+            <div class="gray email channel icon"></div>
+            <%- @T( 'Send E-Mail' ) %>
+          </li>
+        </ul>
+
+        <form role="form" class="ticket-create">
+          <input type="hidden" name="formSenderType"/>
+
+          <div class="ticket-form-top"></div>
+          <div class="article-form-top"></div>
+
+          <div class="formset-inset">
+            <div class="ticket-form-middle horizontal two-columns"></div>
+            <div class="ticket-form-bottom"></div>
+          </div>
+
+          <div class="form-actions horizontal">
+            <a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+            <button type="submit" class="btn btn--success submit align-right"><%- @T( 'Create' ) %></button>
+          </div>
+        </form>
       </div>
-
-      <ul class="horizontal tabs type-tabs">
-
-        <li class="tab u-textTruncate" data-type="phone-in">
-          <div class="gray received-calls channel icon"></div>
-          <%- @T( 'Received Call' ) %>
-        </li>
-
-        <li class="tab u-textTruncate" data-type="phone-out">
-          <div class="gray outbound-calls channel icon"></div>
-          <%- @T( 'Outbound Call' ) %>
-        </li>
-
-       <li class="tab u-textTruncate" data-type="email-out">
-          <div class="gray email channel icon"></div>
-          <%- @T( 'Send E-Mail' ) %>
-        </li>
-      </ul>
-
-      <form role="form" class="ticket-create">
-        <input type="hidden" name="formSenderType"/>
-
-        <div class="ticket-form-top"></div>
-        <div class="article-form-top"></div>
-
-        <div class="formset-inset">
-          <div class="ticket-form-middle horizontal two-columns"></div>
-          <div class="ticket-form-bottom"></div>
-        </div>
-
-        <div class="form-actions horizontal">
-          <a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button type="submit" class="btn btn--success submit align-right"><%- @T( 'Create' ) %></button>
-        </div>
-      </form>
     </div>
   </div>
-</div>
 
-<div class="tabsSidebar vertical"></div>
+  <div class="tabsSidebar vertical"></div>
+</div>
 <!--
 <div class="sidebar">
   <div class="widgets">
diff --git a/app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco b/app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco
index f2185e467..c2af4d756 100644
--- a/app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco
@@ -1,17 +1,19 @@
-<div class="main flex tabsSidebarSpace">
-  <h1>content</h1>
+<div class="tabsSidebar-holder flex horizontal">
+  <div class="main flex tabsSidebarSpace">
+    <h1>content</h1>
 
-  <p>
-Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
-  </p>
+    <p>
+  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
+    </p>
 
-  <p>
-Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
-  </p>
+    <p>
+  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
+    </p>
 
-  <p>
-Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
-  </p>
-</div>
+    <p>
+  Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+    </p>
+  </div>
 
-<div class="tabsSidebar vertical"></div>
\ No newline at end of file
+  <div class="tabsSidebar vertical"></div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
index 739702189..909b6de9a 100644
--- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
@@ -1,4 +1,4 @@
-<div class="flex vertical">
+<div class="tabsSidebar-holder flex vertical">
   <div class="flex u-positionOrigin horizontal">
     <div class="main no-padding flex tabsSidebarSpace">
       <div class="ticketZoom">
diff --git a/app/assets/javascripts/app/views/user_zoom.jst.eco b/app/assets/javascripts/app/views/user_zoom.jst.eco
index a04ed077b..ea1ca64a6 100644
--- a/app/assets/javascripts/app/views/user_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/user_zoom.jst.eco
@@ -1,4 +1,4 @@
-<div class="flex vertical">
+<div class="tabsSidebar-holder flex vertical">
   <div class="flex u-positionOrigin horizontal">
     <div class="main flex tabsSidebarSpace">
       <div class="userZoom">
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index cb94beead..dd04568c9 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -2375,6 +2375,7 @@ footer {
   }
 
     .ticket-title h1 {
+      max-width: 350px;
       margin-top: 15px;
       margin-bottom: 8px;
       text-align: center;
@@ -2839,6 +2840,11 @@ footer {
   margin-right: 0;
 }
 
+.tabsSidebar-holder {
+  overflow: hidden;
+  position: relative;
+}
+
 .tabsSidebar .sidebar {
   width: 280px;
   border-left: 1px solid #e6e6e6;

From 8c1449d023cdd25581a5cb95c7197829c752b318 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 29 Sep 2014 13:08:08 +0200
Subject: [PATCH 6/6] contenteditable refactor

---
 app/assets/stylesheets/zzz.css.erb | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index dd04568c9..cd9ff81c6 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -3440,19 +3440,19 @@ footer {
 }
 
 [contenteditable] {
+  margin: -1px;
   display: block;
   white-space: pre-wrap;
   outline-style: none;
-}
-[contenteditable]:hover, [contenteditable]:focus {
-  margin: -1px;
-  border: 1px dotted hsl(145,51%,45%);
+  border: 1px solid transparent;
   border-radius: 3px;
 }
+[contenteditable]:hover,
+[contenteditable]:focus {
+  border-color: hsl(145,51%,45%);
+}
 [contenteditable].invalid {
-  margin: -1px;
-  border: 1px dotted #F92;
-  border-radius: 3px;
+  border-color: #F92;
 }
 [contenteditable] > .placeholder {
   color: #999;