Improve session page design.
--- 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%;
}
--- 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>
);
--- 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>
);
}
--- 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"