...

5 files changed, 24 insertions, 84 deletions

diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 1e17c4a1..4296a5ce 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
 import Svg from "react-inlinesvg";
-import { Spinner } from "react-bootstrap";
+import { Spinner, Collapse } from "react-bootstrap";
 import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
 import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
 
@@ -78,7 +78,6 @@ export interface TimelineCardComponentProps<TManageItems> {
   onManage?: (item: TManageItems | "property") => void;
   onMember: () => void;
   className?: string;
-  onHeight?: (height: number) => void;
 }
 
 export interface TimelinePageTemplateUIProps<TManageItems> {
@@ -173,8 +172,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
     }
   }, [getResizeEvent, triggerResizeEvent, timeline, postListState]);
 
-  const [cardHeight, setCardHeight] = React.useState<number>(0);
-
   const genCardCollapseLocalStorageKey = (uniqueId: string): string =>
     `timeline.${uniqueId}.cardCollapse`;
 
@@ -219,10 +216,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
             })
           );
 
-          const topHeight: string = infoCardCollapse
-            ? "calc(68px + 1.5em)"
-            : `${cardHeight + 60}px`;
-
           const syncState: TimelinePostSyncState = postListState.syncing
             ? "syncing"
             : postListState.type === "synced"
@@ -231,10 +224,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
           timelineBody = (
             <div>
-              <TimelinePostSyncStateBadge
-                style={{ top: topHeight }}
-                state={syncState}
-              />
+              <TimelinePostSyncStateBadge state={syncState} />
               <Timeline
                 containerRef={timelineRef}
                 posts={posts}
@@ -249,6 +239,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
                 {timelineBody}
                 <div ref={bottomSpaceRef} className="flex-fix-length" />
                 <TimelinePostEdit
+                  className="fixed-bottom"
                   onPost={props.onPost}
                   onHeightChange={onPostEditHeightChange}
                   timelineUniqueId={timeline.uniqueId}
@@ -268,10 +259,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
       body = (
         <>
-          <div
-            className="info-card-container"
-            data-collapse={infoCardCollapse ? "true" : "false"}
-          >
+          <div className="info-card-container">
             <Svg
               src={
                 infoCardCollapse
@@ -288,14 +276,16 @@ export default function TimelinePageTemplateUI<TManageItems>(
               }}
               className="float-right m-1 info-card-collapse-button text-primary icon-button"
             />
-            <CardComponent
-              timeline={timeline}
-              onManage={props.onManage}
-              onMember={props.onMember}
-              onHeight={setCardHeight}
-              className="info-card-content"
-            />
+            <Collapse in={!infoCardCollapse}>
+              <CardComponent
+                timeline={timeline}
+                onManage={props.onManage}
+                onMember={props.onMember}
+                className="info-card-content"
+              />
+            </Collapse>
           </div>
+
           {timelineBody}
         </>
       );
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
index 42f83b52..dfa2f879 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import Svg from "react-inlinesvg";
 import { Button, Spinner, Row, Col, Form } from "react-bootstrap";
@@ -183,7 +184,10 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
   }, []);
 
   return (
-    <div ref={containerRef} className="container-fluid fixed-bottom bg-light">
+    <div
+      ref={containerRef}
+      className={clsx("container-fluid bg-light", props.className)}
+    >
       <Row>
         <Col className="px-1 py-1">
           {kind === "text" ? (
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
index 1862de02..a7b9af7b 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -142,17 +142,5 @@ $timeline-line-color-current: #36c2e6
 
 .info-card-container
   position: sticky
+  top: 56px
   z-index: 1
-
-  .info-card-collapse-button
-    z-index: 1
-    position: relative
-
-  .info-card-content
-    width: 100%
-    transform-origin: right top
-    transition: transform 0.5s
-
-  &[data-collapse='true']
-    .info-card-content
-      transform: scale(0)
diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index bf5c3105..9f989148 100644
--- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import { fromEvent } from "rxjs";
 import { Dropdown, Button } from "react-bootstrap";
 
 import { useAvatar } from "@/services/user";
@@ -17,41 +16,19 @@ export type TimelineInfoCardProps = TimelineCardComponentProps<
 >;
 
 const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
-  const { onHeight, onMember, onManage } = props;
+  const { onMember, onManage } = props;
 
   const { t } = useTranslation();
 
   const avatar = useAvatar(props.timeline.owner.username);
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const containerRef = React.useRef<HTMLDivElement>(null!);
-
-  const notifyHeight = React.useCallback((): void => {
-    if (onHeight) {
-      onHeight(containerRef.current.getBoundingClientRect().height);
-    }
-  }, [onHeight]);
-
-  React.useEffect(() => {
-    const subscription = fromEvent(window, "resize").subscribe(notifyHeight);
-    return () => subscription.unsubscribe();
-  });
-
   return (
-    <div
-      ref={containerRef}
-      className={clsx("rounded border p-2 bg-light clearfix", props.className)}
-      onTransitionEnd={notifyHeight}
-    >
+    <div className={clsx("rounded border p-2 bg-light", props.className)}>
       <h3 className="text-primary mx-3 d-inline-block align-middle">
         {props.timeline.name}
       </h3>
       <div className="d-inline-block align-middle">
-        <BlobImage
-          blob={avatar}
-          onLoad={notifyHeight}
-          className="avatar small rounded-circle"
-        />
+        <BlobImage blob={avatar} className="avatar small rounded-circle" />
         {props.timeline.owner.nickname}
         <small className="ml-3 text-secondary">
           @{props.timeline.owner.username}
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index f1878b5c..cec81421 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -17,34 +17,15 @@ export type UserInfoCardProps = TimelineCardComponentProps<
 >;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const { onHeight, onManage } = props;
+  const { onManage } = props;
   const { t } = useTranslation();
 
   const avatar = useAvatar(props.timeline.owner.username);
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const containerRef = React.useRef<HTMLDivElement>(null!);
-
-  const notifyHeight = React.useCallback((): void => {
-    if (onHeight) {
-      onHeight(containerRef.current.getBoundingClientRect().height);
-    }
-  }, [onHeight]);
-
-  React.useEffect(() => {
-    const subscription = fromEvent(window, "resize").subscribe(notifyHeight);
-    return () => subscription.unsubscribe();
-  });
-
   return (
-    <div
-      ref={containerRef}
-      className={clsx("rounded border bg-light p-2 clearfix", props.className)}
-      onTransitionEnd={notifyHeight}
-    >
+    <div className={clsx("rounded border bg-light p-2", props.className)}>
       <BlobImage
         blob={avatar}
-        onLoad={notifyHeight}
         className="avatar large mr-2 rounded-circle float-left"
       />
       <div>