diff --git a/src/components/common/BottomBanner.js b/src/components/common/BottomBanner.js new file mode 100644 index 0000000..9929e5a --- /dev/null +++ b/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 60) { + // Show banner + var banners = document.getElementsByClassName('bottom-banner') + for (var i=0;i { + window.removeEventListener('scroll', showBanner) + }) + } + + return( + + {imageUrl &&
} +
+ {title &&

{title}

} + {text &&

{ text }

} +
+ +
+ ) +} + +BottomBanner.propTypes = { + title: PropTypes.string.isRequired, + url: PropTypes.string.isRequired, + text: PropTypes.string, + imageUrl: PropTypes.string, +} + +export default BottomBanner diff --git a/src/components/common/index.js b/src/components/common/index.js index 9e6d7ed..415c3a0 100644 --- a/src/components/common/index.js +++ b/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' diff --git a/src/styles/app.css b/src/styles/app.css index cda8769..8c61e38 100644 --- a/src/styles/app.css +++ b/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 /* ---------------------------------------------------------- */ diff --git a/src/templates/post.js b/src/templates/post.js index e38181f..74d8c30 100755 --- a/src/templates/post.js +++ b/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 }) => { + ) }