Improve session page layout, introduce summary.
--- a/client/src/App.scss Tue Jun 20 14:13:15 2017 +0200
+++ b/client/src/App.scss Tue Jun 20 16:08:12 2017 +0200
@@ -94,9 +94,20 @@
flex-direction: column;
justify-content: flex-end;
.session-notes {
- overflow-y: auto;
+ overflow-y: hidden;
width: 100%;
+ display: flex;
flex: 1;
+ > * {
+ padding-left: ($grid-gutter-width / 2);
+ padding-right: ($grid-gutter-width / 2);
+ }
+ .notes-affix {
+ min-width: 25%;
+ }
+ .notes-list {
+ overflow-y: auto;
+ }
}
}
--- a/client/src/components/Session.js Tue Jun 20 14:13:15 2017 +0200
+++ b/client/src/components/Session.js Tue Jun 20 16:08:12 2017 +0200
@@ -7,26 +7,26 @@
import NoteInput from './NoteInput';
import NotesList from './NotesList';
import SessionForm from './SessionForm';
+import SessionSummary from './SessionSummary';
import * as sessionsActions from '../actions/sessionsActions';
import * as notesActions from '../actions/notesActions';
class Session extends Component {
-
render() {
return (
<div>
<Navbar history={this.props.history} />
<div className="session-container">
- <Grid fluid className="session-notes">
- <Row>
- <Col md={3}>
- <SessionForm session={this.props.currentSession} />
- </Col>
- <Col md={9}>
- <NotesList notes={this.props.notes} />
- </Col>
- </Row>
- </Grid>
+ <div className="session-notes">
+ <div className="notes-affix">
+ <SessionSummary notes={this.props.notes} />
+ </div>
+ <div className="notes-list">
+ <SessionForm session={this.props.currentSession} />
+ <hr />
+ <NotesList notes={this.props.notes} />
+ </div>
+ </div>
<section className="editor-fixed">
<Grid fluid>
<Row>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SessionSummary.js Tue Jun 20 16:08:12 2017 +0200
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Panel, ListGroup, ListGroupItem } from 'react-bootstrap';
+import _ from 'lodash';
+import '../App.css';
+
+class SessionSummary extends Component {
+ render() {
+ return (
+ <Panel>
+ <ListGroup>
+ {this.props.notes.map((note) =>
+ <ListGroupItem key={note.get('_id')}>
+ <a href={'#note-' + note.get('_id')}>
+ <span className="text-muted">{note.startedAt} → {note.finishedAt}</span>
+ <span className="pull-right">{_.words(note.plain).length} words</span>
+ </a>
+ </ListGroupItem>
+ )}
+ </ListGroup>
+ </Panel>
+ );
+ }
+}
+
+function mapStateToProps(state, props) {
+ return props;
+}
+
+export default connect(mapStateToProps)(SessionSummary);