Hide the sidebar if it's empty.

When updating the view check to see if the sidebar
contains any visible children elements. If not,
hide it.

css/graph.css

@@ -14,7 +14,6 @@
 
 .recline-graph .graph .alert {
   width: 450px;
-  margin: auto;
 }
 
 .flotr-mouse-value {
@@ -34,4 +33,4 @@
 
 .flotr-legend-color-box {
     padding: 5px;
-}
+}

css/grid.css

@@ -193,4 +193,3 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
 .recline-read-only a.row-header-menu {
   display: none;
 }
-

css/multiview.css

@@ -1,6 +1,5 @@
 .recline-data-explorer .data-view-container {
   display: block;
-  margin-right: 225px;
 }
 
 .recline-data-explorer .data-view-sidebar {

css/transform.css

@@ -1,11 +1,14 @@
-.recline-transform .script {
-  margin-right: 10px;
+.recline-transform {
+    overflow: hidden;
 }
 
 .recline-transform .script textarea {
   width: 100%;
   height: 100px;
   font-family: monospace;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .recline-transform h2 {
@@ -17,10 +20,6 @@
   margin-top: -2px;
 }
 
-.recline-transform .preview {
-  margin-right: 10px;
-}
-
 .expression-preview-parsing-status {
   color: #999;
 }
@@ -36,4 +35,3 @@
 .recline-transform .before-after .after.different {
   font-weight: bold;
 }
-

src/view.graph.js

@@ -91,7 +91,7 @@ my.Graph = Backbone.View.extend({
     // check we have something to plot
     if (this.state.get('group') && this.state.get('series')) {
       // faff around with width because flot draws axes *outside* of the element width which means graph can get push down as it hits element next to it
-      this.$graph.width(this.el.width() - 20);
+      this.$graph.width(this.el.width() - 240);
       var series = this.createSeries();
       var options = this.getGraphOptions(this.state.attributes.graphType);
       this.plot = Flotr.draw(this.$graph.get(0), series, options);

src/view.multiview.js

@@ -203,6 +203,7 @@ my.MultiView = Backbone.View.extend({
     } else {
       this.updateNav(this.pageViews[0].id);
     }
+    this._showHideSidebar();
 
     this.model.bind('query:start', function() {
         self.notify({loader: true, persist: true});
@@ -280,6 +281,20 @@ my.MultiView = Backbone.View.extend({
 
   },
 
+  // hide the sidebar if empty
+  _showHideSidebar: function() {
+    var $dataSidebar = this.el.find('.data-view-sidebar');
+    var visibleChildren = $dataSidebar.children().filter(function() {
+      return $(this).css("display") != "none";
+    }).length;
+
+    if (visibleChildren > 0) {
+      $dataSidebar.show();
+    } else {
+      $dataSidebar.hide();
+    }
+  },
+
   updateNav: function(pageName) {
     this.el.find('.navigation a').removeClass('active');
     var $el = this.el.find('.navigation a[data-view="' + pageName + '"]');
@@ -310,6 +325,7 @@ my.MultiView = Backbone.View.extend({
     e.preventDefault();
     var action = $(e.target).attr('data-action');
     this['$'+action].toggle();
+    this._showHideSidebar();
   },
 
   _onSwitchView: function(e) {
@@ -317,6 +333,7 @@ my.MultiView = Backbone.View.extend({
     var viewName = $(e.target).attr('data-view');
     this.updateNav(viewName);
     this.state.set({currentView: viewName});
+    this._showHideSidebar();
   },
 
   // create a state object for this view and do the job of