Hide toolbar on narrative mode

src/components/Card.jsx

@@ -129,11 +129,11 @@ class Card extends React.Component {
   renderHeader() {
     return (
       <div className="card-collapsed">
-        <div className="card-column">
+        <div className="card-row">
           {this.renderTimestamp()}
           {this.renderLocation()}
         </div>
-        {/* {this.renderCategory()} */}
+        {this.renderCategory()}
         <br/>
         {this.renderSummary()}
       </div>

src/components/Dashboard.jsx

@@ -109,9 +109,6 @@ class Dashboard extends React.Component {
           onSelect={this.handleSelect}
           actions={this.props.actions}
         />
-        <NarrativeCard
-          onSelect={this.handleSelect}
-        />
         <Notification
           isNotification={this.props.app.flags.isNotification}
           notifications={this.props.domain.notifications}

src/components/NarrativeCard.js

@@ -49,9 +49,12 @@ class NarrativeCard extends React.Component {
       return (
         <div className="narrative-info">
           {this.renderClose()}
-          <h6>{this.props.narrative.label}</h6>
+          <h3>{this.props.narrative.label}</h3>
           <p>{this.props.narrative.description}</p>
-          <h3>{this.state.step + 1}/{steps.length}. {step.location}</h3>
+          <h6>
+            <i className="material-icons left">location_on</i>
+            {this.state.step + 1}/{steps.length}. {step.location}
+          </h6>
           <div className="actions">
             <div className={`${(!this.state.step) ? 'disabled ' : ''} action`} onClick={() => this.goToPrevKeyFrame()}>&larr;</div>
             <div className={`${(this.state.step >= this.props.narrative.steps.length - 1) ? 'disabled ' : ''} action`} onClick={() => this.goToNextKeyFrame()}>&rarr;</div>

src/components/Timeline.jsx

@@ -47,6 +47,7 @@ class Timeline extends React.Component {
     const labels_title_lang = copy[this.props.app.language].timeline.labels_title;
     const info_lang = copy[this.props.app.language].timeline.info;
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
+    classes += this.props.app.narrative ? 'narrative-mode' : '';
     const date0 = formatterWithYear(this.props.app.timerange[0]);
     const date1 = formatterWithYear(this.props.app.timerange[1]);
 
@@ -80,7 +81,8 @@ function mapStateToProps(state) {
       timerange: selectors.getTimeRange(state),
       selected: state.app.selected,
       language: state.app.language,
-      zoomLevels: state.app.zoomLevels
+      zoomLevels: state.app.zoomLevels,
+      narrative: state.app.narrative
     },
     dom: state.ui.dom,
   }

src/components/Toolbar.jsx

@@ -175,7 +175,7 @@ class Toolbar extends React.Component {
 
   render() {
     return (
-      <div id="toolbar-wrapper" className="toolbar-wrapper">
+      <div id="toolbar-wrapper" className={`toolbar-wrapper ${this.props.narrative ? 'narrative-mode' : ''}`}>
         {this.renderToolbarTabs()}
         {this.renderToolbarPanels()}
       </div>
@@ -193,6 +193,7 @@ function mapStateToProps(state) {
     categoryFilter: state.app.filters.categories,
     viewFilters: state.app.filters.views,
     features: state.app.features,
+    narrative: state.app.narrative,
   }
 }
 

src/components/Viewport.jsx

@@ -19,8 +19,9 @@ class Viewport extends React.Component {
   }
 
   render() {
+    const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper';
     return (
-      <div className='map-wrapper'>
+      <div className={classes}>
         <div id="map" />
       </div>
     )
@@ -39,7 +40,8 @@ function mapStateToProps(state) {
       views: state.app.filters.views,
       selected: state.app.selected,
       highlighted: state.app.highlighted,
-      mapAnchor: state.app.mapAnchor
+      mapAnchor: state.app.mapAnchor,
+      narrative: state.app.narrative
     },
     ui: {
       dom: state.ui.dom,

src/js/map/map.js

@@ -17,6 +17,7 @@ export default function(newApp, ui, methods) {
   const app = {
     selected: [],
     highlighted: null,
+    narrative: null,
     views: Object.assign({}, newApp.views),
   }
 
@@ -362,7 +363,6 @@ Stop and start the development process in terminal after you have added your tok
       .exit()
       .remove();
 
-    let styleName
     narrativesDom
       .enter().append('path')
       .attr('class', 'narrative')
@@ -384,7 +384,24 @@ Stop and start the development process in terminal after you have added your tok
         const styleProps = getNarrativeStyle(d[0].narrative);
         return styleProps.stroke;
       })
+      .style('stroke-opacity', d => {
+        if (app.narrative === null) return 0;
+        if (!d[0] || app.narrative.id !== d[0].narrative) return 0.2;
+        return 1;
+      })
       .style('fill', 'none');
+
+    narrativesDom
+      .style('stroke', d => {
+        if (!d[0]) return 'none';
+        const styleProps = getNarrativeStyle(d[0].narrative);
+        return styleProps.stroke;
+      })
+      .style('stroke-opacity', d => {
+        if (app.narrative === null) return 0;
+        if (!d[0] || app.narrative.id !== d[0].narrative) return 0.2;
+        return 1;
+      })
   }
 
   /**
@@ -393,22 +410,25 @@ Stop and start the development process in terminal after you have added your tok
    */
   function update(newDomain, newApp) {
     updateSVG();
+    const isNewDomain = (hash(domain) !== hash(newDomain));
+    const isNewAppProps = (hash(app) !== hash(newApp));
 
-    if (hash(domain) !== hash(newDomain)) {
+    if (isNewDomain) {
       domain.locations = newDomain.locations;
       domain.narratives = newDomain.narratives;
       domain.categories = newDomain.categories;
       domain.sites = newDomain.sites;
-      renderDomain();
     }
 
-    if (hash(app) !== hash(newApp)) {
+    if (isNewAppProps) {
       app.selected = newApp.selected;
       app.highlighted = newApp.highlighted;
+      app.narrative = newApp.narrative;
       app.views = newApp.views;
-
-      renderSelectedAndHighlight();
     }
+
+    if (isNewDomain || isNewAppProps) renderDomain();
+    if (isNewAppProps) renderSelectedAndHighlight();
   }
 
   /**

src/scss/map.scss

@@ -27,8 +27,12 @@
     z-index: $hidden;
   }
   &.show {
-      z-index: $map;
+    z-index: $map;
   }
+  &.narrative-mode {
+    left: 0;
+  }
+  
   .event {
     fill: $event_default;
     cursor: pointer;

src/scss/narrativecard.scss

@@ -4,9 +4,9 @@ NARRATIVE INFO
 .narrative-info {
   position: fixed;
   top: 10px;
-  left: 130px;
+  left: 10px;
   height: auto;
-  width: 270px;
+  width: 370px;
   box-sizing: border-box;
   padding: 15px;
   max-height: calc(100% - 250px);
@@ -23,6 +23,10 @@ NARRATIVE INFO
 
   h3 {
     font-size: $large;
+    font-family: 'Merriweather', 'Georgia', serif;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    font-weight: 100;
   }
 
   p {

src/scss/timeline.scss

@@ -22,6 +22,10 @@
     }
   }
 
+  &.narrative-mode {
+    left: 0;
+  }
+
   .timeline-header {
     height: 0px;
     width: 100%;

src/scss/toolbar.scss

@@ -9,6 +9,10 @@
   z-index: $header;
   background: $midgrey;
 
+  &.narrative-mode {
+    left: -110px;
+  }
+
   .toolbar {
     position: relative;
     width: 110px;
@@ -292,37 +296,6 @@
     }
   }
 
-  .people-tab {
-    width: 50%;
-    font-family: 'Lato', Helvetica, sans-serif;
-    font-size: $normal;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-
-    svg {
-      transform: translate(-2px,0)scale(0.6);
-      &:hover {
-        transition: 0.2s ease;
-        stroke: $offwhite;
-      }
-    }
-
-    &.react-tabs__tab--selected {
-      svg circle,
-      svg path {
-        stroke: $offwhite;
-      }
-    }
-
-    svg circle,
-    svg path {
-      transition: 0.2s ease;
-      fill: none;
-      stroke: $midwhite;
-      stroke-width: 3;
-    }
-  }
-
   .react-tabs__tab-list {
     height: 40px;
     overflow: hidden;
@@ -362,6 +335,14 @@
       height: 0;
       margin: 0;
     }
+
+    .panel-header {
+      visibility: hidden;
+
+      .caret {
+        transform: translate(8px, 5px)rotate(225deg);
+      }
+    }
   }
 
   input {
@@ -491,7 +472,7 @@
       }
     }
 
-    &:first-child {
+    /*&:first-child {
       button { background-image: url("/static/archive/img/scene01.jpg"); }
     }
     &:nth-child(2n) {
@@ -503,114 +484,7 @@
 
     &.back-to-map {
         button { background-image: url("/static/archive/img/map.jpg"); }
-    }
-  }
-}
-
-.taggroup-wrapper {
-  margin-top: 30px;
-  z-index: 10;
-  border-bottom: none;
-
-  &:last-child {
-    margin-bottom: 0;
-    border-bottom: 1px solid rgba(white, 0);
-  }
-
-  &:hover {
-    transition: 0.1s ease;
-  }
-
-  .collapsible-item {
-    width: calc(100% - 32px);
-    float: left;
-  }
-
-  .taggroup-header {
-    width: 100%;
-    margin: 0;
-    font-size: $large;
-
-    h2::first-letter {
-      margin-top: 0;
-    }
-  }
-
-  .taggroup-content {
-    width: 100%;
-    display: inline-block;
-    padding-left: 10px;
-    box-sizing: border-box;
-    transition: 0.2s ease;
-
-    .tagsubgroup-wrapper {
-      border: none;
-      border-bottom: 1px solid rgba(white, 0.25);
-      &:first-letter {
-        text-transform: uppercase;
-      }
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .tagsubgroup-header {
-        cursor: pointer;
-      }
-
-      &.folded {
-        .tagsubgroup-content {
-          overflow: hidden;
-          padding: 0 10px;
-          transition: 0.2s ease;
-          height: 0;
-          border-top: 0;
-        }
-      }
-
-      .item {
-        overflow: auto;
-        min-height: 32px;
-        height: auto;
-
-        span {
-          height: auto;
-        }
-      }
-    }
-
-    .tag-filter {
-      outline: none;
-      border: 0;
-      background: none;
-      color: $offwhite;
-      margin-left: 20px;
-      width: calc(100% - 20px);
-      box-sizing: border-box;
-      padding: 0;
-      font-size: $normal;
-      font-weight: 400;
-      text-align: left;
-      cursor: pointer;
-      border: 1px solid $black;
-      border-bottom: 1px solid rgba(white, 0.25);
-      &:first-letter {
-        text-transform: uppercase;
-      }
-
-      &:last-child {
-        border-bottom: 1px solid rgba(white, 0);
-      }
-    }
-  }
-
-  &.folded {
-    .filter-list-content {
-      padding: 0 10px;
-      border-top: 0;
-      transition: 0.2s ease;
-      height: 0;
-    }
+    }*/
   }
 }