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.js41
-rw-r--r--ui/app/components/layout/layout.less25
2 files changed, 66 insertions, 0 deletions
diff --git a/ui/app/components/layout/index.js b/ui/app/components/layout/index.js
new file mode 100644
index 00000000..8e7c4b58
--- /dev/null
+++ b/ui/app/components/layout/index.js
@@ -0,0 +1,41 @@
+import React from 'react'
+
+import './layout.less'
+
+class HorizontalLayout extends React.Component {
+ static get defaultProps() {return{
+ equalWidths: false
+ }}
+
+ constructor(props) {
+ super(props)
+ }
+
+ render() {
+ let className = "horizontal-layout"
+ if (this.props.equalWidths) {
+ className = className + " equal" + this.props.children.length
+ }
+ return (
+ <div className={className}>
+ {this.props.children}
+ </div>
+ )
+ }
+}
+
+class Column extends React.Component {
+ constructor(props) {
+ super(props)
+ }
+
+ render() {
+ return (
+ <div className="layout-column">
+ {this.props.children}
+ </div>
+ )
+ }
+}
+
+export {HorizontalLayout, Column} \ No newline at end of file
diff --git a/ui/app/components/layout/layout.less b/ui/app/components/layout/layout.less
new file mode 100644
index 00000000..dae99aa3
--- /dev/null
+++ b/ui/app/components/layout/layout.less
@@ -0,0 +1,25 @@
+@gutter: 20px;
+
+.horizontal-layout {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex: 1 1 auto;
+ flex: 1 1 auto;
+ > .layout-column {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex: 1 1 auto;
+ flex: 1 1 auto;
+ margin-right: @gutter;
+ }
+ > .layout-column:last-child {
+ margin-right: 0px;
+ }
+}
+
+.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