rethink narrative adjust placement; add close

src/components/presentational/NarrativeAdjust.js

@@ -9,7 +9,7 @@ export default ({ isDisabled, direction, onClickHandler }) => {
       <i
         className={`material-icons ${isDisabled ? 'disabled' : ''}`}
       >
-        chevron_{direction}
+        {`chevron_${direction}`}
       </i>
     </div>
   )

src/components/presentational/NarrativeClose.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default ({ onClickHandler, closeMsg }) => {
+  return (
+    <div
+      className='narrative-close'
+      onClick={onClickHandler}
+    >
+      <button
+        className='side-menu-burg is-active'
+      >
+        <span></span>
+      </button>
+      <div className='close-text'>{closeMsg}</div>
+    </div>
+  )
+}

src/components/presentational/NarrativeControls.js

@@ -1,36 +1,9 @@
 import React from 'react'
 import NarrativeCard from './NarrativeCard'
 import NarrativeAdjust from './NarrativeAdjust'
+import NarrativeClose from './NarrativeClose'
 
 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>
-  //   )
-  // }
-
   if (!narrative) return null
 
   const { current, steps } = narrative
@@ -50,6 +23,10 @@ export default ({ narrative, methods }) => {
         direction='right'
         onClickHandler={methods.onNext}
       />
+      <NarrativeClose
+        onClickHandler={() => methods.onSelectNarrative(null)}
+        closeMsg='-- exit from narrative --'
+      />
     </React.Fragment>
   )
 }

src/scss/cardstack.scss

@@ -19,8 +19,8 @@ $timeline-height: 170px;
   &.narrative-mode {
     right: 10px;
     left: auto;
-    top: $narrative-info-max-height + 12px;
-    height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px);
+    top: $narrative-info-max-height + 12px + 20px;
+    height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px - 20px);
   }
 
   &.full-height {

src/scss/narrativecard.scss

@@ -6,7 +6,7 @@ NARRATIVE INFO
 */
 .narrative-info {
   position: fixed;
-  top: 10px;
+  top: 30px;
   left: auto;
   right: 10px;
   height: 170px;
@@ -106,17 +106,18 @@ NARRATIVE INFO
   position: fixed;
   // top: calc(50vh - 100pt);
   bottom: $timeline-height;
+  // top: 0;
   right: auto;
   background-color: rgba(0,0,0,0.8);
   z-index: 15; // z-index of card-stack is 10
 
   &.left {
-    left: 0;
+    right: calc(#{$narrative-info-width} - 70px);
   }
 
   &.right {
     // right: calc(#{$narrative-info-width} + 10px);
-    right: 0;
+    right: 10px;
   }
 
   .material-icons {
@@ -134,3 +135,50 @@ NARRATIVE INFO
     }
   }
 }
+
+.narrative-close {
+  display: flex;
+  justify-content: flex-start;
+  position: fixed;
+  padding: 2px 5px 0 5px;
+  // right: $narrative-info-width - 15px - 10px;
+  right: 10px;
+  top: 5px;
+  width: $narrative-info-width - 10px - 2px;
+  // width: 15px;
+  background-color: black;
+  height: 20px;
+  transition: background-color 0.2s ease;
+  border: 1px solid black;
+
+  button {
+    height: 15px;
+    width: 15px;
+  }
+
+  .close-text {
+    display: none;
+    color: $midgrey;
+    flex: 1;
+    width: 100%;
+    justify-content: center;
+    font-size: 10pt;
+  }
+
+  // disable whitening of crosshair on hover
+  button {
+    span, span:before, span:after {
+      background: $midwhite !important;
+    }
+  }
+
+
+  &:hover {
+    cursor: pointer;
+    background-color: $offwhite;
+    color: black;
+    .close-text {
+      display: flex;
+    }
+  }
+}