summaryrefslogtreecommitdiff
path: root/ui/app/components/layout
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/layout')
-rw-r--r--ui/app/components/layout/index.js62
-rw-r--r--ui/app/components/layout/layout.less32
2 files changed, 89 insertions, 5 deletions
diff --git a/ui/app/components/layout/index.js b/ui/app/components/layout/index.js
index 8e7c4b5..b32961a 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 dae99aa..81e61af 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%;}