From e5c3f357bd6136e655f12e3029eaf54fbc4e3359 Mon Sep 17 00:00:00 2001
From: Unknown <nikolabjelo@gmail.com>
Date: Tue, 13 Nov 2018 03:02:16 +0100
Subject: [PATCH] adding a "scroll to top" handle to all pages

---
 client/src/styles/styles.scss           | 21 +++++++
 client/src/views/layout/header/index.js | 74 ++++++++++++++-----------
 2 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/client/src/styles/styles.scss b/client/src/styles/styles.scss
index 189d2c1a8..847caa58e 100644
--- a/client/src/styles/styles.scss
+++ b/client/src/styles/styles.scss
@@ -412,5 +412,26 @@ header.menu{
       }
     }
   }
+}
 
+.toTop{
+  position: fixed;
+  height: 40px;
+  width: 40px;
+  bottom: 20px;
+  right: 20px;
+  z-index: 999;
+  background-color: #1a1a1a;
+  border-radius: 100%;
+  &:after{
+    content: '';
+    float: right;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    padding: 3px;
+    margin-top: 18px;
+    margin-right: 15px;
+    transform: rotate(-135deg);
+    -webkit-transform: rotate(-135deg);
+  }
 }
diff --git a/client/src/views/layout/header/index.js b/client/src/views/layout/header/index.js
index a812d69b8..efdde5007 100644
--- a/client/src/views/layout/header/index.js
+++ b/client/src/views/layout/header/index.js
@@ -29,6 +29,11 @@ class Header extends Component {
     }
   }
 
+  scrollToTop () {
+    document.body.scrollTop = 0 // For Safari
+    document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera
+  }
+
   toggleMobileOpen () {
     this.setState({ mobileOpen: !this.state.mobileOpen })
   }
@@ -108,41 +113,44 @@ class Header extends Component {
     })
 
     return (
-      <header className={onTop ? 'menu' : 'menu notOnTop'}>
-        <div className='container'>
-          <Link to='/'> <img className='logo' src={AALogo} alt='Advanced Algos' /> </Link>
-          <div className={mobileOpen ? 'mobileHandle openedMobile' : 'mobileHandle'} onClick={() => this.toggleMobileOpen()}>
-            Menu
-          </div>
-          <nav className={mobileOpen ? 'links openedMobile' : 'links'}>
-            <ul className='primaryMenu'>
-              <li className='primaryLink'>
-                <Link to='/charts'> Charts </Link>
-              </li>
-              {menus}
-              <li className='primaryLink'>
-                <a href='https://www.advancedalgos.net/documentation-quick-start.shtml'> Docs </a>
-              </li>
-              {this.state.user !== undefined && this.state.user !== null ? (
-                <LoggedIn
-                  user={user}
-                  auth={auth}
-                  bigScreen={bigScreen}
-                  openedMenu={openedMenu}
-                  toggleMenuOpen={(keyValue, allowedValue) => this.toggleMenuOpen(keyValue, allowedValue)}
-                  mouseLeave={(allowedValue) => this.mouseLeave(allowedValue)}
-                  closeAll={() => this.closeAll()}
-                />
-              ) : (
-
+      <React.Fragment>
+        <header className={onTop ? 'menu' : 'menu notOnTop'}>
+          <div className='container'>
+            <Link to='/'> <img className='logo' src={AALogo} alt='Advanced Algos' /> </Link>
+            <div className={mobileOpen ? 'mobileHandle openedMobile' : 'mobileHandle'} onClick={() => this.toggleMobileOpen()}>
+              Menu
+            </div>
+            <nav className={mobileOpen ? 'links openedMobile' : 'links'}>
+              <ul className='primaryMenu'>
                 <li className='primaryLink'>
-                  <a href='#' onClick={() => auth.login()}> Login / Sign Up </a>
+                  <Link to='/charts'> Charts </Link>
                 </li>
-              )}
-            </ul>
-          </nav>
-        </div>
-      </header>
+                {menus}
+                <li className='primaryLink'>
+                  <a href='https://www.advancedalgos.net/documentation-quick-start.shtml'> Docs </a>
+                </li>
+                {this.state.user !== undefined && this.state.user !== null ? (
+                  <LoggedIn
+                    user={user}
+                    auth={auth}
+                    bigScreen={bigScreen}
+                    openedMenu={openedMenu}
+                    toggleMenuOpen={(keyValue, allowedValue) => this.toggleMenuOpen(keyValue, allowedValue)}
+                    mouseLeave={(allowedValue) => this.mouseLeave(allowedValue)}
+                    closeAll={() => this.closeAll()}
+                  />
+                ) : (
+
+                  <li className='primaryLink'>
+                    <a href='#' onClick={() => auth.login()}> Login / Sign Up </a>
+                  </li>
+                )}
+              </ul>
+            </nav>
+          </div>
+        </header>
+        {onTop ? <div /> : <div className='toTop' onClick={() => { this.scrollToTop() }} />}
+      </React.Fragment>
     )
   }
 }