From 63556b2d452989037b07fcd4218f634d1fa834cb Mon Sep 17 00:00:00 2001 From: Felix Niklas 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;