From 63556b2d452989037b07fcd4218f634d1fa834cb Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 8 Jul 2014 16:36:40 +0200
Subject: [PATCH] make both sidebar and main scrollable independently

---
 .../lib/app_post/interface_handle.js.coffee   |  2 +-
 app/assets/stylesheets/zzz.css.erb            | 41 ++++++++++++++-----
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/app/lib/app_post/interface_handle.js.coffee b/app/assets/javascripts/app/lib/app_post/interface_handle.js.coffee
index 1f57e568b..a9804ad2d 100644
--- a/app/assets/javascripts/app/lib/app_post/interface_handle.js.coffee
+++ b/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 stretch'
 
   constructor: ->
     super
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 24bf97f68..5ae01fbb7 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -1190,13 +1190,13 @@ footer {
   }
 
 .search {
-  padding: 10px;
+  padding: 10px 15px 10px 10px;
   border-bottom: 1px solid rgba(240, 250, 255, .05);
 }
 
 .search input {
   padding: 5px 10px 5px 33px;
-  margin-right: 10px;
+  margin-right: 15px;
   width: 100px;
   height: 30px;
   color: #ECECEC;
@@ -1207,11 +1207,18 @@ footer {
   border-radius: 15px;
 }
 
+.search .logo {
+  cursor: pointer;
+}
+
+.navbar_l2 {
+  overflow: hidden;
+  height: 100%;
+}
+
 .sidebar {
   width: 270px;
-  min-height: 100%;
-  height: 100%;
-  padding: 1px 20px;
+  padding: 1px 20px 20px;
   background: white;
   border-right: 1px solid #e6e6e6;
   overflow: auto;
@@ -1221,22 +1228,26 @@ footer {
     margin-top: 0;
   }
 
-  .nav-stacked > li:first-child a {
-    border-top: 1px solid #f2f2f3;
+  .nav-stacked > li:last-child a {
+    border-bottom: 1px solid #f2f2f3;
   }
 
   .nav-pills > li > a {
     color: #0f94d6;
     border-radius: 0;
-    padding: 8px 10px;
-    margin-left: -10px;
-    border-bottom: 1px solid #f2f2f3;
+    padding: 8px 0;
+    border-top: 1px solid #f2f2f3;
   }
 
   .nav-pills > li:hover > a {
     background: #f2f2f3;
   }
 
+  .nav-pills > li:hover > a,
+  .nav-pills > li:hover + li > a {
+    border-color: transparent;
+  }
+
   .nav-pills > li.active > a,
   .nav-pills > li.active > a:hover,
   .nav-pills > li.active > a:focus {
@@ -1244,6 +1255,16 @@ footer {
     background: #2c2d36;
   }
 
+  .nav-pills > li:hover > a,
+  .nav-pills > li.active > a,
+  .nav-pills > li.active > a:hover,
+  .nav-pills > li.active > a:focus {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+
 .main {
   padding: 10px 20px;
   background: #f8f9fa;