move precincts reporting if we're not showing the loading bar

The-Politico · Dec 11, 2017 · 4d5f08f · 4d5f08f
1 parent 255ed24
commit 4d5f08f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/theshow/staticapp/src/js/race-app/components/FetchRefresh.jsx b/theshow/staticapp/src/js/race-app/components/FetchRefresh.jsx
@@ -56,7 +56,7 @@ class ResultsMap extends React.Component {
   render() {
     return (
       <div>
-        <div id="fetch-refresh-widget-component" />
+        <div id="fetch-refresh-widget-component" hidden={this.props.hidden} />
       </div>
     );
   }

diff --git a/theshow/staticapp/src/js/race-app/containers/TopResults.jsx b/theshow/staticapp/src/js/race-app/containers/TopResults.jsx
@@ -6,21 +6,22 @@ import FetchRefresh from '../components/FetchRefresh';
 
 const TopResults = (props) => {
   const status = getStatus(props);
-  const loadingBar = status.tabulated || status.precinctsReportingPct === 1 ? null : (
-    <FetchRefresh fetch={props.fetch} actions={props.actions} />
-  );
+  const doneWithResults = status.tabulated || status.precinctsReportingPct === 1;
 
   return (
     <div className="top-results row-fluid section">
       <div className="content-extra-large">
         <div className="loading-bar">
-          {loadingBar}
+          <FetchRefresh fetch={props.fetch} actions={props.actions} hidden={doneWithResults} />
         </div>
-        <div className="precincts-reporting-topline">
+        <div className="precincts-reporting-topline" hidden={doneWithResults}>
           <span>Precincts reporting: {(status.precinctsReportingPct * 100).toFixed(1)}%</span>
         </div>
         <div className="bar">
           <ResultsBar session={props.session} />
+          <div className="precincts-reporting-topline" hidden={!doneWithResults}>
+            <span>Precincts reporting: {(status.precinctsReportingPct * 100).toFixed(1)}%</span>
+          </div>
         </div>
         <div className="map">
           <ResultsMap session={props.session} />

diff --git a/theshow/staticapp/src/scss/main.scss b/theshow/staticapp/src/scss/main.scss
@@ -171,6 +171,10 @@ $usDemographic-container: '.demographic-map';
         width: 100%;
         margin: 0;
       }
+
+    .precincts-reporting-topline {
+      margin-top: 0;
+    }
   }
   .map{
     width: 60%;