From 97e5774631951e7bee84925b05bd233494e901d3 Mon Sep 17 00:00:00 2001
From: Piotr Sarnacki <drogus@gmail.com>
Date: Sat, 3 Nov 2012 23:09:37 +0100
Subject: [PATCH] Fix hiccups with long log views

When scrolling page with long log page was freezing for a moment on
every DOM update (which means at least for a second as we update
duration every second). This was caused by unnecassery reflows - the
main offender was display: box (flexible layout model). It turns out
that newer version of flexible layout, display: flex, behaves much
better. It works on newest versions of Chrome, Safari and on next
version of Opera. Unfortunately Firefox will support it in 18th version,
so I left rules with -moz prefixes for old flexible page model
---
 assets/styles/layout.sass | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/assets/styles/layout.sass b/assets/styles/layout.sass
index 316c5d19..d896364e 100644
--- a/assets/styles/layout.sass
+++ b/assets/styles/layout.sass
@@ -2,16 +2,23 @@
 
 $left-width: 250px
 
+@mixin display-flex
+  display: -webkit-flex
+  display: flex
+
+@mixin flex($grow, $shrink, $size)
+  -webkit-flex: $grow $shrink $size
+  flex:         $grow $shrink $size
+
 html, body
   height: 100%
 
 .application
   width: 100%
   min-height: 100%
-  @include display-box
-  @include box-orient(horizontal)
-  @include box-align(stretch)
   margin-top: 40px
+  @include display-flex
+  display: -moz-box
 
 #top
   position: absolute
@@ -22,11 +29,12 @@ html, body
   z-index: 1000
 
 #left, #right
-  @include box-flex(0)
   position: relative
   min-height: 100%
+  -moz-box-flex: 0
 
 #left
+  @include flex(1, 1, 30%)
   min-width: 250px
   max-width: 380px
   width: -webkit-calc(100% - 1000px)
@@ -40,13 +48,15 @@ html, body
     max-width: 300px
 
 #main
-  @include box-flex(4)
+  @include flex(1, 1, 70%)
+  -moz-box-flex: 4
   position: relative
   overflow: hidden
   min-width: 630px
   padding: 20px 40px 80px 30px
 
 #right
+  @include flex(1, 1, 0)
   width: 205px
   padding: 11px 20px 80px 20px
   background-color: $color-bg-right