narratives: Add beginning/exit links in mobile

Similar to the desktop narratives display, add links to the end of
narratives page to jump to the beginning or exit narrative view.

src/components/narrative/MobileNarrativeDisplay.js

@@ -2,7 +2,13 @@ import React from "react";
 import { connect } from "react-redux";
 import queryString from "query-string";
 import { changePage, EXPERIMENTAL_showMainDisplayMarkdown } from "../../actions/navigation";
-import { MobileBannerTop, MobileBannerBottom, MobileContentContainer } from "./styles";
+import { TOGGLE_NARRATIVE } from "../../actions/types";
+import {
+  linkStyles,
+  MobileBannerTop,
+  MobileBannerBottom,
+  MobileContentContainer
+} from "./styles";
 import Tree from "../tree";
 import Map from "../map/map";
 import MainDisplayMarkdown from "./MainDisplayMarkdown";
@@ -31,6 +37,9 @@ class MobileNarrativeDisplay extends React.Component {
     this.state = {
       showingEndOfNarrativePage: false
     };
+    this.exitNarrativeMode = () => {
+      this.props.dispatch({type: TOGGLE_NARRATIVE, display: false});
+    };
     this.goToNextPage = () => {
       if (this.state.showingEndOfNarrativePage) return; // no-op
       if (this.props.currentInFocusBlockIdx+1 === this.props.blocks.length) {
@@ -113,7 +122,18 @@ class MobileNarrativeDisplay extends React.Component {
           Previous
         </MobileBannerTop>
         <MobileContentContainer height={contentHeight+bannerHeight}>
-          <h1>End</h1>
+          <h1>End of Narrative</h1>
+          <a style={{...linkStyles, textAlign: "center"}}
+            onClick={() => this._goToPage(0)}
+          >
+            Jump to the beginning
+          </a>
+          <br />
+          <a style={{...linkStyles, textAlign: "center"}}
+            onClick={this.exitNarrativeMode}
+          >
+            Explore the data
+          </a>
         </MobileContentContainer>
       </>
     );