status-im/ETHReport
2
0
Fork 0
mirror of https://github.com/status-im/ETHReport.git synced 2025-01-20 19:29:54 +00:00
Code Issues Projects Releases Wiki Activity

Adding react-headroom

Browse Source
This commit is contained in:
Sharyn 2018-07-20 09:42:17 +02:00
parent 122ef68de9
commit 530c8873b7
4 changed files with 70 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/pageHeader/index.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import getConfig from 'next/config';
import Headroom from 'react-headroom';
import PageHeaderNav from '../pageHeaderNav';
import './style.scss';
@ -7,14 +8,16 @@ const { publicRuntimeConfig } = getConfig();
const PageHeader = () => (
<div className="page-header" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
<div className="sticky-header">
<div className="container">
<div className="logo">
<img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
<Headroom>
<div className="sticky-header">
<div className="container">
<div className="logo">
<img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
</div>
<PageHeaderNav />
</div>
<PageHeaderNav />
</div>
</div>
</Headroom>
<img className="page-header-bg" src={`${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg`} alt="Header background" />
<div className="inline-header">
<div className="container">

5
components/pageHeader/style.scss
View File

@ -12,7 +12,7 @@
// Need important to override inline style
background: none !important;
overflow: hidden;
padding-top: calculateRem(36);
padding-top: 0;
}
.logo img {
@ -77,9 +77,6 @@
@media (min-width: $desktop) {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
padding: calculateRem(32) 0;

58
package-lock.json generated
View File

@ -5418,6 +5418,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
"integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
},
"lodash._getnative": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
"integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
},
"lodash.assign": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@ -5438,6 +5443,26 @@
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.isarguments": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
"integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
},
"lodash.isarray": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
"integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
},
"lodash.keys": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
"integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
"requires": {
"lodash._getnative": "3.9.1",
"lodash.isarguments": "3.1.0",
"lodash.isarray": "3.0.4"
}
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -7289,6 +7314,21 @@
"resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
},
"raf": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz",
"integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==",
"requires": {
"performance-now": "2.1.0"
},
"dependencies": {
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
}
}
},
"randomatic": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz",
@ -7402,6 +7442,16 @@
}
}
},
"react-headroom": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/react-headroom/-/react-headroom-2.2.2.tgz",
"integrity": "sha512-RqisNR8rZkS/MKeQum8xj4EQp26IQ813qEsg51a7wF0K5bMIwYplh6ZDQR7wBVVrrf+PnQ2JzTYQpG/8QCeoww==",
"requires": {
"prop-types": "15.6.2",
"raf": "3.4.0",
"shallowequal": "0.2.2"
}
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@ -8173,6 +8223,14 @@
}
}
},
"shallowequal": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
"integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
"requires": {
"lodash.keys": "3.1.2"
}
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

3
package.json
View File

@ -44,7 +44,8 @@
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-anchor-link-smooth-scroll": "^1.0.10",
"react-dom": "^16.3.2"
"react-dom": "^16.3.2",
"react-headroom": "^2.2.2"
},
"devDependencies": {
"babel-eslint": "^8.0.1",