[website] Add ibba banner to home page

hannkeat · Oct 16, 2018 · 36bc6ef · 36bc6ef
1 parent 18764a9
commit 36bc6ef
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/examples/demo-app/src/app.js b/examples/demo-app/src/app.js
@@ -44,7 +44,7 @@ import {updateVisData, addDataToMap} from 'kepler.gl/actions';
 import Processors from 'kepler.gl/processors';
 /* eslint-enable no-unused-vars */
 
-const bannerHeight = 30;
+const BannerHeight = 30;
 const BannerKey = 'kgHideBanner-iiba';
 
 const GlobalStyleDiv = styled.div`
@@ -191,7 +191,7 @@ class App extends Component {
       <GlobalStyleDiv>
         <Banner
           show={this.state.showBanner}
-          height={bannerHeight}
+          height={BannerHeight}
           bgColor="#82368c"
           onClose={this._hideBanner}
         >
@@ -202,9 +202,9 @@ class App extends Component {
             transition: 'margin 1s, height 1s',
             position: 'absolute',
             width: '100%',
-            height: showBanner ? `calc(100% - ${bannerHeight}px)` : '100%',
-            minHeight: `calc(100% - ${bannerHeight}px)`,
-            marginTop: showBanner ? `${bannerHeight}px` : 0
+            height: showBanner ? `calc(100% - ${BannerHeight}px)` : '100%',
+            minHeight: `calc(100% - ${BannerHeight}px)`,
+            marginTop: showBanner ? `${BannerHeight}px` : 0
           }}
         >
           <KeplerGl
@@ -215,7 +215,7 @@ class App extends Component {
              */
             getState={state => state.demo.keplerGl}
             width={width}
-            height={height - (showBanner ? bannerHeight : 0)}
+            height={height - (showBanner ? BannerHeight : 0)}
           />
         </div>
       </GlobalStyleDiv>

diff --git a/examples/demo-app/src/components/announcement.js b/examples/demo-app/src/components/announcement.js
@@ -43,8 +43,8 @@ const FormLink = 'https://www.informationisbeautifulawards.com/showcase/3082-kep
 
 const Announcement = ({onDisable}) => (
   <StyledText>
-    <span>Kepler.gl is shortlisted in the Information is Beautiful Award. Vote for us at </span>
-    <StyledLink target="_blank" href={FormLink}>this link</StyledLink>
+    <span>Kepler.gl is shortlisted in the Information is Beautiful Award.  </span>
+    <StyledLink target="_blank" href={FormLink}>Vote for us</StyledLink>
     <span>  before Fri 19th Oct!</span>
     {onDisable ? <DisableBanner>
       <StyledLink onClick={onDisable}>Already Voted!</StyledLink>

diff --git a/examples/demo-app/src/components/banner.js b/examples/demo-app/src/components/banner.js
@@ -45,7 +45,7 @@ const Banner = ({bgColor = '#1F7CF4', fontColor = '#FFFFFF', height = 30, childr
   bgColor={bgColor}
   fontColor={fontColor}
   height={height}
-  style={{top: show ? 0 : `-${height}px`}}>
+  style={{top: show ? 0 : `-100px`}}>
     <div>
       {children}
     </div>

diff --git a/website/src/components/home.js b/website/src/components/home.js
@@ -32,6 +32,11 @@ import Features from './features';
 import Footer from './footer';
 import Section from './common/section';
 import Header from './header';
+import Banner from '../../../examples/demo-app/src/components/banner';
+import Announcement from '../../../examples/demo-app/src/components/announcement';
+
+const BannerKey = 'kgHideBanner-iiba';
+const BannerHeight = 30;
 
 const SECTION_CONTENT = {
   showcase: Showcase,
@@ -42,10 +47,37 @@ const SECTION_CONTENT = {
 };
 
 export default class Home extends PureComponent {
+  state = {
+    showBanner: false
+  };
+
+  componentDidMount() {
+    // delay 2s to show the banner
+    if (!window.localStorage.getItem(BannerKey)) {
+      window.setTimeout(this._showBanner, 3000);
+    }
+  }
+
+  _showBanner = () => {
+    this.setState({showBanner: true});
+  };
+
+  _hideBanner = () => {
+    this.setState({showBanner: false});
+  };
+
   render() {
     return (
       <ThemeProvider theme={theme}>
         <div>
+          <Banner
+            show={this.state.showBanner}
+            height={BannerHeight}
+            bgColor="#82368c"
+            onClose={this._hideBanner}
+          >
+            <Announcement onDisable={this._disableBanner}/>
+          </Banner>
           <Header/>
           <Hero />
           {SECTIONS.map(