From 0c1bea244961f80879aff17a775c154071ef3b57 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 10 Jun 2020 16:35:34 +0800
Subject: fix(front): Still try to fix scroll problem in timeline page.

---
 Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx | 9 +++++----
 Timeline/ClientApp/src/timeline/timeline-ui.sass           | 4 ++--
 Timeline/ClientApp/src/timeline/timeline.sass              | 7 +++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index bf87b706..6c03f9e8 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -200,10 +200,11 @@ export default function TimelinePageTemplateUI<
   return (
     <>
       <AppBar />
-      <div
-        style={{ marginTop: 56 + cardHeight }}
-        className="timeline-page-container"
-      >
+      <div>
+        <div
+          style={{ height: 56 + cardHeight }}
+          className="timeline-page-top-space flex-fix-length"
+        />
         {body}
       </div>
     </>
diff --git a/Timeline/ClientApp/src/timeline/timeline-ui.sass b/Timeline/ClientApp/src/timeline/timeline-ui.sass
index 27aaf072..b92327bd 100644
--- a/Timeline/ClientApp/src/timeline/timeline-ui.sass
+++ b/Timeline/ClientApp/src/timeline/timeline-ui.sass
@@ -13,6 +13,6 @@
     .info-card-content
       transform: scale(0)
 
-.timeline-page-container
-  transition: margin-top 0.5s
+.timeline-page-top-space
+  transition: height 0.5s
 
diff --git a/Timeline/ClientApp/src/timeline/timeline.sass b/Timeline/ClientApp/src/timeline/timeline.sass
index c9f88a22..4f69295b 100644
--- a/Timeline/ClientApp/src/timeline/timeline.sass
+++ b/Timeline/ClientApp/src/timeline/timeline.sass
@@ -1,8 +1,6 @@
 @use 'sass:color'
 
 @keyframes timeline-enter-animation-mask-animation
-  from
-    height: calc(100% + 300px)
   to
     height: 0
 
@@ -10,10 +8,11 @@
   position: absolute
   left: 0
   top: 0
+  height: calc(100% + 300px)
   width: 100%
-  background: linear-gradient(to top, transparent 0, 200px, white 300px)
+  background: linear-gradient(to top, #ffffff00 0, 200px, white 300px, white)
   z-index: 100
-  animation: timeline-enter-animation-mask-animation 5s
+  animation: timeline-enter-animation-mask-animation 5s 0.3s forwards // Give it 0.3s to load, which I think is reasonable
 
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
-- 
cgit v1.2.3