diff --git a/src/components/dropzone.js b/src/components/dropzone.js index dbb5dbc..18815e2 100644 --- a/src/components/dropzone.js +++ b/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 diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 3289d0e..cd3bc67 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -294,8 +294,8 @@ class Visualization extends Component { } return ( -
-
+
+
{this.state.visualization.name} @@ -319,9 +319,9 @@ class Visualization extends Component { )}
-
+
{this.state.editing && -
+
diff --git a/src/styles/app.css b/src/styles/app.css index a806c08..f1972a0 100644 --- a/src/styles/app.css +++ b/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; -} +} \ No newline at end of file