COMPASS 298: Make all collection headers fixed position (#577)

COMPASS-298: Make all collection headers fixed position

Author: Sean-Oh

src/app/home/index.less

@@ -62,8 +62,8 @@
 .collection-view {
   header {
     padding: 12px 0 0;
-    position: relative;
-    z-index: 1;
+    position: fixed;
+    z-index: 4;
     background: @pw;
     .row {
       margin-left: 0;
@@ -94,6 +94,10 @@
     }
   }
 
+  .header-margin {
+    margin-top: 154px; // size of header
+  }
+
   .column {
     overflow: auto;
     height: auto;

src/internal-packages/crud/lib/component/document-list.jsx

@@ -236,7 +236,7 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <div>
+      <div className="header-margin">
         <this.samplingMessage insertHandler={this.handleOpenInsert.bind(this)} />
         <div className="column-container with-refinebar-and-message">
           <div className="column main">

src/internal-packages/explain/lib/components/compass-explain.jsx

@@ -35,7 +35,7 @@ class CompassExplain extends React.Component {
    */
   render() {
     return (
-      <div className="compass-explain">
+      <div className="compass-explain header-margin">
         <div className="flexbox-fix"></div>
         <div className="column-container with-refinebar">
           <div className="column main">

src/internal-packages/indexes/lib/component/indexes.jsx

@@ -16,7 +16,7 @@ class Indexes extends React.Component {
    */
   render() {
     return (
-      <div className="index-container">
+      <div className="index-container header-margin">
         <div className="flexbox-fix"></div>
         <div className="column-container">
           <div className="column main">

src/internal-packages/schema/lib/component/index.jsx

@@ -82,7 +82,7 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div>
+      <div className="header-margin">
         <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
         <div className="column-container with-refinebar-and-message">
           <div className="column main">

src/internal-packages/validation/lib/components/validation.jsx

@@ -62,7 +62,7 @@ class Validation extends React.Component {
       this.props.viewMode : 'JSON';
 
     return (
-      <div className="validation">
+      <div className="validation header-margin">
         <Grid fluid>
           <StatusRow>
             <ViewSwitcher