feat(front): Fix #75 .

6 files changed, 61 insertions, 43 deletions

diff --git a/Timeline/ClientApp/src/home/TimelineBoard.tsx b/Timeline/ClientApp/src/home/TimelineBoard.tsx
index 38a5fcf8..2e017bf7 100644
--- a/Timeline/ClientApp/src/home/TimelineBoard.tsx
+++ b/Timeline/ClientApp/src/home/TimelineBoard.tsx
@@ -35,7 +35,7 @@ const TimelineBoard: React.FC<TimelineBoardProps> = props => {
               ? `/users/${timeline.owner.username}`

               : `/timelines/${name}`;

             return (

-              <div key={name} className="timeline-item">

+              <div key={name} className="timeline-board-item">

                 {isPersonal ? (

                   <UserTimelineLogo className="icon" />

                 ) : (

diff --git a/Timeline/ClientApp/src/home/home.sass b/Timeline/ClientApp/src/home/home.sass
index 9f9937ac..28a2e5f3 100644
--- a/Timeline/ClientApp/src/home/home.sass
+++ b/Timeline/ClientApp/src/home/home.sass
@@ -1,8 +1,4 @@
-.timeline-item-icon

-  width: 1em

-  height: 1em

-

-.timeline-item

+.timeline-board-item

   font-size: 1.1em

   @extend .my-2

   .icon

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>

   );

 };

 

diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
index 215c7b12..9e08acc7 100644
--- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
@@ -56,6 +56,8 @@ export interface TimelineItemProps {
   onClick?: () => void;

   avatarVersion?: number;

   onResize?: () => void;

+  className?: string;

+  style?: React.CSSProperties;

 }

 

 const TimelineItem: React.FC<TimelineItemProps> = (props) => {

@@ -78,8 +80,13 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
 

   return (

     <Row

-      className={clsx('position-relative flex-nowrap', current && 'current')}

+      className={clsx(

+        'position-relative flex-nowrap',

+        current && 'current',

+        props.className

+      )}

       onClick={props.onClick}

+      style={props.style}

     >

       <Col className="timeline-line-area">

         <div className="timeline-line-segment start"></div>

diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index a4bad6aa..a246c0ce 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -107,9 +107,7 @@ export default function TimelinePageTemplateUI<
   const cardCollapseLocalStorageKey =

     timeline != null ? genCardCollapseLocalStorageKey(timeline.name) : null;

 

-  const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(

-    false

-  );

+  const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(true);

   React.useEffect(() => {

     if (cardCollapseLocalStorageKey != null) {

       const savedCollapse =

diff --git a/Timeline/ClientApp/src/timeline/timeline.sass b/Timeline/ClientApp/src/timeline/timeline.sass
index 511cc838..dad5251c 100644
--- a/Timeline/ClientApp/src/timeline/timeline.sass
+++ b/Timeline/ClientApp/src/timeline/timeline.sass
@@ -1,5 +1,20 @@
 @use 'sass:color'

 

+@keyframes timeline-enter-animation-mask-animation

+  from

+    height: calc(100% + 300px)

+  to

+    height: 0

+

+.timeline-enter-animation-mask

+  position: absolute

+  left: 0

+  top: 0

+  width: 100%

+  background: linear-gradient(to top, transparent 0, 200px, white 300px)

+  z-index: 100

+  animation: timeline-enter-animation-mask-animation 5s

+

 $timeline-line-width: 7px

 $timeline-line-node-radius: 18px

 $timeline-line-color: $primary