refactor controls out of NarrativeCard

src/components/Dashboard.jsx

@@ -9,15 +9,13 @@ import LoadingOverlay from './presentational/LoadingOverlay'
 import Map from './Map.jsx'
 import Toolbar from './Toolbar.jsx'
 import CardStack from './CardStack.jsx'
-import NarrativeCard from './presentational/NarrativeCard.js'
+import NarrativeControls from './presentational/NarrativeControls.js'
 import InfoPopUp from './InfoPopup.jsx'
 import Timeline from './Timeline.jsx'
 import Notification from './Notification.jsx'
 
 import { parseDate } from '../js/utilities'
 
-import { injectNarrative } from '../js/utilities'
-
 class Dashboard extends React.Component {
   constructor(props) {
     super(props)
@@ -119,13 +117,6 @@ class Dashboard extends React.Component {
             getCategoryColor: category => this.getCategoryColor(category)
           }}
         />
-        <NarrativeCard
-          methods={{
-            onNext: () => this.moveInNarrative(1),
-            onPrev: () => this.moveInNarrative(-1),
-            onSelectNarrative: this.setNarrative
-          }}
-        />
         <CardStack
           onViewSource={this.handleViewSource}
           onSelect={this.handleSelect}
@@ -134,6 +125,13 @@ class Dashboard extends React.Component {
           getNarrativeLinks={event => this.getNarrativeLinks(event)}
           getCategoryColor={category => this.getCategoryColor(category)}
         />
+        <NarrativeControls
+          methods={{
+            onNext: () => this.moveInNarrative(1),
+            onPrev: () => this.moveInNarrative(-1),
+            onSelectNarrative: this.setNarrative
+          }}
+        />
         <InfoPopUp
           ui={ui}
           app={app}

src/components/Timeline.jsx

@@ -28,7 +28,7 @@ class Timeline extends React.Component {
         height_controls: 115,
         margin_left: 120,
         margin_top: 20,
-        trackHeight: 80      
+        trackHeight: 80
       },
       scaleX: null,
       scaleY: null,
@@ -228,7 +228,7 @@ class Timeline extends React.Component {
           transitionDuration={this.state.transitionDuration}
           scaleX={this.state.scaleX}
         />
-        <TimelineCategories 
+        <TimelineCategories
           dims={dims}
           onDragStart={() => { this.onDragStart() }}
           onDrag={() => { this.onDrag() }}
@@ -264,7 +264,7 @@ class Timeline extends React.Component {
           onSelect={this.props.methods.onSelect}
         />
       </svg>
-    ); 
+    )
   }
 
   render() {

src/components/presentational/NarrativeCard.js

@@ -2,35 +2,34 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { selectActiveNarrative } from '../../selectors'
 
-function NarrativeCard ({ narrative, methods }) {
-  const { onSelectNarrative, onNext, onPrev  } = methods
-  function renderClose() {
-    return (
-      <button
-        className='side-menu-burg is-active'
-        onClick={() => { onSelectNarrative(null) }}
-      >
-        <span></span>
-      </button>
-    )
-  }
+function NarrativeCard ({ narrative }) {
+  // function renderClose() {
+  //   return (
+  //     <button
+  //       className='side-menu-burg is-active'
+  //       onClick={() => { onSelectNarrative(null) }}
+  //     >
+  //       <span></span>
+  //     </button>
+  //   )
+  // }
 
-  function _renderActions(current, steps) {
-    const prevExists = current !== 0
-    const nextExists = current < steps.length - 1
-    return (
-      <div className='actions'>
-        <div
-          className={`${prevExists ? '' : 'disabled'} action`}
-          onClick={prevExists ? onPrev : null}>&larr;
-        </div>
-        <div
-          className={`${nextExists ? '' : 'disabled'} action`}
-          onClick={nextExists ? onNext : null}>&rarr;
-        </div>
-      </div>
-    )
-  }
+  // function _renderActions(current, steps) {
+  //   const prevExists = current !== 0
+  //   const nextExists = current < steps.length - 1
+  //   return (
+  //     <div className='actions'>
+  //       <div
+  //         className={`${prevExists ? '' : 'disabled'} action`}
+  //         onClick={prevExists ? onPrev : null}>&larr;
+  //       </div>
+  //       <div
+  //         className={`${nextExists ? '' : 'disabled'} action`}
+  //         onClick={nextExists ? onNext : null}>&rarr;
+  //       </div>
+  //     </div>
+  //   )
+  // }
 
   // no display if no narrative
   if (!narrative) return null

src/components/presentational/NarrativeControls.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import NarrativeCard from './NarrativeCard'
+
+export default ({ narrative, methods }) => {
+  // function renderClose() {
+  //   return (
+  //     <button
+  //       className='side-menu-burg is-active'
+  //       onClick={() => { onSelectNarrative(null) }}
+  //     >
+  //       <span></span>
+  //     </button>
+  //   )
+  // }
+
+  // function _renderActions(current, steps) {
+  //   const prevExists = current !== 0
+  //   const nextExists = current < steps.length - 1
+  //   return (
+  //     <div className='actions'>
+  //       <div
+  //         className={`${prevExists ? '' : 'disabled'} action`}
+  //         onClick={prevExists ? onPrev : null}>&larr;
+  //       </div>
+  //       <div
+  //         className={`${nextExists ? '' : 'disabled'} action`}
+  //         onClick={nextExists ? onNext : null}>&rarr;
+  //       </div>
+  //     </div>
+  //   )
+  // }
+
+
+
+  return (
+    <React.Fragment>
+      <NarrativeCard narrative={narrative} />
+    </React.Fragment>
+  )
+}

src/scss/card.scss

@@ -42,10 +42,6 @@
     margin: 5px 0 10px 0;
     padding-bottom: 10px;
 
-    &.details {
-      border-bottom: 1px solid $lightwhite;
-    }
-
     .card-cell {
       flex: 1;
    }