From 002447e70723ed5cb209a07fce959789b29d843e Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Tue, 8 Jan 2019 15:21:58 +0000
Subject: [PATCH] wip: narrative info to the right

---
 .../presentational/NarrativeCard.js           | 24 ++++++++------
 src/scss/cardstack.scss                       |  4 +--
 src/scss/narrativecard.scss                   | 32 +++++++++++++++++--
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/components/presentational/NarrativeCard.js b/src/components/presentational/NarrativeCard.js
index fc578c7..a181a9d 100644
--- a/src/components/presentational/NarrativeCard.js
+++ b/src/components/presentational/NarrativeCard.js
@@ -42,15 +42,21 @@ function NarrativeCard ({ narrative, methods }) {
 
     return (
       <div className='narrative-info'>
-        {renderClose()}
-        <h3>{narrative.label}</h3>
-        <p>{narrative.description}</p>
-        <h6>
-          <i className='material-icons left'>location_on</i>
-          {current + 1}/{steps.length}. {step.location}
-        </h6>
-        {_renderActions(current, steps)}
-      </div>
+        <div className='narrative-info-header'>
+          <div className='count-container'>
+            <div className='count'>
+              {current + 1}/{steps.length}
+            </div>
+          </div>
+          <div>
+            <h3>{narrative.label}</h3>
+          </div>
+        </div>
+
+        {/* <i className='material-icons left'>location_on</i> */}
+        {/* {_renderActions(current, steps)} */}
+        <p className='narrative-info-desc'>{narrative.description}</p>
+              </div>
     )
   } else {
     return null
diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss
index 0b83da3..5edf312 100644
--- a/src/scss/cardstack.scss
+++ b/src/scss/cardstack.scss
@@ -17,8 +17,8 @@ $timeline-height: 170px;
   color: white;
 
   &.narrative-mode {
-    right: auto;
-    left: 10px;
+    right: 10px;
+    left: auto;
     top: $narrative-info-max-height + 12px;
     height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px);
   }
diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss
index 36ebc63..b4c8930 100644
--- a/src/scss/narrativecard.scss
+++ b/src/scss/narrativecard.scss
@@ -6,20 +6,46 @@ NARRATIVE INFO
 .narrative-info {
   position: fixed;
   top: 10px;
-  left: 10px;
+  left: auto;
+  right: 10px;
   // height: auto;
   height: 170px;
   width: $narrative-info-width;
   box-sizing: border-box;
-  padding: 15px;
   max-height: calc(100% - 250px);
-  overflow: auto;
   box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22);
   background: $black;
   border: 1px solid $midgrey;
   color: $offwhite;
   font-family: 'Merriweather', 'Georgia', serif;
 
+  .narrative-info-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    border-bottom: 1px solid $darkwhite;
+    padding: 0 15px;
+
+    .count-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-right: 1px solid $darkwhite;
+    }
+    .count {
+      position: relative;
+      padding-right: 15px;
+    }
+  }
+
+  .narrative-info-desc {
+    overflow: auto;
+  }
+
+  p {
+    padding: 0 15px;
+  }
+
   h3, h6 {
     text-align: center;
   }