narratives: Refactor end of narrative block

Use a styled component to replace the inline styling in the final block for narratives. For desktop, change the `div` tags used in the end of narrative block links to be `a` tags, and change the `h3` header to `h1` for improved accessibility.
nextstrain · Jan 29, 2020 · 58903f6 · 58903f6
1 parent 9dc5304
commit 58903f6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/src/components/narrative/MobileNarrativeDisplay.js b/src/components/narrative/MobileNarrativeDisplay.js
@@ -7,7 +7,8 @@ import {
   linkStyles,
   MobileBannerTop,
   MobileBannerBottom,
-  MobileContentContainer
+  MobileContentContainer,
+  EndOfNarrative
 } from "./styles";
 import Tree from "../tree";
 import Map from "../map/map";
@@ -122,18 +123,20 @@ class MobileNarrativeDisplay extends React.Component {
           Previous
         </MobileBannerTop>
         <MobileContentContainer height={contentHeight+bannerHeight}>
-          <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>
+          <EndOfNarrative>
+            <h1>End of Narrative</h1>
+            <a style={{...linkStyles}}
+              onClick={() => this._goToPage(0)}
+            >
+              Jump to the beginning
+            </a>
+            <br />
+            <a style={{...linkStyles}}
+              onClick={this.exitNarrativeMode}
+            >
+              Explore the data
+            </a>
+          </EndOfNarrative>
         </MobileContentContainer>
       </>
     );

diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js
@@ -3,7 +3,7 @@ import React from "react";
 import { connect } from "react-redux";
 import queryString from "query-string";
 import Mousetrap from "mousetrap";
-import { NarrativeStyles, linkStyles, OpacityFade } from './styles';
+import { NarrativeStyles, linkStyles, OpacityFade, EndOfNarrative } from './styles';
 import ReactPageScroller from "./ReactPageScroller";
 import { changePage, EXPERIMENTAL_showMainDisplayMarkdown } from "../../actions/navigation";
 import { CHANGE_URL_QUERY_BUT_NOT_REDUX_STATE, TOGGLE_NARRATIVE } from "../../actions/types";
@@ -151,21 +151,20 @@ class Narrative extends React.Component {
       />
     ));
     ret.push((
-      <div key="EON" id="EndOfNarrative" style={{flexBasis: "50%", flexShrink: 0}}>
-        <h3 style={{textAlign: "center"}}>
-          END OF NARRATIVE
-        </h3>
-        <div style={{...linkStyles, textAlign: "center"}}
+      <EndOfNarrative key="EON" id="EndOfNarrative">
+        <h1>END OF NARRATIVE</h1>
+        <a style={{...linkStyles}}
           onClick={() => this.reactPageScroller.goToPage(0)}
         >
           Scroll back to the beginning
-        </div>
-        <div style={{...linkStyles, textAlign: "center", marginTop: "10px"}}
+        </a>
+        <br />
+        <a style={{...linkStyles}}
           onClick={this.exitNarrativeMode}
         >
           Leave the narrative & explore the data yourself
-        </div>
-      </div>
+        </a>
+      </EndOfNarrative>
     ));
     return ret;
   }

diff --git a/src/components/narrative/styles.js b/src/components/narrative/styles.js
@@ -161,6 +161,13 @@ const baseBannerStyles = css`
   text-align: center;
 `;
 
+export const EndOfNarrative = styled.div`
+  text-align: center;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-row-gap: 10px;
+`;
+
 export const MobileBannerTop = styled.div`
   ${baseBannerStyles}
   top: 0;