Merge branch 'css-positioning' into 'develop'

Vis area full cover

See merge request !2

src/components/dropzone.js

@@ -41,6 +41,7 @@ class Dropzone extends Component {
 
   render() {
     var toolboxClass = classNames({
+      'box-content': true,
       'toolbox-dropzone': true,
       'toolbox-dropzone-active': this.props.isOver && this.props.canDrop && this.props.editing,
       'toolbox-dropzone-editing': this.props.editing

src/containers/visualization.js

@@ -260,8 +260,8 @@ class Visualization extends Component {
     }
 
     return (
-      <div>
-        <div className='section-header'>
+      <div className='section box'>
+        <div className='section-header box-header'>
           <div className="section-title">
             <span>
               {this.state.visualization.name}
@@ -285,9 +285,9 @@ class Visualization extends Component {
           )}
         </div>
 
-        <div>
+        <div className="box box-content">
           {this.state.editing &&
-            <div className="toolbox">
+            <div className="toolbox box-header">
               <ToolboxItem name="Value" type="widget" />
               <ToolboxItem name="Plot" type="widget" />
               <ToolboxItem name="Table" type="widget" />

src/styles/app.css

@@ -14,9 +14,13 @@ body {
   background-color: #6EA2B0 !important;
 }
 
+#root {
+  height: 100vh;
+}
+
 .app {
   min-width: 800px;
-
+  height: 100%;
   color: #4d4d4d;
 
   font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -42,8 +46,10 @@ body {
 
 .app-footer {
   width: 100%;
-
-  margin-top: 20px;
+  height: 60px;
+  position: absolute;
+  bottom: 0px;
+  padding-top: 20px;
 
   text-align: center;
 
@@ -51,9 +57,14 @@ body {
 }
 
 .app-content {
+  position: absolute;
+  bottom: 0px;
+  top: 60px;
+  right: 0px;
+  left: 200px;
   min-height: 400px;
 
-  margin: 20px 20px 20px 200px;
+  margin: 20px 20px 60px 20px;
   padding: 15px 20px;
 
   background-color: #fff;
@@ -178,6 +189,27 @@ body {
 /**
  *  Sections
  */
+
+.box {
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+}
+
+.box-header {
+  -webkit-flex: 0 0 auto;
+  flex: 0 0 auto;
+}
+
+.box-content {
+  -webkit-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
+.section {
+  height: 100%;
+}
+
 .section-header div {
   display: inline-block;
   vertical-align: middle;
@@ -204,4 +236,4 @@ body {
 
 .section-header .glyphicon {
   font-size: 0.8em;
-}
+}