Merge pull request #309 from okfn/309-expand-content-when-sidebar-empty

Expand main content view if sidebar is empty

css/flotr2.css

@@ -14,7 +14,6 @@
 
 .recline-graph .graph .alert {
   width: 450px;
-  margin: auto;
 }
 
 .flotr-mouse-value {

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 {
+.recline-transform {
-  margin-right: 10px;
+    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/backend.ckan.js

@@ -76,7 +76,7 @@ this.recline.Backend.Ckan = this.recline.Backend.Ckan || {};
       actualQuery.sort = _tmp.join(',');
     }
     return actualQuery;
-  }
+  };
 
   my.query = function(queryObj, dataset) {
     if (dataset.endpoint) {
@@ -92,7 +92,7 @@ this.recline.Backend.Ckan = this.recline.Backend.Ckan || {};
     jqxhr.done(function(results) {
       var out = {
         total: results.result.total,
-        hits: results.result.records,
+        hits: results.result.records
       };
       dfd.resolve(out);  
     });
@@ -116,7 +116,7 @@ this.recline.Backend.Ckan = this.recline.Backend.Ckan || {};
         dataType: 'json'
       });
       return jqxhr;
-    }
+    };
 
     return that;
   };
@@ -130,7 +130,7 @@ this.recline.Backend.Ckan = this.recline.Backend.Ckan || {};
     return {
       resource_id: parts[len-1],
       endpoint: parts.slice(0,[len-4]).join('/') + '/api'
-    }
+    };
   };
 
   var CKAN_TYPES_MAP = {

src/view.graph.js

@@ -2,4 +2,3 @@ this.recline = this.recline || {};
 this.recline.View = this.recline.View || {};
 this.recline.View.Graph = this.recline.View.Flot;
 this.recline.View.GraphControls = this.recline.View.FlotControls;
-

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

src/widget.fields.js

@@ -38,7 +38,7 @@ my.Fields = Backbone.View.extend({
             </small> \
           </h4> \
         </div> \
-        <div id="collapse{{id}}" class="accordion-body collapse in"> \
+        <div id="collapse{{id}}" class="accordion-body collapse"> \
           <div class="accordion-inner"> \
             {{#facets}} \
             <div class="facet-summary" data-facet="{{id}}"> \
@@ -57,9 +57,6 @@ my.Fields = Backbone.View.extend({
     </div> \
   ',
 
-  events: {
-    'click .js-show-hide': 'onShowHide'
-  },
   initialize: function(model) {
     var self = this;
     this.el = $(this.el);
@@ -77,6 +74,7 @@ my.Fields = Backbone.View.extend({
       self.model.getFieldsSummary();
       self.render();
     });
+    this.el.find('.collapse').collapse();
     this.render();
   },
   render: function() {
@@ -91,25 +89,7 @@ my.Fields = Backbone.View.extend({
     });
     var templated = Mustache.render(this.template, tmplData);
     this.el.html(templated);
-    this.el.find('.collapse').collapse('hide');
-  },
-  onShowHide: function(e) {
-    e.preventDefault();
-    var $target  = $(e.target);
-    // weird collapse class seems to have been removed (can watch this happen
-    // if you watch dom) but could not work why. Absence of collapse then meant
-    // we could not toggle.
-    // This seems to fix the problem.
-    this.el.find('.accordion-body').addClass('collapse');;
-    if ($target.text() === '+') {
-      this.el.find('.collapse').collapse('show');
-      $target.text('-');
-    } else {
-      this.el.find('.collapse').collapse('hide');
-      $target.text('+');
-    }
   }
 });
 
 })(jQuery, recline.View);
-