# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1497967692 -7200
# Node ID 4088f8dc6b5255704780919c45172d8a1e35ee87
# Parent  b2514a9bcd49db36cae8901ac4adfff0c5b7eceb
Improve session page layout, introduce summary.

diff -r b2514a9bcd49 -r 4088f8dc6b52 client/src/App.scss
--- 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;
+        }
     }
 }
 
diff -r b2514a9bcd49 -r 4088f8dc6b52 client/src/components/Session.js
--- 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>
diff -r b2514a9bcd49 -r 4088f8dc6b52 client/src/components/SessionSummary.js
--- /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);