display narrative events only in narrative mode; make card more minimal

src/components/Card.jsx

@@ -21,19 +21,13 @@ class Card extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      isHighlighted: false
+      isOpen: false
     }
   }
 
   toggle() {
     this.setState({
-      isHighlighted: !this.state.isHighlighted
-    }, () => {
-      if (!this.state.isHighlighted) {
-        this.props.onHighlight(this.props.event)
-      } else {
-        this.props.onHighlight(null)
-      }
+      isOpen: !this.state.isOpen
     })
   }
 
@@ -49,13 +43,14 @@ class Card extends React.Component {
     const categoryLabel = this.props.event.category
     const color = this.props.getCategoryColor(this.props.event.category)
 
-    return (
-      <CardCategory
-        categoryTitle={categoryTitle}
-        categoryLabel={categoryLabel}
-        color={color}
-      />
-    )
+    return null
+    // return (
+    //   <CardCategory
+    //     categoryTitle={categoryTitle}
+    //     categoryLabel={categoryLabel}
+    //     color={color}
+    //   />
+    // )
   }
 
   renderSummary() {
@@ -63,7 +58,7 @@ class Card extends React.Component {
       <CardSummary
         language={this.props.language}
         description={this.props.event.description}
-        isHighlighted={this.state.isHighlighted}
+        isOpen={this.state.isOpen}
       />
     )
   }
@@ -96,7 +91,7 @@ class Card extends React.Component {
 
     const source_lang = copy[this.props.language].cardstack.sources
     return (
-      <div className="card-col">
+      <div className='card-col'>
         <h4>{source_lang}: </h4>
         {this.props.event.sources.map(source => (
           <CardSource
@@ -136,49 +131,45 @@ class Card extends React.Component {
     }
   }
 
-  renderHeader() {
+  renderMain() {
     return (
-      <div className="card-collapsed">
-        <div className="card-row">
+      <div className='card-container'>
+        <div className='card-row details'>
           {this.renderTimestamp()}
           {this.renderLocation()}
         </div>
         {this.renderCategory()}
-        <br/>
         {this.renderSummary()}
       </div>
     )
   }
 
-  renderContent() {
-    if (this.state.isHighlighted) {
-      return (
-        <div className="card-bottomhalf">
-          {this.renderTags()}
-          {this.renderSources()}
-          {this.renderNarrative()}
-        </div>
-      )
-    } else {
-      return <div classname="card-bottomhalf"></div>
-    }
+  renderExtra() {
+    return (
+      <div className='card-bottomhalf'>
+        {this.renderTags()}
+        {this.renderSources()}
+        {this.renderNarrative()}
+      </div>
+    )
   }
 
   renderCaret() {
     return (
       <CardCaret
         toggle={() => this.toggle()}
-        isHighlighted={this.state.isHighlighted}
+        isOpen={this.state.isOpen}
       />
     )
   }
 
   render() {
+    const { isSelected } = this.props
     return (
-      <li className='event-card'>
-        {this.renderHeader()}
-        {this.renderContent()}
-        {this.renderCaret()}
+     <li className={`event-card ${isSelected ? 'selected' : ''}`}>
+        {this.renderMain()}
+        {this.state.isOpen ? this.renderExtra() : null}
+        {isSelected ? this.renderCaret() : null}
       </li>
     )
   }

src/components/CardStack.jsx

@@ -9,13 +9,18 @@ import {
 } from '../js/utilities.js'
 
 class CardStack extends React.Component {
-  renderCards(events) {
-    return events.map(event => (
+  renderCards(events, selections) {
+    // if no selections provided, select all
+    if (!selections)
+      selections = events.map(e => true)
+
+    return events.map((event, idx) => (
       <Card
         event={event}
         sourceError={this.props.sourceError}
         language={this.props.language}
         isLoading={this.props.isLoading}
+        isSelected={selections[idx]}
         getNarrativeLinks={this.props.getNarrativeLinks}
         getCategoryGroup={this.props.getCategoryGroup}
         getCategoryColor={this.props.getCategoryColor}
@@ -37,7 +42,11 @@ class CardStack extends React.Component {
 
   renderNarrativeCards() {
     const { narrative } = this.props
-    return this.renderCards(narrative.steps)
+    const showing = narrative.steps.slice(narrative.current)
+    const selections = showing
+      .map((_, idx) => (idx === 0))
+
+    return this.renderCards(showing, selections)
   }
 
   renderCardStackHeader() {

src/components/Timeline.jsx

@@ -34,18 +34,20 @@ class Timeline extends React.Component {
   }
 
   render() {
+    const { isNarrative, app, ui } = this.props
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
-    classes += (this.props.app.narrative !== null) ? ' narrative-mode' : '';
+    classes += (app.narrative !== null) ? ' narrative-mode' : '';
     return (
       <div className={classes}>
         <TimelineHeader
-          title={copy[this.props.app.language].timeline.info}
-          date0={formatterWithYear(this.props.app.timerange[0])}
-          date1={formatterWithYear(this.props.app.timerange[1])}
+          title={copy[app.language].timeline.info}
+          date0={formatterWithYear(app.timerange[0])}
+          date1={formatterWithYear(app.timerange[1])}
           onClick={() => { this.onClickArrow(); }}
+          hideInfo={isNarrative}
         />
         <div className="timeline-content">
-          <div id={this.props.ui.dom.timeline} className="timeline" />
+          <div id={ui.dom.timeline} className="timeline" />
         </div>
       </div>
     );
@@ -54,6 +56,7 @@ class Timeline extends React.Component {
 
 function mapStateToProps(state) {
   return {
+    isNarrative: !!state.app.narrative,
     domain: {
       events: state.domain.events,
       categories: selectors.selectCategories(state),

src/components/presentational/TimelineHeader.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-const TimelineHeader = ({ title, date0, date1, onClick }) => (
-  <div className="timeline-header">
-    <div className="timeline-toggle" onClick={() => onClick()}>
-      <p><i className="arrow-down"></i></p>
+const TimelineHeader = ({ title, date0, date1, onClick, hideInfo }) => (
+  <div className='timeline-header'>
+    <div className='timeline-toggle' onClick={() => onClick()}>
+      <p><i className='arrow-down'></i></p>
     </div>
-    <div className="timeline-info">
+    <div className={`timeline-info ${hideInfo ? 'hidden' : ''}`}>
       <p>{title}</p>
       <p>{date0} - {date1}</p>
     </div>