2 files changed, 37 insertions, 6 deletions
diff --git a/animism-align/frontend/app/views/align/align.css b/animism-align/frontend/app/views/align/align.css
index 760ec4b..15ff840 100644
--- a/animism-align/frontend/app/views/align/align.css
+++ b/animism-align/frontend/app/views/align/align.css
@@ -99,9 +99,23 @@ canvas {
 /* Script */
 
 .script {
-  height: calc(100vh - 3.15rem);
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 4rem;
   z-index: 8;
 }
+.script textarea {
+  height: calc(100vh - 3.15rem);
+}
+.script button {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  z-index: 9;
+  border: 0;
+  background: transparent;
+}
 
 /* Annotations */
 
diff --git a/animism-align/frontend/app/views/align/containers/script.container.js b/animism-align/frontend/app/views/align/containers/script.container.js
index cc340c6..fe3f27b 100644
--- a/animism-align/frontend/app/views/align/containers/script.container.js
+++ b/animism-align/frontend/app/views/align/containers/script.container.js
@@ -6,17 +6,34 @@ import { connect } from 'react-redux'
 import actions from 'app/actions'
 
 class Timeline extends Component {
+  state = {
+    visible: false,
+  }
   constructor(props){
     super(props)
   }
   render() {
     if (this.props.text.loading) return <div />
+    if (!this.state.visible) {
+      return (
+        <div className='script'>
+          <button onClick={() => this.setState({ visible: true })}>
+            +
+          </button>
+        </div>
+      )
+    }
     return (
-      <textarea 
-        className='script'
-        onChange={e => actions.site.updateText(e.target.value)}
-        value={this.props.text}
-      />
+      <div className='script'>
+        <textarea 
+          className='script'
+          onChange={e => actions.site.updateText(e.target.value)}
+          value={this.props.text}
+        />
+        <button onClick={() => this.setState({ visible: false })}>
+          x
+        </button>
+      </div>
     )
   }
 }