Add BottomBanner for survey popup

src/components/common/BottomBanner.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
+import debounce from 'lodash'
+
+const BottomBanner = ({ title, url, buttonText, text, imageUrl }) => {
+    function closeBanner(e) {
+        e.preventDefault()
+        if (typeof window !== "undefined") {
+            var banners = document.getElementsByClassName('bottom-banner')
+            for (var i=0;i<banners.length;i++) {
+                banners[i].classList.add('hidden')
+                banners[i].classList.add('closed')
+            }
+        }
+    }
+    
+    function showBanner() {
+        // TODO: debounce this?
+        if (typeof window !== "undefined") {
+            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            var scrolled = (winScroll / height) * 100;
+            if (scrolled > 60) {
+                // Show banner
+                var banners = document.getElementsByClassName('bottom-banner')
+                for (var i=0;i<banners.length;i++) {
+                    // Show only if not already closed
+                    if (!banners[i].classList.contains('closed')) {
+                        banners[i].classList.remove('hidden')
+                    }
+                }
+                // Remove listener
+                window.removeEventListener('scroll', showBanner)
+            }
+        }
+    }
+
+    if (typeof window !== "undefined") {
+        window.addEventListener('scroll', showBanner);
+
+        // remove this event listener when we open a new page (a new
+        // event listener will be created when required)
+        window.addEventListener('hashchange', () => {
+            window.removeEventListener('scroll', showBanner)
+        })
+    }
+
+    return(
+        <a className="bottom-banner hidden" href={url} target="_blank">
+            {imageUrl && <div className="banner-image"><img src={imageUrl} height="auto" width="auto" /></div>}
+            <div className="banner-content">
+                {title && <h2>{title}</h2>}
+                {text && <p>{ text }</p>}
+            </div>
+                <button className="close-button" onClick={closeBanner}>X</button>
+        </a>
+    )
+}
+
+BottomBanner.propTypes = {
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    text: PropTypes.string,
+    imageUrl: PropTypes.string,
+}
+
+export default BottomBanner

src/components/common/index.js

@@ -2,3 +2,4 @@ export { default as Layout } from './Layout'
 export { default as PostCard } from './PostCard'
 export { default as Pagination } from './Pagination'
 export { default as Navigation } from './Navigation'
+export { default as BottomBanner } from './BottomBanner'

src/styles/app.css

@@ -11,6 +11,7 @@ what's here to work the way you'd like it to.
 - Reset
 - Defaults
 - Layout
+- Components
 - Tag Archives
 - Author Archives
 - Pagination
@@ -937,6 +938,69 @@ h6 {
     }
 }
 
+/* Components
+/* ---------------------------------------------------------- */
+
+.bottom-banner {
+    margin: 0;
+    padding: 2rem;
+    background: #FF7700;
+    color: white;
+    text-decoration: none;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    max-height: 33vh;
+    max-height: 15rem;
+    display: flex;
+}
+.bottom-banner:hover {
+    cursor: pointer;
+    text-decoration: none;
+}
+.bottom-banner.hidden {
+    display: none;
+}
+
+.bottom-banner h2 {
+    color: inherit;
+    padding: 0;
+}
+.bottom-banner a {
+    color: inherit;
+}
+
+.bottom-banner .close-button {
+    height: 3rem;
+    width: 3rem;
+    border-radius: 1.5rem;
+    border: 1px solid white;
+    flex: 0 0 3rem;
+    background: white;
+    color: #FF7700;
+}
+.bottom-banner .close-button:hover {
+    text-decoration: none;
+}
+
+.bottom-banner .banner-image {
+    display: flex;
+    flex-flow: nowrap;
+    justify-content: flex-end;
+}
+.bottom-banner .banner-image img {
+    max-height: 100%;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+}
+
+.bottom-banner .banner-content {
+    flex: 1 1 100%;
+    margin-left: 1rem;
+}
 
 /* Tag Archives
 /* ---------------------------------------------------------- */

src/templates/post.js

@@ -4,7 +4,7 @@ import { graphql } from 'gatsby'
 import { Link } from 'gatsby'
 import Helmet from 'react-helmet'
 
-import { Layout } from '../components/common'
+import { Layout, BottomBanner } from '../components/common'
 import { MetaData } from '../components/common/meta'
 import config from '../utils/siteConfig'
 
@@ -55,6 +55,11 @@ const Post = ({ data, location }) => {
                         </article>
                     </div>
                 </Layout>
+                <BottomBanner title="Snipette in print?"
+                    text="We're planning to bring out a print edition of Snipette—but need your suggestions. Help us by taking the survey!"
+                    url="https://forms.gle/H4FpwJzMqehHceXx8"
+                    imageUrl="https://media.snipettemag.com/manual-uploads/survey-welcome-banner.png"
+                />
             </>
     )
 }