Merge pull request #4946 from Bargs/3833-collapsible-visualize-left-p…

…anel Fixes #3833 make Visualize sidebar collapsible
elastic · Sep 16, 2015 · a03b36d · a03b36d
2 parents f003c3a + d8b0658
commit a03b36d
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/plugins/kibana/public/visualize/editor/editor.html b/src/plugins/kibana/public/visualize/editor/editor.html
@@ -126,7 +126,9 @@
 
   <div class="vis-editor-content">
 
-    <vis-editor-sidebar class="vis-editor-sidebar" ng-if="chrome.getVisible()"></vis-editor-sidebar>
+    <div class="collapsible-sidebar">
+        <vis-editor-sidebar class="vis-editor-sidebar" ng-if="chrome.getVisible()"></vis-editor-sidebar>
+    </div>
 
     <div class="vis-editor-canvas" ng-class="{ embedded: !chrome.getVisible() }">
       <div class="visualize-info" ng-if="savedVis.id">

diff --git a/src/plugins/kibana/public/visualize/editor/editor.js b/src/plugins/kibana/public/visualize/editor/editor.js
@@ -6,6 +6,7 @@ define(function (require) {
 
   require('ui/visualize');
   require('ui/clipboard');
+  require('ui/collapsible_sidebar');
 
   require('ui/routes')
   .when('/visualize/create', {

diff --git a/src/plugins/kibana/public/visualize/editor/styles/_editor.less b/src/plugins/kibana/public/visualize/editor/styles/_editor.less
@@ -64,8 +64,12 @@
     }
   }
 
-  &-sidebar {
+  .collapsible-sidebar {
     .flex-parent(0, 0, auto);
+  }
+
+  &-sidebar {
+    .flex-parent(1, 0, auto);
 
     // overrided for tablet and desktop
     @media (min-width: @screen-md-min) {

diff --git a/src/ui/public/collapsible_sidebar/collapsible_sidebar.less b/src/ui/public/collapsible_sidebar/collapsible_sidebar.less
@@ -1,6 +1,6 @@
 @import (reference) "~ui/styles/variables";
 
-.sidebar-container.collapsible-sidebar {
+.collapsible-sidebar {
   position: relative;
   z-index: 1;
 
@@ -61,7 +61,7 @@
 }
 
 @media (max-width: 992px) {
-  .sidebar-container.collapsible-sidebar {
+  .collapsible-sidebar {
     &.closed {
       display: none;
     }