move card to left in narrative mode

src/components/CardStack.jsx

@@ -65,9 +65,16 @@ class CardStack extends React.Component {
   }
 
   render() {
-    if (this.props.selected.length > 0) {
+    const { isCardstack, isNarrative, selected } = this.props
+    if (selected.length > 0) {
       return (
-        <div id="card-stack" className={`card-stack ${this.props.isCardstack ? '' : ' folded'}`}>
+        <div
+          id="card-stack"
+          className={`card-stack
+            ${isNarrative ? 'narrative-mode' : ''}
+            ${isCardstack ? '' : ' folded'}`
+          }
+        >
           {this.renderCardStackHeader()}
           {this.renderCardStackContent()}
         </div>

src/components/Dashboard.jsx

@@ -78,6 +78,7 @@ class Dashboard extends React.Component {
       this.handleSelect([ narrative.steps[0] ])
     this.props.actions.updateNarrative(narrative)
   }
+
   moveInNarrative(amt) {
     const { current } = this.props.app.narrativeState
     const { narrative } = this.props.app

src/scss/cardstack.scss

@@ -1,7 +1,9 @@
 @import 'burger';
 @import 'card';
 
-$card-width: 500px;
+$card-width: 370px;
+$narrative-info-max-height: 250px;
+$timeline-height: 170px;
 
 .card-stack {
   position: absolute;
@@ -15,6 +17,13 @@ $card-width: 500px;
   color: white;
   -webkit-font-smoothing: antialiased;
 
+  &.narrative-mode {
+    right: auto;
+    left: 10px;
+    top: $narrative-info-max-height;
+    height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height});
+  }
+
   &.full-height {
     max-height: calc(100% - 20px);
   }

src/scss/narrativecard.scss

@@ -1,3 +1,5 @@
+$narrative-info-width: 370px;
+
 /*
 NARRATIVE INFO
 */
@@ -6,10 +8,9 @@ NARRATIVE INFO
   top: 10px;
   left: 10px;
   // height: auto;
-  min-height: 500px;
   height: auto;
   max-height: 500px;
-  width: 370px;
+  width: $narrative-info-width;
   box-sizing: border-box;
   padding: 15px;
   max-height: calc(100% - 250px);