improvements to sidebar open-close interaction, changed to percent width for sidebar

Author: marcgurney

scout-ui/src/home/collection.jade

@@ -8,17 +8,17 @@
       .col-md-6
         div(data-hook='stats-subview')
   div(data-hook='refine-bar')
-  .column-container
+  .column-container(data-hook='json-sidebar-toggle-class')
     .column.main
       div(data-hook='fields-subview')
     .splitter
-      button.btn.btn-link.splitter-button
+      button.btn.btn-link.splitter-button.splitter-button-open
         i.fa.fa-caret-left
         | 
         i.fa.fa-file-text-o
-      button.btn.btn-link.splitter-button.hidden
+      button.btn.btn-link.splitter-button.splitter-button-close
         i.fa.fa-file-text-o
         | 
         i.fa.fa-caret-right
-    .column.side(data-hook='collection-side')
+    .column.side
       div(data-hook='documents-subview')

scout-ui/src/home/collection.js

@@ -29,8 +29,8 @@ module.exports = AmpersandView.extend({
     },
     'open': {
       type: 'booleanClass',
-      yes: 'is-open',
-      hook: 'collection-side'
+      yes: 'sidebar-open',
+      hook: 'json-sidebar-toggle-class'
     }
   },
   children: {

scout-ui/src/home/index.less

@@ -116,17 +116,15 @@
     font-size: 11px;
     border-left: 2px solid @gray7;
     right: -12px;
-
-    &.is-open {
-      width: 400px;
-    }
+    top: 30px;
   }
 
   .splitter {
     width: 20px;
     height: 20px;
     position: relative;
-    right: 20px;
+    right: 10px;
+    transition: right 250ms ease;
   }
   .splitter-button {
     outline: none;
@@ -141,5 +139,22 @@
       color: @green2;
     }
   }
+  .splitter-button-close {
+    display: none;
+  }
+  .column-container.sidebar-open {
+    .side {
+      width: 33%;
+    }
+    .splitter {
+      right: -15px;
+    }
+    .splitter-button-open {
+      display: none;
+    }
+    .splitter-button-close {
+      display: inline-block;
+    }
+  }
 }
 

scout-ui/src/object-tree/index.less

@@ -22,6 +22,9 @@
 
   font-family: @font-family-monospace;
   font-size: 11px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid @gray7;
 
   .jsobject {
     margin-left: 8px;

scout-ui/src/object-tree/jsobject-view.jade

@@ -1,2 +1,2 @@
-.jsobject
+.jsobject.clearfix
   div(data-hook='members-container')