From 7ec5cf66cef88bc7d3b8720070f40cceb452aec4 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 10 Jun 2020 15:21:32 +0800
Subject: feat(front): Fix #75 .

---
 Timeline/ClientApp/src/timeline/Timeline.tsx | 68 ++++++++++++++--------------
 1 file changed, 35 insertions(+), 33 deletions(-)

(limited to 'Timeline/ClientApp/src/timeline/Timeline.tsx')

diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/timeline/Timeline.tsx
index f6ff8949..1ec3795f 100644
--- a/Timeline/ClientApp/src/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/timeline/Timeline.tsx
@@ -56,41 +56,43 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   }, [posts, onDelete]);
 
   return (
-    <div className={clsx('pr-2', props.className)}>
-      <Container fluid className="d-flex flex-column">
-        {(() => {
-          const length = posts.length;
-          return posts.map((post, i) => {
-            const av: number | undefined =
-              user != null && user.username === post.author.username
-                ? avatarVersion
-                : undefined;
+    <Container
+      fluid
+      className={clsx('d-flex flex-column position-relative', props.className)}
+    >
+      <div className="timeline-enter-animation-mask" />
+      {(() => {
+        const length = posts.length;
+        return posts.map((post, i) => {
+          const av: number | undefined =
+            user != null && user.username === post.author.username
+              ? avatarVersion
+              : undefined;
 
-            const toggleMore = onToggleDelete[i];
+          const toggleMore = onToggleDelete[i];
 
-            return (
-              <TimelineItem
-                post={post}
-                key={post.id}
-                current={length - 1 === i}
-                more={
-                  toggleMore
-                    ? {
-                        isOpen: indexShowDeleteButton === i,
-                        toggle: toggleMore,
-                        onDelete: onItemDelete[i],
-                      }
-                    : undefined
-                }
-                onClick={onItemClick}
-                avatarVersion={av}
-                onResize={onResize}
-              />
-            );
-          });
-        })()}
-      </Container>
-    </div>
+          return (
+            <TimelineItem
+              post={post}
+              key={post.id}
+              current={length - 1 === i}
+              more={
+                toggleMore
+                  ? {
+                      isOpen: indexShowDeleteButton === i,
+                      toggle: toggleMore,
+                      onDelete: onItemDelete[i],
+                    }
+                  : undefined
+              }
+              onClick={onItemClick}
+              avatarVersion={av}
+              onResize={onResize}
+            />
+          );
+        });
+      })()}
+    </Container>
   );
 };
 
-- 
cgit v1.2.3