feat(header): fixed header on main window
This commit is contained in:
Alexey Kasyanchuk
parent
c202c560cb
commit
5ae597f35a
14
package-lock.json
generated
14
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "rats-search",
|
||||
"version": "0.17.1",
|
||||
"version": "0.18.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -13577,9 +13577,9 @@
|
||||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "16.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz",
|
||||
"integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==",
|
||||
"version": "16.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.3.1.tgz",
|
||||
"integrity": "sha512-NbkxN9jsZ6+G+ICsLdC7/wUD26uNbvKU/RAxEWgc9kcdKvROt+5d5j2cNQm5PSFTQ4WNGsR3pa4qL2Q0/WSy1w==",
|
||||
"requires": {
|
||||
"fbjs": "0.8.16",
|
||||
"loose-envify": "1.3.1",
|
||||
@ -13588,9 +13588,9 @@
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",
|
||||
"integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==",
|
||||
"version": "16.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.1.tgz",
|
||||
"integrity": "sha512-2Infg89vzahq8nfVi1GkjPqq0vrBvf0f3T0+dTtyjq4f6HKOqKixAK25Vr593O3QTx4kw/vmUtAJwerlevNWOA==",
|
||||
"requires": {
|
||||
"fbjs": "0.8.16",
|
||||
"loose-envify": "1.3.1",
|
||||
|
||||
@ -126,8 +126,8 @@
|
||||
"moment": "^2.20.1",
|
||||
"mysql": "^2.15.0",
|
||||
"nat-upnp": "^1.1.1",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"react": "^16.3.1",
|
||||
"react-dom": "^16.3.1",
|
||||
"react-input-range": "^1.3.0",
|
||||
"react-markdown": "^3.1.5",
|
||||
"react-tap-event-plugin": "^3.0.2",
|
||||
|
||||
@ -1,24 +1,19 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
.header .header-row {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 80px;
|
||||
.header.sticky .header-row {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #222;
|
||||
height: 150px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
.header .clear-header-space {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.App-intro {
|
||||
font-size: large;
|
||||
.header.sticky .clear-header-space {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
.header.sticky .header-main > div > div > div:nth-child(2) > div > div:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
@ -3,11 +3,56 @@ import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'mat
|
||||
import Background from './images/pirate-mod.jpg'
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
|
||||
const Header = (props) => {
|
||||
class Header extends React.Component {
|
||||
constructor(props)
|
||||
{
|
||||
super(props)
|
||||
this.header = React.createRef();
|
||||
}
|
||||
componentDidMount()
|
||||
{
|
||||
window.onscroll = () => {
|
||||
if (window.pageYOffset >= 10)
|
||||
{
|
||||
const scrollHeight = Math.max(
|
||||
document.body.scrollHeight, document.documentElement.scrollHeight,
|
||||
document.body.offsetHeight, document.documentElement.offsetHeight,
|
||||
document.body.clientHeight, document.documentElement.clientHeight
|
||||
);
|
||||
|
||||
if(scrollHeight - 240 < document.documentElement.clientHeight)
|
||||
{
|
||||
return
|
||||
}
|
||||
|
||||
if(!this.stickyHeader)
|
||||
{
|
||||
this.stickyHeader = true
|
||||
this.header.current.classList.add("sticky");
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if(this.stickyHeader)
|
||||
{
|
||||
this.stickyHeader = false
|
||||
this.header.current.classList.remove("sticky");
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
componentWillUnmount()
|
||||
{
|
||||
window.onscroll = null
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<Card>
|
||||
<div ref={this.header} className='header'>
|
||||
<Card className='w100p header-main' style={{position: 'fixed', zIndex: 2}}>
|
||||
<CardMedia
|
||||
overlay={<CardTitle title="Yarrr, Landlubbers!" subtitle={
|
||||
overlay={<CardTitle className='header-title' title="Yarrr, Landlubbers!" subtitle={
|
||||
<div>
|
||||
<div className='row' style={{position: 'absolute', top: -65}}>
|
||||
<svg className='clickable'
|
||||
@ -110,11 +155,11 @@ const Header = (props) => {
|
||||
this is only information about content that collected automatically!
|
||||
</div>} />}
|
||||
>
|
||||
<div className='row' style={{
|
||||
<div className='row header-row' style={{
|
||||
padding: '15px',
|
||||
background: `url('${Background}') no-repeat`,
|
||||
minHeight: 360,
|
||||
backgroundSize: 'cover'
|
||||
backgroundSize: 'cover',
|
||||
transition: '0.3s'
|
||||
}}>
|
||||
<RaisedButton
|
||||
label="Search"
|
||||
@ -226,7 +271,11 @@ const Header = (props) => {
|
||||
</div>
|
||||
</CardMedia>
|
||||
</Card>
|
||||
<div className='clear-header-space' style={{transition: '0.3s'}} />
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export {Header}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user