Worked on styling, got fixed info pages and the footer working correctly! Next, I need to add the dictionary settings page.

src/components/FixedPage.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import {Button} from './Button';
+
+export class FixedPage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      display: false
+    };
+
+    this.hide = this.hide.bind(this);
+  }
+
+  conditionalDisplay() {
+    if (this.state.display) {
+      let contentClass = 'fixed-page-content';
+
+      if (this.props.contentClass) {
+        contentClass += ' ' + this.props.contentClass;
+      }
+
+      return (
+        <div id={this.props.id} className='fixed-page-container'>
+
+          <div className='fixed-page-background-fade' onClick={this.hide}></div>
+
+          <div className={contentClass}>
+            
+            <Button classes='right-button'
+              action={this.hide}
+              label='Close' />
+
+            {this.props.children}
+
+          </div>
+
+        </div>
+      );
+    } else {
+      return (
+        <Button classes={this.props.buttonClasses}
+          action={() => this.show()}
+          label={this.props.buttonText} />
+      );
+    }
+  }
+
+  show() {
+    this.setState({
+      display: true
+    });
+  }
+
+  hide() {
+    this.setState({
+      display: false
+    });
+  }
+
+  render() {
+    return (
+      <div className='inline'>
+        {this.conditionalDisplay()}
+      </div>
+    );
+  }
+}

src/components/Footer.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import marked from 'marked';
+
+import {FixedPage} from './FixedPage';
+
+export class Footer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.termsText = '# Terms  \nTesting the terms';
+    this.privacyText = '# Privacy  \nTesting the privacy';
+  }
+
+  render() {
+    return (
+      <footer>
+
+        <div id="footer-content">
+          Dictionary Builder only guaranteed to work with most up-to-date HTML5 browsers.
+
+          <a href="/issues" className="clickable inline-button" target="_blank">
+            Issues
+          </a>
+
+          <a href="/updates" className="clickable inline-button" target="_blank">
+            Updates
+          </a>
+
+          &nbsp;|&nbsp;
+
+          <FixedPage buttonClasses='inline-button' buttonText='Terms'>
+            <div dangerouslySetInnerHTML={{__html: marked(this.termsText)}} />
+          </FixedPage>
+
+          <FixedPage buttonClasses='inline-button' buttonText='Privacy'>
+            <div dangerouslySetInnerHTML={{__html: marked(this.privacyText)}} />
+          </FixedPage>
+
+        </div>
+
+      </footer>
+    );
+  }
+}

src/components/Header.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import marked from 'marked';
 
 import {Button} from './Button';
+import {FixedPage} from './FixedPage';
 
 export class Header extends React.Component {
   constructor(props) {
@@ -10,6 +12,8 @@ export class Header extends React.Component {
       loggedIn: false,
       lockedOut: false
     }
+
+    this.aboutText = '# About  \nGet this later.';
   }
 
   logUserIn() {
@@ -73,16 +77,23 @@ export class Header extends React.Component {
   render() {
     return (
       <header>
+
         <div id="headerPadder">
+
           <a href="/" id="siteLogo">Lexiconga Dictionary Builder</a>
+
           <div className='button-group'>
-            <Button
+            
-              id='aboutButton'
+            <FixedPage id='aboutButton' buttonText='About Lexiconga'>
-              action={() => alert('fixme')}
+              <div dangerouslySetInnerHTML={{__html: marked(this.aboutText)}} />
-              label='About Lexiconga' />
+            </FixedPage>
+
           </div>
+
           {this.showAccountButtons()}
+
         </div>
+
       </header>
     );
   }

src/components/TextArea.jsx

@@ -3,6 +3,7 @@ import {Input} from './Input';
 
 import {getInputSelection, setSelectionRange} from '../js/helpers';
 import {Button} from './Button';
+import {FixedPage} from './FixedPage';
 
 export class TextArea extends Input {
   constructor(props) {
@@ -31,12 +32,17 @@ export class TextArea extends Input {
       <label>
         <span>
           {this.props.name}
-          <Button
+
-            classes='inline-button'
+          <FixedPage id={this.props.id + '_textbox'} contentClass='no-scroll' buttonClasses='inline-button' buttonText='Maximize'>
-            action={() => this.handleMaximizeClick()}
+            <label><span>{this.props.name}</span></label>
-            label='Maximize' />
+
+            <textarea id={this.props.id} className='fullscreen-textbox' onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
+          </FixedPage>
+
         </span>
+
         <textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
+
       </label>
     );
   }

src/components/Word.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import marked from 'marked';
 
 import {WordForm} from './WordForm';
 import {Button} from './Button';
@@ -72,9 +73,7 @@ export class Word extends React.Component {
   showLongDefinition() {
     if (this.props.longDefinition !== '') {
       return (
-        <div className='long-definition'>
+        <div className='long-definition' dangerouslySetInnerHTML={{__html: marked(this.props.longDefinition)}} />
-          {this.props.longDefinition}
-        </div>
       );
     }
   }

src/index.jsx

@@ -5,8 +5,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {Header} from './components/Header';
+import {Footer} from './components/Footer';
 import {WordForm} from './components/WordForm';
 import {Button} from './components/Button';
+import {FixedPage} from './components/FixedPage';
 import {Dictionary} from './components/Dictionary';
 
 import {dynamicSort} from './js/helpers';
@@ -208,19 +210,17 @@ class Lexiconga extends React.Component {
     return (
       <div>
         <Header />
-        <WordForm addWord={(wordObject) => this.addWord(wordObject)} submitLabel='Add Word' />
-        <Button
-          action={() => this.changeDictionaryName()}
-          label='change name' />
 
+        <div className='left-column'>
+          <div className='floating-form'>
+            <WordForm addWord={(wordObject) => this.addWord(wordObject)} submitLabel='Add Word' />
+          </div>
+        </div>
+
+        <div className='center-column'>
           <div id="incompleteNotice">
             Dictionary is complete: {this.state.settings.isComplete.toString()}
           </div>
-        <Dictionary
-          details={this.state.details}
-          words={this.state.words}
-          settings={this.state.settings}
-          updateWord={(wordId, wordObject) => this.updateWord(wordId, wordObject)} />
 
           <Button
             action={() => this.saveLocalDictionary()}
@@ -229,6 +229,19 @@ class Lexiconga extends React.Component {
           <Button
             action={() => this.loadLocalDictionary()}
             label='Load Dictionary' />
+
+          <FixedPage buttonClasses='right' buttonText='Edit Dictionary'>
+
+          </FixedPage>
+
+          <Dictionary
+            details={this.state.details}
+            words={this.state.words}
+            settings={this.state.settings}
+            updateWord={(wordId, wordObject) => this.updateWord(wordId, wordObject)} />
+        </div>
+
+        <Footer />
       </div>
     );
   }

src/sass/_lexiconga.scss

@@ -4,6 +4,9 @@ body {
 
 header {
 	background: #eacc9d;
+  -webkit-box-shadow: $header-shadow;
+  -moz-box-shadow: $header-shadow;
+  box-shadow: $header-shadow;
 }
 
 tr, thead {
@@ -70,11 +73,11 @@ and (max-device-width : 480px) {
 	}
 }
 
-#wordEntryForm {
+.floating-form {
 	background: #ba5536;
-	-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+	-webkit-box-shadow: $box-shadow;
-	-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+	-moz-box-shadow: $box-shadow;
-	box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+	box-shadow: $box-shadow;
 	border: none;
 }
 
@@ -84,21 +87,33 @@ input, textarea, select, option {
 
 #announcementArea {
     background: #a0c066;
+    -webkit-box-shadow: $box-shadow;
+    -moz-box-shadow: $box-shadow;
+    box-shadow: $box-shadow;
 }
 
 #notificationArea {
     background: #c0c088;
+    -webkit-box-shadow: $box-shadow;
+    -moz-box-shadow: $box-shadow;
+    box-shadow: $box-shadow;
 }
 
-#dictionaryColumn {
+.center-column {
 	background: #bd7251;
 	border: none;
-	-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+	-webkit-box-shadow: $box-shadow;
-	-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+	-moz-box-shadow: $box-shadow;
-	box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+	box-shadow: $box-shadow;
 }
 
-#settingsOptions, #infoPage, #loadAfterDeletePage, #accountSettingsPage, #fullScreenTextboxPage {
+.fixed-page-content {
+  -webkit-box-shadow: $box-shadow;
+  -moz-box-shadow: $box-shadow;
+  box-shadow: $box-shadow;
+}
+
+.fixed-page-content {
 	background: #f2d5b2;
 }
 

src/sass/_styles.scss

@@ -1,4 +1,6 @@
 * {
+    // position: relative;
+    // z-index: 0;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -22,7 +24,7 @@ contents {
 }
 
 header {
-    height: 50px;
+    height: $header-height;
     width: 100%;
     margin: 0 0 10px;
     position: relative;
@@ -31,9 +33,6 @@ header {
     right: 0px;
     border: none;
     padding: 0;
-    -webkit-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
-    box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
 
     .button-group {
         float: right;
@@ -55,7 +54,7 @@ footer {
     left: 0px;
     background: #aaaaaa;
     padding: 0;
-    max-height: 32px;   /* Update Dictionary Container's bottom margin to account for footer */
+    max-height: $footer-height;
 
     #footer-content {
         padding: 8px;
@@ -86,21 +85,45 @@ td:last-child, th:last-child {
     display: inline !important;
 }
 
-#leftColumn {
+.right {
+    float: right;
+}
+
+.column {
     float: left;
+    margin: $column-margin;
+}
+
+.left-column {
+    @extend .column;
+
     width: 25%;
-    margin: 15px 0 15px 15px;
+    min-width: $min-column-width;
+    max-width: $max-column-width / 2;
+}
+
+.center-column {
+    @extend .column;
+    
+    width: 50%;
+    margin-bottom: $column-margin + $footer-height;
+    min-width: $min-column-width;
+    max-width: $max-column-width;
+    padding: 15px;
+}
+
+.floating-form {
+    position: fixed;
+    top: $header-height + $column-margin;
+    width: 25%;
+    min-width: $min-column-width - ($column-margin * 2);
+    max-width: ($max-column-width / 2) - ($column-margin * 2);
 }
 
 form {
     padding: 15px;
 }
 
-#wordEntryForm {
-    max-width: 400px;
-    min-width: 260px;
-}
-
 .wbr:after {
     content: "\00200B";
 }
@@ -129,6 +152,11 @@ input, textarea {
     padding: 2px 0 2px 5px;
     border: none;
     margin: 2px 0;
+    width: 100%;
+}
+
+textarea {
+    min-height: 125px;
 }
 
 input[type=checkbox] {
@@ -185,23 +213,6 @@ input[type=checkbox] {
     margin: 0 auto 5px;
     width:50%;
     min-width:200px;
-    -webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-    -moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-    box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-}
-
-#dictionaryColumn {
-    width: 50%;
-    margin: 15px 0 36px 15px;    /* bottom margin must clear footer */
-    padding: 0;
-    float: left;
-}
-
-#dictionaryContent {
-    width: 100%;
-    min-width: 260px;
-    max-width: 800px;
-    padding: 15px;
 }
 
 #dictionaryName {
@@ -230,6 +241,7 @@ input[type=checkbox] {
     padding: 5px;
     border: none;
     background: #dddddd;
+    margin: 0 3px;
 }
 
 .clickable, button {
@@ -237,6 +249,7 @@ input[type=checkbox] {
 }
 
 .inline-button {
+    display: inline-block !important;
     font-size: 11px;
     padding: 2px 4px;
 }
@@ -374,7 +387,11 @@ searchTerm {
     margin: 10px;
 }
 
-.fixedFade {
+.fixed-page-container {
+    position: relative;
+    z-index: 999;
+
+    .fixed-page-background-fade {
         position: fixed;
         top: 0;
         left: 0;
@@ -382,9 +399,9 @@ searchTerm {
         height: 100%;
         background: #000000;
         opacity: 0.6;
-}
+    }
 
-.fixedPage {
+    .fixed-page-content {
         position: fixed;
         top: 5%;
         left: 6%;
@@ -395,25 +412,24 @@ searchTerm {
         padding: 5px 5% 5%;
         overflow-y: auto;
         overflow-x: hidden;
-    background: #ffffff;
         opacity: 1;
         border: none;
-    -webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+        text-align: left;
-    -moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+    }
-    box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
 }
 
-.rightButton {
+.right-button {
-    float: right;
+    @extend .right;
+
     font-size: 12px;
 }
 
-#fullScreenTextboxPage {
+.no-scroll {
-    padding: 5px 3% 4%;
+    padding: 5px 3% 4% !important;
-    overflow-y: hidden;
+    overflow-y: hidden !important;
 }
 
-#fullScreenTextbox {
+.fullscreen-textbox {
     position: relative;
     width: 100%;
     height: 100%;

src/sass/_variables.scss

@@ -0,0 +1,7 @@
+$header-height: 50px;
+$header-shadow: 0px 3px 10px -1px rgba(0, 0, 0, 0.75);
+$box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.75);
+$column-margin: 15px;
+$min-column-width: 260px;
+$max-column-width: 800px;
+$footer-height: 32px;

src/sass/main.scss

@@ -1,3 +1,4 @@
+@import 'variables';
 @import 'styles';
 @import 'lexiconga';
 @import 'mobile';