Got Dictionary Info (description and details) displaying correctly! Going with a tabbed display this time. :)

src/components/Dictionary.jsx

@@ -9,6 +9,7 @@ export class Dictionary extends React.Component {
   }
 
   showWords() {
+    if (this.props.words.length > 0) {
       let words = this.props.words.map((word) => {
         return <Word key={'d:' + this.props.details.name + this.props.details.externalID.toString() + 'w:' + word.wordId.toString()} isEditing={true}
           name={word.name}
@@ -21,26 +22,16 @@ export class Dictionary extends React.Component {
       });
 
       return <div>{words}</div>;
+    } else {
+      return <h3>No words yet!</h3>;
+    }
   }
 
   render() {
     return (
-      <div>
-        <h1 id="dictionaryName">
-          {this.props.details.name}
-        </h1>
-        
-        <h4 id="dictionaryBy">
-          {this.props.details.createdBy}
-        </h4>
-        <div id="incompleteNotice">
-          Dictionary is complete: {this.props.settings.isComplete.toString()}
-        </div>
-
       <div id="theDictionary">
         {this.showWords()}
       </div>
-      </div>
     );
   }
 }

src/components/InfoDisplay.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import marked from 'marked';
+
+import {WordForm} from './WordForm';
+import {Button} from './Button';
+
+const saveIcon = <i>&#128190;</i>;
+const editIcon = <i>&#128393;</i>;
+
+export class InfoDisplay extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isDisplayed: props.startDisplayed || false,
+      tabDisplay: 0
+    };
+  }
+
+  showTabbedInterface() {
+    if (this.state.isDisplayed) {
+      return (
+        <div className='dictionary-info'>
+
+          <Button classes={'inline-button' + ((this.state.tabDisplay === 0) ? ' selected-tab' : '')}
+            action={() => this.changeTab(0)}
+            label='Description' />
+          
+          <Button classes={'inline-button' + ((this.state.tabDisplay === 1) ? ' selected-tab' : '')}
+            action={() => this.changeTab(1)}
+            label='Details' />
+
+          <div className='tabbed-interface'>
+            {this.displaySelectedTab()}
+          </div>
+
+        </div>
+      );
+    }
+  }
+
+  toggleDisplay() {
+    this.setState({
+      isDisplayed: !this.state.isDisplayed
+    });
+  }
+
+  displaySelectedTab() {
+    switch(this.state.tabDisplay) {
+      case 1: {
+        return (
+          <div>
+            {this.showDetails()}
+          </div>
+        );
+        break;
+      }
+      default: {
+        return (
+          <div>
+            {this.showDescription()}
+          </div>
+        );
+        break;
+      }
+    }
+  }
+
+  showDescription() {
+    return (
+      <div dangerouslySetInnerHTML={{__html: marked(this.props.details.description)}} />
+    );
+  }
+
+  showDetails() {
+    return (
+      <div>
+      
+        <h4 className='created-by'>
+          Created By {this.props.details.createdBy}
+        </h4>
+
+        <h5 className='total-words'>
+          {this.props.numberOfWords} Total Word{(this.props.numberOfWords !== 1) ? 's' : ''}
+        </h5>
+
+        <h5 className='incopmlete-notice'>
+          {(!this.props.isComplete) ? 'Note: This dictionary is not yet complete and is likely to change.' : ''}
+        </h5>
+
+      </div>
+    );
+  }
+
+  changeTab(tabNumber) {
+    this.setState({
+      tabDisplay: tabNumber
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button
+          action={() => this.toggleDisplay()}
+          label={((this.state.isDisplayed) ? 'Hide' : 'Show') + ' Info'} />
+
+        {this.showTabbedInterface()}
+
+      </div>
+    );
+  }
+}
+
+InfoDisplay.defaultProps = {
+  isEditing: false
+}

src/index.jsx

@@ -8,6 +8,7 @@ import {Header} from './components/Header';
 import {Footer} from './components/Footer';
 import {WordForm} from './components/WordForm';
 import {Button} from './components/Button';
+import {InfoDisplay} from './components/InfoDisplay';
 import {EditDictionaryForm} from './components/EditDictionaryForm';
 import {Dictionary} from './components/Dictionary';
 
@@ -229,10 +230,6 @@ class Lexiconga extends React.Component {
         </div>
 
         <div className='center-column'>
-          <div id="incompleteNotice">
-            Dictionary is complete: {this.state.settings.isComplete.toString()}
-          </div>
-
           <Button
             action={() => this.saveLocalDictionary()}
             label='Save Dictionary' />
@@ -246,6 +243,15 @@ class Lexiconga extends React.Component {
             settings={this.state.settings}
             saveChanges={(changesObject) => this.saveChanges(changesObject)} />
 
+          <h1 className="dictionary-name">
+            {this.state.details.name}
+          </h1>
+
+          <InfoDisplay
+            details={this.state.details}
+            numberOfWords={this.state.words.length}
+            isComplete={this.state.settings.isComplete} />
+
           <Dictionary
             details={this.state.details}
             words={this.state.words}

src/sass/_lexiconga.scss

@@ -122,7 +122,7 @@ input, textarea, select, option {
 	border: none;
 }
 
-#dictionaryName {
+.dictionary-name {
 	text-shadow: 2px 2px 2px #915337;
 }
 
@@ -130,13 +130,24 @@ input, textarea, select, option {
 	text-shadow: none;
 }
 
-#dictionaryDescription {
+.tabbed-interface {
-	width: 90%;
+	z-index: 10;
-	background: #f2d5b2;
+	background: $dictionary-info-color;
+	-webkit-box-shadow: $box-shadow;
+	-moz-box-shadow: $box-shadow;
+	box-shadow: $box-shadow;
+}
+
+.selected-tab {
+	z-index: 5;
+	background: $dictionary-info-color !important;
+	-webkit-box-shadow: $box-shadow;
+	-moz-box-shadow: $box-shadow;
+	box-shadow: $box-shadow;
 }
 
 #loginLink, #logoutLink, #descriptionToggle, #searchFilterToggle, #settingsButton, .deleteCancelButton, .deleteConfirmButton, #settingsScreenCloseButton, #infoScreenCloseButton, .clickable, button {
-	background: #dcb078;
+	background: $button-color;
 }
 
 .word {

src/sass/_styles.scss

@@ -216,7 +216,7 @@ input[type=checkbox] {
     min-width:200px;
 }
 
-#dictionaryName {
+.dictionary-name {
     margin: 0 0 5px;
 }
 
@@ -226,13 +226,22 @@ input[type=checkbox] {
     text-decoration: none;
 }
 
-#dictionaryDescription {
+.dictionary-info {
-    width: 100%;
+    width: 90%;
     max-height: 400px;
     overflow-y: auto;
-    padding: 15px;
+    padding: 10px;
     border: none;
-    margin: 10px;
+    margin: 0;
+
+    .selected-tab, .tabbed-interface {
+        position: relative;
+    }
+
+    .tabbed-interface {
+        margin: 0;
+        padding: 5px 10px;
+    }
 }
 
 .clickable, button {

src/sass/_variables.scss

@@ -4,4 +4,6 @@ $box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.75);
 $column-margin: 15px;
 $min-column-width: 260px;
 $max-column-width: 800px;
+$button-color: #dcb078;
+$dictionary-info-color: #f2d5b2;
 $footer-height: 32px;