From 3900358ca6eeac546cbe0eb0bd36572ddc404634 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Wed, 30 Oct 2019 10:47:12 +0300
Subject: Fix content top on scroll

---
 vnext/src/App.js    | 18 +++++++++---------
 vnext/src/index.css |  6 +++---
 2 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'vnext')

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 011e5cbd..4c1e72d1 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -22,7 +22,7 @@ import { me } from './api';
 
 const elClassHidden = 'header--hidden';
 
-const elClassFull = 'content--full';
+const elClassTop = 'content--top';
 
 export default function App() {
 
@@ -57,7 +57,7 @@ export default function App() {
 
   const [scrollState, setScrollState] = useRafState({
     hidden: false,
-    bottom: false,
+    top: false,
     prevScroll: 0
   });
 
@@ -69,30 +69,30 @@ export default function App() {
     setScrollState((scrollState) => {
       let wScrollDiff = scrollState.prevScroll - y;
       let hidden = scrollState.hidden;
-      let bottom = scrollState.bottom;
+      let top = scrollState.top;
       if (y <= 0) {
         // scrolled to the very top; element sticks to the top
         hidden = false;
-        bottom = false;
+        top = true;
       } else if ((wScrollDiff > 0) && hidden) {
         // scrolled up; element slides in
         hidden = false;
-        bottom = false;
+        top = false;
       } else if (wScrollDiff < 0) {
         // scrolled down
         if ((y + wHeight) >= dHeight && hidden) {
           // scrolled to the very bottom; element slides in
           hidden = false;
-          bottom = true;
+          top = false;
         } else {
           // scrolled down; element slides out
           hidden = true;
-          bottom = false;
+          top = false;
         }
       }
       return {
         hidden: hidden,
-        bottom: bottom,
+        top: top,
         prevScroll: y
       };
     });
@@ -161,7 +161,7 @@ export default function App() {
       <>
         <Header visitor={visitor} className={scrollState.hidden ? elClassHidden : ''} />
         <div id="wrapper">
-          <section id="content" ref={contentRef} className={scrollState.hidden || scrollState.bottom ? elClassFull : ''}>
+          <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}>
             <Switch>
               <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} />
               <Route exact path="/home" render={(props) => <Home visitor={visitor} {...props} />} />
diff --git a/vnext/src/index.css b/vnext/src/index.css
index 3cc41b8b..6ca33a13 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -163,13 +163,13 @@ hr {
 
 #content {
     grid-area: content;
-    margin-top: 64px;
+    margin-top: 0;
     overflow: auto;
     transition: margin-top 0.4s;
 }
 
-.content--full {
-    margin-top: 0 !important;
+.content--top {
+    margin-top: 64px !important;
 }
 
 #footer {
-- 
cgit v1.2.3