Make WordForm float in LeftColumn and closed by default

Expands RightColumn display when closed and compresses when open, unless
on mobile screen.

src/components/MainDisplay.jsx

@@ -1,4 +1,5 @@
 import Inferno from 'inferno';
+import Component from 'inferno-component';
 import PropTypes from 'prop-types';
 
 import { LeftColumn } from './structure/LeftColumn';
@@ -8,46 +9,83 @@ import { WordForm } from './management/WordForm';
 import { DictionaryDetails } from './display/DictionaryDetails';
 import { WordsList } from './display/WordsList';
 
-export const MainDisplay = (props) => {
-  PropTypes.checkPropTypes({
-    dictionaryInfo: PropTypes.object.isRequired,
-    wordsToDisplay: PropTypes.array.isRequired,
-    updateDisplay: PropTypes.func.isRequired,
-    updater: PropTypes.object.isRequired,
-  }, props, 'prop', 'MainDisplay');
+export class MainDisplay extends Component {
+  constructor (props) {
+    super(props);
 
-  const { dictionaryInfo, wordsToDisplay, updateDisplay, updater } = props;
+    PropTypes.checkPropTypes({
+      dictionaryInfo: PropTypes.object.isRequired,
+      wordsToDisplay: PropTypes.array.isRequired,
+      updateDisplay: PropTypes.func.isRequired,
+      updater: PropTypes.object.isRequired,
+    }, props, 'prop', 'MainDisplay');
 
-  return (
-    <section className='section'>
-      <div className='container'>
-        <div className='columns'>
-          
-          <LeftColumn>
-            <WordForm
-              updateDisplay={ updateDisplay }
-            />
-          </LeftColumn>
+    this.state = {
+      isMobile: false,
+      wordFormIsOpen: false,
+    };
+  }
 
-          <RightColumn>
-            <DictionaryDetails
-              updater={ updater }
-              name={ dictionaryInfo.name }
-              specification={ dictionaryInfo.specification }
-              description={ dictionaryInfo.description }
-              partsOfSpeech={ dictionaryInfo.partsOfSpeech }
-              details={ dictionaryInfo.details }
-              alphabeticalOrder={ dictionaryInfo.alphabeticalOrder }
-            />
+  openWordForm () {
+    this.setState({ wordFormIsOpen: true });
+  }
 
-            <WordsList
-              words={ wordsToDisplay }
-              adsEveryXWords={ 10 }
-              updateDisplay={ updateDisplay } />
-          </RightColumn>
-          
+  closeWordForm () {
+    this.setState({ wordFormIsOpen: false });
+  }
+
+  checkIsMobile () {
+    this.setState({ isMobile: window.innerWidth < 769 });
+  }
+
+  componentDidMount () {
+    window.addEventListener('resize', this.checkIsMobile.bind(this));
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('resize');
+  }
+
+  render () {
+    const { dictionaryInfo, wordsToDisplay, updateDisplay, updater } = this.props;
+    const { isMobile, wordFormIsOpen } = this.state;
+
+    return (
+      <section className='section'>
+        <div className='container'>
+          <div className='columns'>
+            
+            <LeftColumn
+              isMobile={ this.state.isMobile }
+              displayForm={ this.state.wordFormIsOpen }
+              openWordForm={ this.openWordForm.bind(this) }
+              closeWordForm={ this.closeWordForm.bind(this) }
+            >
+              <WordForm
+                updateDisplay={ updateDisplay }
+              />
+            </LeftColumn>
+
+            <RightColumn formIsDisplayed={ this.state.wordFormIsOpen }>
+              <DictionaryDetails
+                updater={ updater }
+                name={ dictionaryInfo.name }
+                specification={ dictionaryInfo.specification }
+                description={ dictionaryInfo.description }
+                partsOfSpeech={ dictionaryInfo.partsOfSpeech }
+                details={ dictionaryInfo.details }
+                alphabeticalOrder={ dictionaryInfo.alphabeticalOrder }
+              />
+
+              <WordsList
+                words={ wordsToDisplay }
+                adsEveryXWords={ 10 }
+                updateDisplay={ updateDisplay } />
+            </RightColumn>
+            
+          </div>
         </div>
-      </div>
-    </section>
-  );
+      </section>
+    );
+  }
 }

src/components/structure/LeftColumn/index.jsx

@@ -1,32 +1,55 @@
 import Inferno from 'inferno';
-import Component from 'inferno-component';
+import PropTypes from 'prop-types';
 
 import { Modal } from '../Modal';
 
 import './styles.scss';
 
-export class LeftColumn extends Component {
-  constructor (props) {
-    super(props);
+export const LeftColumn = (props) => {
+  PropTypes.checkPropTypes({
+    isMobile: PropTypes.bool.isRequired,
+    displayForm: PropTypes.bool.isRequired,
+    openWordForm: PropTypes.func.isRequired,
+    closeWordForm: PropTypes.func.isRequired,
+    children: PropTypes.object,
+  }, props, 'prop', 'LeftColumn');
 
-    this.isMobile = window.innerWidth < 769;
-  }
+  const { isMobile, displayForm, openWordForm, closeWordForm } = props;
 
-  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>
-    );
-  }
+  return (
+    <div className={ `left-column-${ displayForm ? 'open' : 'closed' }` } >
+      {isMobile
+        ? (
+          <div className='floating-word-button'>
+            <Modal title='New Word'
+              buttonText={<span className='icon'><i className='fa fa-plus' /></span>}
+            >
+              { props.children }
+            </Modal>
+          </div>
+        ) : (
+          <div>
+            {displayForm
+              ? (
+                <div className='floating-word-form'>
+                  <a className='button is-pulled-right'
+                    onClick={ closeWordForm }
+                  >
+                    <span className='icon'><i className='fa fa-close' /></span>
+                  </a>
+                  { props.children }
+                </div>
+              ) : (
+                <div className='floating-word-button'>
+                  <a className='button' onClick={ openWordForm }>
+                    <span className='icon'><i className='fa fa-plus' /></span>
+                  </a>
+                </div>
+              )
+            }
+          </div>
+        )
+      }
+    </div>
+  );
 }

src/components/structure/LeftColumn/styles.scss

@@ -1,13 +1,29 @@
+@import '../../node_modules/bulma/sass/utilities/initial-variables';
+@import '../../node_modules/bulma/sass/utilities/derived-variables';
 @import '../../node_modules/bulma/sass/utilities/mixins';
 @import '../../node_modules/bulma/sass/grid/columns';
+@import '../../node_modules/bulma/sass/components/navbar';
 
-.left-column {
+.left-column-open {
   @extend .column;
   @extend .is-one-third;
 }
 
 .floating-word-button {
+  margin: $column-gap;
+}
+
+.floating-word-button,
+.floating-word-form {
   position: fixed;
   z-index: 2;
+  top: $navbar-height;
   left: 0;
 }
+
+.floating-word-form {
+  @extend .column;
+  @extend .is-one-third;
+
+  overflow-y: auto;
+}

src/components/structure/RightColumn.jsx

@@ -1,16 +1,17 @@
 import Inferno from 'inferno';
-import Component from 'inferno-component';
+import PropTypes from 'prop-types';
 
-export class RightColumn extends Component {
-  constructor (props) {
-    super(props);
-  }
+export const RightColumn = (props) => {
+  PropTypes.checkPropTypes({
+    formIsDisplayed: PropTypes.bool.isRequired,
+    children: PropTypes.object,
+  }, props, 'prop', 'RightColumn');
 
-  render () {
-    return (
-      <div className='column is-two-thirds'>
-        { this.props.children }
-      </div>
-    );
-  }
+  const { formIsDisplayed } = props;
+
+  return (
+    <div className={ `column ${ formIsDisplayed ? 'is-two-thirds' : '' }` }>
+      { props.children }
+    </div>
+  );
 }