Hide toolbar on narrative mode

src/components/Card.jsx

@@ -129,11 +129,11 @@ class Card extends React.Component {
   renderHeader() {
     return (
       <div className="card-collapsed">
-        <div className="card-column">
+        <div className="card-row">
           {this.renderTimestamp()}
           {this.renderLocation()}
         </div>
-        {/* {this.renderCategory()} */}
+        {this.renderCategory()}
         <br/>
         {this.renderSummary()}
       </div>

src/components/Dashboard.jsx

@@ -109,9 +109,6 @@ class Dashboard extends React.Component {
           onSelect={this.handleSelect}
           actions={this.props.actions}
         />
-        <NarrativeCard
-          onSelect={this.handleSelect}
-        />
         <Notification
           isNotification={this.props.app.flags.isNotification}
           notifications={this.props.domain.notifications}

src/components/NarrativeCard.js

@@ -49,9 +49,12 @@ class NarrativeCard extends React.Component {
       return (
         <div className="narrative-info">
           {this.renderClose()}
-          <h6>{this.props.narrative.label}</h6>
+          <h3>{this.props.narrative.label}</h3>
           <p>{this.props.narrative.description}</p>
-          <h3>{this.state.step + 1}/{steps.length}. {step.location}</h3>
+          <h6>
+            <i className="material-icons left">location_on</i>
+            {this.state.step + 1}/{steps.length}. {step.location}
+          </h6>
           <div className="actions">
             <div className={`${(!this.state.step) ? 'disabled ' : ''} action`} onClick={() => this.goToPrevKeyFrame()}>&larr;</div>
             <div className={`${(this.state.step >= this.props.narrative.steps.length - 1) ? 'disabled ' : ''} action`} onClick={() => this.goToNextKeyFrame()}>&rarr;</div>

src/components/Timeline.jsx

@@ -47,6 +47,7 @@ class Timeline extends React.Component {
     const labels_title_lang = copy[this.props.app.language].timeline.labels_title;
     const info_lang = copy[this.props.app.language].timeline.info;
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
+    classes += this.props.app.narrative ? 'narrative-mode' : '';
     const date0 = formatterWithYear(this.props.app.timerange[0]);
     const date1 = formatterWithYear(this.props.app.timerange[1]);
 
@@ -80,7 +81,8 @@ function mapStateToProps(state) {
       timerange: selectors.getTimeRange(state),
       selected: state.app.selected,
       language: state.app.language,
-      zoomLevels: state.app.zoomLevels
+      zoomLevels: state.app.zoomLevels,
+      narrative: state.app.narrative
     },
     dom: state.ui.dom,
   }

src/components/Toolbar.jsx

@@ -175,7 +175,7 @@ class Toolbar extends React.Component {
 
   render() {
     return (
-      <div id="toolbar-wrapper" className="toolbar-wrapper">
+      <div id="toolbar-wrapper" className={`toolbar-wrapper ${this.props.narrative ? 'narrative-mode' : ''}`}>
         {this.renderToolbarTabs()}
         {this.renderToolbarPanels()}
       </div>
@@ -193,6 +193,7 @@ function mapStateToProps(state) {
     categoryFilter: state.app.filters.categories,
     viewFilters: state.app.filters.views,
     features: state.app.features,
+    narrative: state.app.narrative,
   }
 }
 

src/components/Viewport.jsx

@@ -19,8 +19,9 @@ class Viewport extends React.Component {
   }
 
   render() {
+    const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper';
     return (
-      <div className='map-wrapper'>
+      <div className={classes}>
         <div id="map" />
       </div>
     )
@@ -39,7 +40,8 @@ function mapStateToProps(state) {
       views: state.app.filters.views,
       selected: state.app.selected,
       highlighted: state.app.highlighted,
-      mapAnchor: state.app.mapAnchor
+      mapAnchor: state.app.mapAnchor,
+      narrative: state.app.narrative
     },
     ui: {
       dom: state.ui.dom,