Merge branch 'issue37' into 'master'

display beginning of the content in collapsed view. It fixes #37.

Closes #37

See merge request !28

src/components/Event/EventHeader.jsx

@@ -104,18 +104,36 @@ class EventHeader extends React.Component {
                 )
 
             } else if (this.props.mode === 'collapsed') {
+                let numberOFCharactertoDisplay = 100;
+                let firstLettersOfContent;
+                if (this.props.event.content[0].text) {
+                    let AllLettersOfContent = this.props.event.content[0].text
+                    if (AllLettersOfContent.length > 100) {
+                        firstLettersOfContent = AllLettersOfContent.slice(0, 100) + " ..."
+                    } else {
+                        firstLettersOfContent = AllLettersOfContent.slice(0, 100)
+                    }
+                }
+
                 return (
                     <Panel.Heading bsClass='collapsedEventPanel'>
                         <Row >
                             <Col xs={1}>
-                                {getEventCreationDate(originalEvent)}
+                                <div style={{ position: 'absolute', right: '30px' }} > {getEventCreationDate(originalEvent)} </div>
                             </Col>
                             <Col xs={1}>
                                 {eventCategoryIcon(originalEvent.category)}
                             </Col>
-                            <Col xs={8}>
+                            <Col xs={2}>
                                 <span style={{ cursor: 'pointer', color: '#007bff' }} onClick={() => { this.props.toggleMode(EXPANDED_VIEW_MODE) }}> {event.title || "User comment"} </span>
                             </Col>
+                            <Col xs={6}>
+                                <div style={{
+                                    background: 'linear-gradient(to right, #999999, #ffffff)', webkitBackgroundClip: 'text', webkitTextFillColor: 'transparent'
+                                }}>
+                                    {firstLettersOfContent}
+                                </div>
+                            </Col>
                             <Col xs={2}>
                                 {this.props.event.tag[0]}
                             </Col>

src/components/Event/List.jsx

@@ -150,7 +150,7 @@ const TimeAxisMarks = (props) => (
         <Col xs={1}> </Col>
         <Col xs={11}>
             <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip"> <p> Events created on {props.value} </p> </Tooltip>}>
-                <span style={{ color: '#777777', marginLeft: '-30px', fontStyle: 'italic' }}> {Moment(props.value).format("MMM D")} </span>
+                <span style={{ color: '#777777', marginLeft: '-100px', fontStyle: 'italic' }}> {Moment(props.value).format("MMM D")} </span>
             </OverlayTrigger>
         </Col>
     </Row>