moves beta banner to underneath home splash

DataUSA · Apr 26, 2019 · 049492b · 049492b
1 parent 7c40cf2
commit 049492b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/app/App.jsx b/app/App.jsx
@@ -15,7 +15,7 @@ import Footer from "components/Footer/index";
 
 import albersUsaPr from "helpers/albersUsaPr";
 
-const launch = new Date("01 May 2019 08:00:00 GMT-0400");
+// const launch = new Date("01 May 2019 08:00:00 GMT-0400");
 
 class App extends Component {
 
@@ -24,7 +24,8 @@ class App extends Component {
     super(props);
 
     this.state = {
-      banner: new Date() < launch,
+      // banner: new Date() < launch,
+      banner: false,
       formatters: (props.formatters || []).reduce((acc, d) => {
         const f = Function("n", "libs", "formatters", d.logic);
         const fName = d.name.replace(/^\w/g, chr => chr.toLowerCase());

diff --git a/app/pages/Home/index.css b/app/pages/Home/index.css
@@ -67,10 +67,33 @@
       font-size: 20px;
     }
   }
+  & .subtitle {
+    background: var(--darkgray);
+    box-sizing: border-box;
+    color: white;
+    display: inline-block;
+    font-family: "Palanquin", sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.3;
+    margin: 0 auto;
+    max-width: calc(var(--home-search-width) - 50px);
+    padding: 5px 8px 7px;
+    position: relative;
+    width: calc(100% - 50px);
+    z-index: 0;
+    @media (max-width: 500px) {
+      font-size: 12px;
+      font-weight: 400;
+      & br {
+        display: none;
+      }
+    }
+  }
   & .home-search {
     box-sizing: border-box;
     height: var(--home-search-height);
-    margin: 35px auto;
+    margin: 35px auto 0;
     max-width: var(--home-search-width);
     padding: 0 25px;
     position: relative;
@@ -189,7 +212,7 @@
     }
   }
   & .sponsors {
-    margin: 75px 0 50px;
+    margin: 40px 0 50px;
     position: relative;
     width: 100%;
     & img {

diff --git a/app/pages/Home/index.jsx b/app/pages/Home/index.jsx
@@ -8,11 +8,16 @@ import Search from "toCanon/Search";
 
 import Column from "./Column";
 
+const launch = new Date("01 May 2019 08:00:00 GMT-0400");
+
 class Home extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {image: "rocky"};
+    this.state = {
+      banner: new Date() < launch,
+      image: "rocky"
+    };
   }
 
   onImage(e) {
@@ -22,7 +27,7 @@ class Home extends Component {
   render() {
 
     const {tiles} = this.props;
-    const {image} = this.state;
+    const {banner, image} = this.state;
 
     return (
       <div id="Home">
@@ -54,6 +59,8 @@ class Home extends Component {
           url="/api/search/"
         />
 
+        { banner ? <div className="subtitle">You are viewing a prototype for the new Data USA.<br />Beta testing will end on Wednesday May 1st at 8am EST.</div> : null }
+
         <div className="sponsors">
           <a target="_blank" rel="noopener noreferrer" href="http://www2.deloitte.com/us/en.html">
             <img id="deloitte" src="/images/home/logos/deloitte.png" />