feat(header): fixed header on main window

package-lock.json

@@ -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",
+      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.3.1.tgz",
-      "integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==",
+      "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",
+      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.1.tgz",
-      "integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==",
+      "integrity": "sha512-2Infg89vzahq8nfVi1GkjPqq0vrBvf0f3T0+dTtyjq4f6HKOqKixAK25Vr593O3QTx4kw/vmUtAJwerlevNWOA==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",

package.json

@@ -126,8 +126,8 @@
     "moment": "^2.20.1",
     "mysql": "^2.15.0",
     "nat-upnp": "^1.1.1",
-    "react": "^16.2.0",
+    "react": "^16.3.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.3.1",
     "react-input-range": "^1.3.0",
     "react-markdown": "^3.1.5",
     "react-tap-event-plugin": "^3.0.2",

src/app/app.css

@@ -1,24 +1,19 @@
-.App {
+.header .header-row {
-  text-align: center;
+  min-height: 360px;
 }
 
-.App-logo {
+.header.sticky .header-row {
-  animation: App-logo-spin infinite 20s linear;
+  min-height: 120px;
-  height: 80px;
 }
 
-.App-header {
+.header .clear-header-space {
-  background-color: #222;
+  height: 360px;
-  height: 150px;
-  padding: 20px;
-  color: white;
 }
 
-.App-intro {
+.header.sticky .clear-header-space {
-  font-size: large;
+  height: 120px;
 }
 
-@keyframes App-logo-spin {
+.header.sticky .header-main > div > div > div:nth-child(2) > div > div:nth-child(1) {
-  from { transform: rotate(0deg); }
+  display: none;
-  to { transform: rotate(360deg); }
 }

src/app/header.js

@@ -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}