add NarrativeAdjust as arrows above timeline

src/components/Dashboard.jsx

@@ -126,6 +126,10 @@ class Dashboard extends React.Component {
           getCategoryColor={category => this.getCategoryColor(category)}
         />
         <NarrativeControls
+          narrative={!!app.narrative ? {
+            ...app.narrative,
+            current: app.narrativeState.current
+          } : null}
           methods={{
             onNext: () => this.moveInNarrative(1),
             onPrev: () => this.moveInNarrative(-1),
@@ -165,16 +169,6 @@ function mapDispatchToProps(dispatch) {
   }
 }
 
-function injectSource(id) {
-  return state => ({
-    ...state,
-    app: {
-      ...state.app,
-      source: state.domain.sources[id]
-    }
-  })
-}
-
 export default connect(
   state => state,
   mapDispatchToProps,

src/components/presentational/NarrativeAdjust.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default ({ isDisabled, direction, onClickHandler }) => {
+  return (
+    <div
+      className={`narrative-adjust ${direction}`}
+      onClick={!isDisabled ? onClickHandler : null}
+    >
+      <i
+        className={`material-icons ${isDisabled ? 'disabled' : ''}`}
+      >
+        chevron_{direction}
+      </i>
+    </div>
+  )
+}

src/components/presentational/NarrativeCard.js

@@ -3,37 +3,7 @@ import { connect } from 'react-redux'
 import { selectActiveNarrative } from '../../selectors'
 
 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>
-  //   )
-  // }
-
-  // no display if no narrative
-  if (!narrative) return null
-
+    // no display if no narrative
   const { steps, current } = narrative
 
   if (steps[current]) {

src/components/presentational/NarrativeControls.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import NarrativeCard from './NarrativeCard'
+import NarrativeAdjust from './NarrativeAdjust'
 
 export default ({ narrative, methods }) => {
   // function renderClose() {
@@ -30,11 +31,25 @@ export default ({ narrative, methods }) => {
   //   )
   // }
 
+  if (!narrative) return null
 
+  const { current, steps } = narrative
+  const prevExists = current !== 0
+  const nextExists = current < steps.length - 1
 
   return (
     <React.Fragment>
       <NarrativeCard narrative={narrative} />
+      <NarrativeAdjust
+        isDisabled={!prevExists}
+        direction='left'
+        onClickHandler={methods.onPrev}
+      />
+      <NarrativeAdjust
+        isDisabled={!nextExists}
+        direction='right'
+        onClickHandler={methods.onNext}
+      />
     </React.Fragment>
   )
 }

src/scss/narrativecard.scss

@@ -1,4 +1,5 @@
 $narrative-info-width: 370px;
+$timeline-height: 170px;
 
 /*
 NARRATIVE INFO
@@ -8,7 +9,6 @@ NARRATIVE INFO
   top: 10px;
   left: auto;
   right: 10px;
-  // height: auto;
   height: 170px;
   width: $narrative-info-width;
   box-sizing: border-box;
@@ -101,3 +101,36 @@ NARRATIVE INFO
     }
   }
 }
+
+.narrative-adjust {
+  position: fixed;
+  // top: calc(50vh - 100pt);
+  bottom: $timeline-height;
+  right: auto;
+  background-color: rgba(0,0,0,0.8);
+  z-index: 15; // z-index of card-stack is 10
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    // right: calc(#{$narrative-info-width} + 10px);
+    right: 0;
+  }
+
+  .material-icons {
+    font-size: 60pt;
+    color: $offwhite;
+    transition: color 0.2s ease;
+
+    &.disabled {
+      color: $darkgrey;
+    }
+
+    &:hover {
+      cursor: pointer;
+      color: $darkgrey;
+    }
+  }
+}