From 582b9379617087caf1213af1df13a190eb13ff3b Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Tue, 17 May 2016 23:53:05 -0700
Subject: [PATCH] Fixed MarkdownEditor outgrow etc

---
 .../MarkdownEditor/MarkdownEditor.js           | 18 +++++++++++++++++-
 .../MarkdownEditor/MarkdownEditor.scss         |  6 +++---
 src/components/Layout/Layout.js                |  5 ++++-
 src/components/Layout/Layout.scss              |  9 +++++++++
 .../Layout/components/Title/Title.js           |  2 +-
 .../ClickablePadding/ClickablePadding.js       | 18 ++++++++++++++++++
 .../components/ClickablePadding/index.js       |  2 ++
 src/scenes/Editor/Editor.js                    |  1 +
 8 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 src/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js
 create mode 100644 src/components/MarkdownEditor/components/ClickablePadding/index.js

diff --git a/src/Components/MarkdownEditor/MarkdownEditor.js b/src/Components/MarkdownEditor/MarkdownEditor.js
index dc0ce436..c11d7fe3 100644
--- a/src/Components/MarkdownEditor/MarkdownEditor.js
+++ b/src/Components/MarkdownEditor/MarkdownEditor.js
@@ -6,6 +6,8 @@ import 'codemirror/addon/edit/continuelist';
 import 'codemirror/addon/display/placeholder.js';
 import Dropzone from 'react-dropzone';
 
+import ClickablePadding from './components/ClickablePadding';
+
 import styles from './MarkdownEditor.scss';
 import './codemirror.scss';
 
@@ -85,8 +87,20 @@ class MarkdownAtlas extends React.Component {
     });
   }
 
+  onPaddingTopClick = () => {
+    const cm = this.getEditorInstance();
+    console.log(cm)
+    cm.setCursor(0, 0);
+    cm.focus();
+  }
+
+  onPaddingBottomClick = () => {
+    const cm = this.getEditorInstance();
+    cm.setCursor(cm.lineCount(), 0);
+    cm.focus();
+  }
+
   render = () => {
-    // https://github.com/jbt/markdown-editor/blob/master/index.html
     const options = {
       readOnly: false,
       lineNumbers: false,
@@ -112,6 +126,7 @@ class MarkdownAtlas extends React.Component {
         accept={'image/*'}
         className={styles.container}
       >
+        <ClickablePadding onClick={ this.onPaddingTopClick } />
         <Codemirror
           value={this.props.text}
           onChange={this.onChange}
@@ -119,6 +134,7 @@ class MarkdownAtlas extends React.Component {
           ref="editor"
           className={styles.codeMirrorContainer}
         />
+        <ClickablePadding onClick={ this.onPaddingBottomClick } />
       </Dropzone>
     );
   }
diff --git a/src/Components/MarkdownEditor/MarkdownEditor.scss b/src/Components/MarkdownEditor/MarkdownEditor.scss
index 7ee1a63e..70216e31 100644
--- a/src/Components/MarkdownEditor/MarkdownEditor.scss
+++ b/src/Components/MarkdownEditor/MarkdownEditor.scss
@@ -1,18 +1,18 @@
 .container {
   display: flex;
   flex: 1;
+  flex-direction: column;
 
   font-weight: 400;
   font-size: 1em;
   line-height: 1.5em;
 
-  padding: 2em 3em;
+  padding: 0 3em;
   max-width: 50em;
 }
 
 .codeMirrorContainer {
-  display: flex;
-  flex: 1;
+  width: 100%;
 }
 
 @media all and (max-width: 2000px) and (min-width: 960px) {
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 876bf620..d5bd31fd 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -6,17 +6,20 @@ import HeaderMenu from './components/HeaderMenu';
 import Flex from 'components/Flex';
 
 import styles from './Layout.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
 
 class Layout extends React.Component {
   static propTypes = {
     actions: React.PropTypes.node,
     title: React.PropTypes.node,
+    fixed: React.PropTypes.bool,
   }
 
   render() {
     return (
       <div className={ styles.container }>
-        <div className={ styles.header }>
+        <div className={ cx(styles.header, { fixed: this.props.fixed }) }>
           <div className={ styles.teamName }>
             <Link to="/">{ this.props.teamName }</Link>
           </div>
diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss
index 91891ed5..44adc747 100644
--- a/src/components/Layout/Layout.scss
+++ b/src/components/Layout/Layout.scss
@@ -8,6 +8,15 @@
   width: 100%;
 }
 
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 900;
+  background: #fff;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
diff --git a/src/components/Layout/components/Title/Title.js b/src/components/Layout/components/Title/Title.js
index 7cadd640..b82cd722 100644
--- a/src/components/Layout/components/Title/Title.js
+++ b/src/components/Layout/components/Title/Title.js
@@ -35,4 +35,4 @@ Title.propTypes = {
   placeholder: React.PropTypes.string,
 }
 
-export default Title;
\ No newline at end of file
+export default Title;
diff --git a/src/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js b/src/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js
new file mode 100644
index 00000000..aca45792
--- /dev/null
+++ b/src/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const styles = {
+  paddingTop: "100px",
+  cursor: "text",
+};
+
+const ClickablePadding = (props) => {
+  return (
+    <div style={ styles } onClick={ props.onClick }>&nbsp;</div>
+  )
+};
+
+ClickablePadding.propTypes = {
+  onClick: React.PropTypes.func,
+};
+
+export default ClickablePadding;
\ No newline at end of file
diff --git a/src/components/MarkdownEditor/components/ClickablePadding/index.js b/src/components/MarkdownEditor/components/ClickablePadding/index.js
new file mode 100644
index 00000000..537c28bd
--- /dev/null
+++ b/src/components/MarkdownEditor/components/ClickablePadding/index.js
@@ -0,0 +1,2 @@
+import ClickablePadding from './ClickablePadding';
+export default ClickablePadding;
\ No newline at end of file
diff --git a/src/scenes/Editor/Editor.js b/src/scenes/Editor/Editor.js
index c6dce865..a3208b65 100644
--- a/src/scenes/Editor/Editor.js
+++ b/src/scenes/Editor/Editor.js
@@ -44,6 +44,7 @@ class Editor extends Component {
           </Flex>
         )}
         title={ title }
+        fixed={ true }
       >
         <MarkdownEditor
           onChange={ this.props.updateText }