Removed not necessary markup.

app/assets/javascripts/app/controllers/_application_controller.js.coffee

@@ -462,14 +462,13 @@ class App.Controller extends Spine.Controller
 class App.ControllerPermanent extends App.Controller
   constructor: ->
     super
-    $('.content').hide()
-
+    $('.content').attr('style', 'display: none!important')
 
 class App.ControllerContent extends App.Controller
   constructor: ->
     super
-    $('.content').hide()
-    $('#content').show()
+    $('.content').attr('style', 'display: none!important')
+    $('#content').attr('style', 'display: flex!important')
     @navShow()
 
 class App.ControllerModal extends App.Controller

app/assets/javascripts/app/controllers/ticket_zoom.js.coffee

@@ -178,7 +178,7 @@ class App.TicketZoom extends App.Controller
     new ArticleView(
       ticket:             @ticket
       ticket_article_ids: @ticket_article_ids
-      el:                 @el.find('.article-view')
+      el:                 @el.find('.ticket-article')
       ui:                 @
     )
 
@@ -186,7 +186,7 @@ class App.TicketZoom extends App.Controller
     # show edit
     new Edit(
       ticket:     @ticket
-      el:         @el.find('.edit')
+      el:         @el.find('.ticket-edit')
       edit_form:  @edit_form
       task_key:   @task_key
       ui:         @
@@ -433,9 +433,9 @@ class Edit extends App.Controller
       if !@autosaveLast || ( diff && !_.isEmpty( diff ) )
         @autosaveLast = currentData
         @log 'notice', 'form hash changed', diff, currentData
-        @el.find('.ticket-edit').addClass('form-changed')
-        @el.find('.ticket-edit').find('.reset-message').show()
-        @el.find('.ticket-edit').find('.reset-message').removeClass('hide')
+        @el.find('.edit').addClass('form-changed')
+        @el.find('.edit').find('.reset-message').show()
+        @el.find('.edit').find('.reset-message').removeClass('hide')
         App.TaskManager.update( @task_key, { 'state': currentData })
     @interval( update, 3000, 'autosave' )
 

app/assets/javascripts/app/lib/app_post/browser.coffee

@@ -9,31 +9,31 @@ class App.Browser
     data = @detection()
 
     # disable Crome 13 and older
-    if data.browser == 'Chrome' && data.version <= 13
+    if data.browser == 'Chrome' && data.version <= 20
       @message(data)
       console.log('Browser not supported')
       return false
 
     # disable Firefox 9 and older
-    else if data.browser == 'Firefox' && data.version <= 9
+    else if data.browser == 'Firefox' && data.version <= 27
       @message(data)
       console.log('Browser not supported')
       return false
 
     # disable IE 8 and older
-    else if data.browser == 'Explorer' && data.version <= 8
+    else if data.browser == 'Explorer' && data.version <= 9
       @message(data)
       console.log('Browser not supported')
       return false
 
     # disable Safari 3 and older
-    else if data.browser == 'Safari' && data.version <= 3
+    else if data.browser == 'Safari' && data.version <= 6
       @message(data)
       console.log('Browser not supported')
       return false
 
     # disable Opera 10 and older
-    else if data.browser == 'Opera' && data.version <= 10
+    else if data.browser == 'Opera' && data.version <= 21
       @message(data)
       console.log('Browser not supported')
       return false

app/assets/javascripts/app/lib/app_post/interface_handle.js.coffee

@@ -47,7 +47,7 @@ class App.Run extends App.Controller
     App.Event.trigger( event + ':ready')
 
 class App.Content extends App.Controller
-  className: 'content flex'
+  className: 'content flex horizontal'
 
   constructor: ->
     super

app/assets/javascripts/app/lib/app_post/task_manager.js.coffee

@@ -151,7 +151,8 @@ class _taskManagerSingleton extends App.Controller
       $('#content').empty()
 
       # hide all tasks
-      $('.content').hide()
+      $('.content').attr('style', 'display: none!important')
+      #$('.content').hide()
       $('.content').removeClass('active')
 
     # create div for task if not exists
@@ -160,10 +161,12 @@ class _taskManagerSingleton extends App.Controller
 
     # set task to shown and active
     if @activeTask is key
-      $('#content_permanent_' + key ).show()
+      #$('#content_permanent_' + key ).show()
+      $('#content_permanent_' + key).attr('style', 'display: flex!important')
       $('#content_permanent_' + key ).addClass('active')
     else
-      $('#content_permanent_' + key ).hide()
+      #$('#content_permanent_' + key ).hide()
+      $('#content_permanent_' + key).attr('style', 'display: none!important')
       $('#content_permanent_' + key ).removeClass('active')
 
     # set all tasks to active false, only new/selected one to active

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

@@ -1,13 +1,12 @@
-<div class="horizontal">
-  <div class="sidebar">
+<div class="sidebar">
   <div class="widgets">
     <div class="customer_info"></div>
     <div class="ticket_template"></div>
     <div class="text_module"></div>
   </div>
-  </div>
+</div>
 
-  <div class="main flex">
+<div class="main flex">
 
   <div class="page-header">
     <h1><%- @T( 'New Ticket' ) %> <small>(<%- @T( @title ) %>)<% if @admin: %> <a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a><% end %></small></h1>
@@ -15,12 +14,11 @@
 
   <form class="form-horizontal form-large ticket-create">
     <input type="hidden" value="" name="article_type"/>
-      <div class="span9 ticket_create"></div>
+    <div class="ticket_create"></div>
     <div class="form-actions">
       <button type="reset" class="btn cancel"><%- @T( 'Cancel' ) %></button>&nbsp;<button type="submit" class="btn btn-primary submit"><%- @T( 'Create' ) %></button>
     </div>
   </form>
 
  </div>
-  </div>
 </div>

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

@@ -1,4 +1,2 @@
-<div class="horizontal">
-  <div class="sidebar"></div>
-  <div class="main flex"></div>
-</div>
+<div class="sidebar"></div>
+<div class="main flex"></div>

app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco

@@ -1,4 +1,4 @@
-<div class="page-header clearfix">
+<div class="page-header">
   <div class="page-header-title">
     <h1><%- @T( @overview.name ) %> <% if @edit: %><small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small><% end %></h1>
   </div>

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

@@ -1,10 +1,9 @@
-<div class="horizontal">
-  <div class="sidebar">
-  </div>
-  <div class="main flex">
+<div class="sidebar">
+</div>
+<div class="main flex">
 
   <div class="ticket-create">
-      <div class="page-header clearfix">
+    <div class="page-header">
       <div class="page-header-title">
         <h1 class="pull-left"><%- @T( 'New Ticket' ) %></h1>
       </div>
@@ -21,6 +20,4 @@
     </div>
   </div>
 
-  </div>
 </div>
-

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

@@ -1,8 +1,4 @@
-<div class="horizontal reverse">
-  <div class="activity sidebar">
-    <div class="side-overviews" id="sortable-sidebar"></div>
-  </div>
-  <div class="main flex center">
+<div class="main flex center">
   <div class="tabs wide-tabs horizontal">
     <div class="tab my-stats active">My Stats</div>
     <div class="tab my-groups">My Group</div>
@@ -122,5 +118,7 @@
 
   <div class="container-fluid main-overviews" id="sortable">
   </div>
-  </div>
+</div>
+<div class="activity sidebar">
+  <div class="side-overviews" id="sortable-sidebar"></div>
 </div>

app/assets/javascripts/app/views/dashboard/ticket.jst.eco

@@ -1,5 +1,5 @@
-  <div class="span9">
-    <div class="page-header clearfix">
+<div>
+  <div class="page-header">
     <div class="page-header-title">
       <h2 class="can-move"><%- @T( @overview.name ) %> <small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small></h2>
     </div>
@@ -28,4 +28,4 @@
     </div>
   </div>
   <div class="table-overview"></div>
-  </div>
+</div>

app/assets/javascripts/app/views/generic/admin/index.jst.eco

@@ -1,4 +1,4 @@
-<div class="page-header clearfix">
+<div class="page-header">
   <div class="page-header-title">
     <h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
   </div>

app/assets/javascripts/app/views/generic/admin_level2/index.jst.eco

@@ -1,5 +1,4 @@
-<div class="horizontal">
-  <div class="sidebar">
+<div class="sidebar">
 
   <ul class="nav nav-pills nav-stacked">
   <% if @menus: %>
@@ -9,13 +8,12 @@
   <% end %>
   </ul>
 
-  </div>
-  <div class="main flex">
+</div>
+<div class="main flex">
 
   <div class="page-header">
     <h1><%- @T( @page.head ) %> <small><%- @T( @page.sub_head ) %></small></h1>
   </div>
   <div class="nav-tab-content"></div>
 
-  </div>
 </div>

app/assets/javascripts/app/views/generic/content_two.jst.eco

@@ -1,6 +1,4 @@
-<div class="horizontal">
-  <div class="sidebar">
-  </div>
-  <div class="main flex">
-  </div>
+<div class="sidebar">
+</div>
+<div class="main flex">
 </div>

app/assets/javascripts/app/views/generic/content_two_title.jst.eco

@@ -1,10 +1,8 @@
-<div class="horizontal">
-  <div class="sidebar">
-  </div>
-  <div class="main flex">
+<div class="sidebar">
+</div>
+<div class="main flex">
   <div class="page-header">
     <h1><%- @T( @head ) %> <small><%- @T( @sub_head ) %></small></h1>
   </div>
   <div class="page-content"></div>
-  </div>
 </div>

app/assets/javascripts/app/views/generic/navbar_l2.jst.eco

@@ -1,5 +1,4 @@
-<div class="horizontal">
-  <div class="sidebar <%= @className %>">
+<div class="sidebar <%= @className %>">
 
   <% if @groups: %>
   <% for group in @groups: %>
@@ -14,6 +13,5 @@
   </ul>
   <% end %>
 
-  </div>
-  <div class="main flex"></div>
 </div>
+<div class="main flex"></div>

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

@@ -7,13 +7,13 @@
     </ol>
     <% if @master_user: %>
     <div class="master_user hero-left">
-      <form class="form-stacked clearfix" id="form-master">
+      <form class="form-stacked" id="form-master">
         <button type="submit" class="btn btn-primary submit pull-right"><%- @T( 'Next Step' ) %></button>
       </form>
     </div>
     <% end %>
     <div class="agent_user hero-left hide">
-      <form class="form-stacked clearfix" id="form-agent">
+      <form class="form-stacked" id="form-agent">
         <div class="form-controls">
           <button type="submit" class="btn btn-primary submit pull-right"><%- @T( 'Send Invitation' ) %></button>
         </div>

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

@@ -3,7 +3,7 @@
 </div>
 
 <div class="row">
-  <div class="span9">
+  <div class="">
   
 <% for network in @networks: %>
     <div class="row">

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

@@ -18,7 +18,6 @@
     </p>
   </div>
 
-  <div class="span9">
   <table class="table table-striped table-hover">
     <thead>
       <tr>
@@ -41,6 +40,5 @@
     <% end %>
     </tbody>
   </table>
-  </div>
 
 </div>

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

@@ -8,7 +8,7 @@
       <li><a href="#">Jobs</a></li>
     </ul>
   </div>
-  <div class="span9 table-overview">
+  <div class="table-overview">
   
     <div class="tabbable">
       <ul class="nav nav-tabs">

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

@@ -1,14 +1,7 @@
-<div class="horizontal">
-  <div class="sidebar">
-    <div class="widgets"></div>
-    <div class="action"></div>
-  </div>
-  <div class="main flex">
+<div class="main flex">
 
-    <div class="page-header ticket-zoom clearfix">
-      <div class="page-header-title">
-        <div class="ticket-title"></div>
-      </div>
+  <div class="page-header ticket-zoom">
+    <h1 class="ticket-title"></h1>
     <div class="page-header-meta">
       <% if @C( 'LastOverview' ) && @nav: %>
         <div class="pull-right">
@@ -23,11 +16,12 @@
     </div>
   </div>
 
-    <div class="ticket-answer">
-      <div class="article-view"></div>
-      <div class="edit"></div>
-    </div>
+<div class="ticket-article"></div>
+<div class="ticket-edit"></div>
 
-  </div>
 </div>
 
+<div class="sidebar">
+  <div class="widgets"></div>
+  <div class="action"></div>
+</div>

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

@@ -1,6 +1,5 @@
-<div class="ticket-article-view">
 <% for article in @articles: %>
-  <div class="ticket-article ticket-article-item <% if article.internal is true: %> internal<% end %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
+<div class="horizontal 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>
@@ -8,8 +7,7 @@
       <% 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 %>
     </ul>
   </div>
-    <div class="ticket-article-message">
-      <div class="ticket-article-meta">
+  <div class="ticket-article-message flex">
     <% if article.from: %>
       <strong title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%= article.from %></strong>
       <% if article.actions: %>
@@ -36,9 +34,8 @@
       <% end %>
       </div>
     <% end %>
-      </div>
     <div style="white-space:pre-wrap;" class="message"><%- article.html %></div>
   </div>
-  </div>
-<% end %>
 </div>
+<hr>
+<% end %>

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

@@ -1,9 +1,8 @@
-<div class="ticket-article-view">
-  <div class="ticket-article well ticket-edit <% if @formChanged: %>form-changed<% end %>">
+<div class="horizontal well 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="ticket-article-message flex">
     <div class="edit-title">
       <h4><%- @T('Edit') %>
       <small class="reset-message<% if !@formChanged: %> hide<% end %>">
@@ -19,5 +18,4 @@
       </form>
     <div>
   </div>
-  </div>
 </div>

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

@@ -9,7 +9,7 @@
       <li><a href="#">Actions</a></li>
     </ul>
   </div>
-  <div class="span9 table-overview">
+  <div class="table-overview">
   
     <div class="tabbable">
       <ul class="nav nav-tabs">

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

@@ -1,11 +1,10 @@
-<div class="horizontal">
-  <div class="sidebar">
+<div class="sidebar">
   <div class="widgets"></div>
   <div class="action"></div>
-  </div>
-  <div class="main flex">
+</div>
+<div class="main flex">
 
-    <div class="page-header user-zoom clearfix">
+  <div class="page-header user-zoom">
     <div class="page-header-title">
       <div class="ticket-title"></div>
     </div>
@@ -16,6 +15,4 @@
     <div class="edit"></div>
   </div>
 
-  </div>
 </div>
-

app/assets/stylesheets/zzz.css.erb

@@ -1200,41 +1200,6 @@ footer {
   }
 }
 
-.ticket-article-view {
-  max-width: 750px;
-}
-
-.ticket-article {
-  padding: 8px 0 6px 2px;
-  min-height: 116px;
-  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;
@@ -1252,6 +1217,18 @@ footer {
   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;