diff options
Diffstat (limited to 'Timeline')
-rw-r--r-- | Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx | 9 | ||||
-rw-r--r-- | Timeline/ClientApp/src/timeline/timeline-ui.sass | 4 | ||||
-rw-r--r-- | 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
|