From 5934230d00e6b32fd3bda63664a54f337afab2d7 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Fri, 8 Dec 2017 14:53:34 -0700
Subject: [PATCH] Made word form show in Modal if screen is Mobile size

---
 src/components/structure/LeftColumn.jsx       | 16 ----------
 src/components/structure/LeftColumn/index.jsx | 32 +++++++++++++++++++
 .../structure/LeftColumn/styles.scss          | 13 ++++++++
 src/components/structure/Modal.jsx            |  2 +-
 4 files changed, 46 insertions(+), 17 deletions(-)
 delete mode 100644 src/components/structure/LeftColumn.jsx
 create mode 100644 src/components/structure/LeftColumn/index.jsx
 create mode 100644 src/components/structure/LeftColumn/styles.scss

diff --git a/src/components/structure/LeftColumn.jsx b/src/components/structure/LeftColumn.jsx
deleted file mode 100644
index 6f2fc4e..0000000
--- a/src/components/structure/LeftColumn.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Inferno from 'inferno';
-import Component from 'inferno-component';
-
-export class LeftColumn extends Component {
-  constructor (props) {
-    super(props);
-  }
-
-  render () {
-    return (
-      <div className='column is-one-third'>
-        { this.props.children }
-      </div>
-    );
-  }
-}
diff --git a/src/components/structure/LeftColumn/index.jsx b/src/components/structure/LeftColumn/index.jsx
new file mode 100644
index 0000000..20dcd24
--- /dev/null
+++ b/src/components/structure/LeftColumn/index.jsx
@@ -0,0 +1,32 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+import { Modal } from '../Modal';
+
+import './styles.scss';
+
+export class LeftColumn extends Component {
+  constructor (props) {
+    super(props);
+
+    this.isMobile = window.innerWidth < 769;
+  }
+
+  render () {
+    return (
+      <div className='left-column'>
+        {this.isMobile
+          ? (
+            <div className='floating-word-button'>
+              <Modal title='New Word'
+                buttonText={<span className='icon'><i className='fa fa-plus' /></span>}
+              >
+                { this.props.children }
+              </Modal>
+            </div>
+          ) : this.props.children
+        }
+      </div>
+    );
+  }
+}
diff --git a/src/components/structure/LeftColumn/styles.scss b/src/components/structure/LeftColumn/styles.scss
new file mode 100644
index 0000000..f40d64a
--- /dev/null
+++ b/src/components/structure/LeftColumn/styles.scss
@@ -0,0 +1,13 @@
+@import '../../node_modules/bulma/sass/utilities/mixins';
+@import '../../node_modules/bulma/sass/grid/columns';
+
+.left-column {
+  @extend .column;
+  @extend .is-one-third;
+}
+
+.floating-word-button {
+  position: fixed;
+  z-index: 2;
+  left: 0;
+}
diff --git a/src/components/structure/Modal.jsx b/src/components/structure/Modal.jsx
index b3b51d6..f2bb405 100644
--- a/src/components/structure/Modal.jsx
+++ b/src/components/structure/Modal.jsx
@@ -8,7 +8,7 @@ export class Modal extends Component {
 
   PropTypes.checkPropTypes({
     noButton: PropTypes.bool,
-    buttonText: PropTypes.string,
+    buttonText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     title: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     footerAlign: PropTypes.string,