2 files changed, 89 insertions, 5 deletions

diff --git a/ui/app/components/layout/index.js b/ui/app/components/layout/index.js
index 8e7c4b58..b32961a7 100644
--- a/ui/app/components/layout/index.js
+++ b/ui/app/components/layout/index.js
@@ -4,7 +4,8 @@ import './layout.less'
 
 class HorizontalLayout extends React.Component {
   static get defaultProps() {return{
-    equalWidths: false
+    equalWidths: false,
+    className: ''
   }}
 
   constructor(props) {
@@ -12,7 +13,7 @@ class HorizontalLayout extends React.Component {
   }
 
   render() {
-    let className = "horizontal-layout"
+    let className = "horizontal-layout " + this.props.className
     if (this.props.equalWidths) {
       className = className + " equal" + this.props.children.length
     }
@@ -25,17 +26,70 @@ class HorizontalLayout extends React.Component {
 }
 
 class Column extends React.Component {
+  static get defaultProps() {return{
+    className: ''
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let className = "layout-column " + this.props.className
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class VerticalLayout extends React.Component {
+  static get defaultProps() {return{
+    equalWidths: false,
+    className: ''
+  }}
+
   constructor(props) {
     super(props)
   }
 
   render() {
+    let className = "vertical-layout " + this.props.className
+    if (this.props.equalWidths) {
+      className = className + " equal" + this.props.children.length
+    }
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class Row extends React.Component {
+  static get defaultProps() {return{
+    className: '',
+    size: 'expand',
+    gutter: ''
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let style = {}
+    if (this.props.gutter) {
+      style = {marginBottom: this.props.gutter}
+    }
+    let className = ["layout-row", this.props.className, this.props.size].join(" ")
     return (
-      <div className="layout-column">
+      <div style={style} className={className}>
         {this.props.children}
       </div>
     )
   }
 }
 
-export {HorizontalLayout, Column}
\ No newline at end of file
+export {HorizontalLayout, VerticalLayout, Column, Row}
\ No newline at end of file
diff --git a/ui/app/components/layout/layout.less b/ui/app/components/layout/layout.less
index dae99aa3..81e61afb 100644
--- a/ui/app/components/layout/layout.less
+++ b/ui/app/components/layout/layout.less
@@ -22,4 +22,34 @@
 .horizontal-layout.equal1 > .layout-column {width: 100%;}
 .horizontal-layout.equal2 > .layout-column {width: 50%;}
 .horizontal-layout.equal3 > .layout-column {width: 33.33%;}
-.horizontal-layout.equal4 > .layout-column {width: 25%;}
\ No newline at end of file
+.horizontal-layout.equal4 > .layout-column {width: 25%;}
+
+.vertical-layout {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+  > .layout-row {
+    //display: -webkit-flex;
+    //display: flex;
+    margin-bottom: @gutter;
+    &.expand {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+    }
+    &.shrink {
+      -webkit-flex: 0 1 auto;
+      flex: 0 1 auto;
+    }
+  }
+  > .layout-row:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+.vertical-layout.equal1 > .layout-row {width: 100%;}
+.vertical-layout.equal2 > .layout-row {width: 50%;}
+.vertical-layout.equal3 > .layout-row {width: 33.33%;}
+.vertical-layout.equal4 > .layout-row {width: 25%;}