# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1497457398 -7200
# Node ID 97106bacb24eee7c778a0b2e046439a1c5e55056
# Parent  6c920486de8140f6e3cc823903f7cfd2f224d32b
Improve session page design.

diff -r 6c920486de81 -r 97106bacb24e client/src/App.scss
--- a/client/src/App.scss	Wed Jun 14 16:08:31 2017 +0200
+++ b/client/src/App.scss	Wed Jun 14 18:23:18 2017 +0200
@@ -4,11 +4,6 @@
   text-align: center;
 }
 
-#root {
-  height: 100%;
-  padding-bottom: 270px;
-}
-
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
@@ -72,11 +67,36 @@
     }
 }
 
-.editor-wrapper {
-  border: 1px solid #efefef;
-  padding: 20px;
+.editor {
+  display: flex;
+  margin-bottom: 10px;
+  &-left {
+    width: 66.6666%;
+    border: 1px solid #efefef;
+    padding: 20px;
+  }
+  &-right {
+    width: 33.3333%;
+    padding-left: 20px;
+    .form-control {
+      height: 100%;
+    }
+  }
 }
 
+.session-container {
+    position: absolute;
+    top: 71px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    .session-notes {
+        overflow-y: auto;
+    }
+}
 
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
@@ -120,15 +140,10 @@
     background-color: yellow;
     text-decoration-line: underline;
     text-decoration-style: dotted;
-
 }
 
 .editor-fixed {
     border-top: 1px solid #efefef;
     background-color: #fff;
     padding: 20px 0;
-    position: fixed;
-    height: 270px;
-    bottom: 0;
-    width: 100%;
 }
diff -r 6c920486de81 -r 97106bacb24e client/src/components/NoteInput.js
--- a/client/src/components/NoteInput.js	Wed Jun 14 16:08:31 2017 +0200
+++ b/client/src/components/NoteInput.js	Wed Jun 14 18:23:18 2017 +0200
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Form, FormGroup, Button, Label, Row, Col } from 'react-bootstrap';
+import { Form, FormGroup, FormControl, Button, Label, Row, Col, Panel } from 'react-bootstrap';
 import moment from 'moment';
 
 import PropTypes from 'prop-types';
@@ -67,20 +67,29 @@
   render() {
     return (
       <Form>
-        <Row>
-          <Col md={6}>
-            { this.renderTiming() }
-          </Col>
-          <Col md={6} className="text-right">
-            <Clock />
-          </Col>
-        </Row>
-        <hr />
-        <FormGroup>
-          <div className="editor-wrapper">
+        <Panel>
+            <Row>
+              <Col md={6}>
+                { this.renderTiming() }
+              </Col>
+              <Col md={6} className="text-right">
+                <Clock />
+              </Col>
+            </Row>
+        </Panel>
+        <div className="editor">
+          <div className="editor-left">
             <SlateEditor ref="editor" onChange={this.onEditorChange} />
           </div>
-        </FormGroup>
+          <div className="editor-right">
+            <FormControl
+              name="margin"
+              componentClass="textarea"
+              placeholder="Enter a margin comment for your note"
+              inputRef={ ref => { this.description = ref; } }
+            />
+          </div>
+        </div>
         <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>
       </Form>
     );
diff -r 6c920486de81 -r 97106bacb24e client/src/components/Session.js
--- a/client/src/components/Session.js	Wed Jun 14 16:08:31 2017 +0200
+++ b/client/src/components/Session.js	Wed Jun 14 18:23:18 2017 +0200
@@ -66,27 +66,29 @@
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={3}>
-              <Panel>
-                { this.renderForm() }
-              </Panel>
-            </Col>
-            <Col md={9}>
-              <NotesList notes={this.props.notes} />
-            </Col>
-          </Row>
-        </Grid>
-        <section className="editor-fixed">
-          <Grid fluid>
+        <div className="session-container">
+          <Grid fluid className="session-notes">
             <Row>
-              <Col md={9} mdOffset={3}>
-                <NoteInput session={this.props.currentSession} addNote={this.props.notesActions.addNote} />
+              <Col md={3}>
+                <Panel>
+                  { this.renderForm() }
+                </Panel>
+              </Col>
+              <Col md={9}>
+                <NotesList notes={this.props.notes} />
               </Col>
             </Row>
           </Grid>
-        </section>
+          <section className="editor-fixed">
+            <Grid fluid>
+              <Row>
+                <Col md={9} mdOffset={3}>
+                  <NoteInput session={this.props.currentSession} addNote={this.props.notesActions.addNote} />
+                </Col>
+              </Row>
+            </Grid>
+          </section>
+        </div>
       </div>
     );
   }
diff -r 6c920486de81 -r 97106bacb24e client/src/components/SlateEditor.js
--- a/client/src/components/SlateEditor.js	Wed Jun 14 16:08:31 2017 +0200
+++ b/client/src/components/SlateEditor.js	Wed Jun 14 18:23:18 2017 +0200
@@ -448,7 +448,7 @@
 
   renderEditor = () => {
     return (
-      <div className="editor">
+      <div className="editor-slatejs">
         {this.renderHoveringMenu()}
         <Editor
           ref="editor"