fix(front): Still try to fix scroll problem in timeline page.

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