...

8 files changed, 62 insertions, 84 deletions

diff --git a/Timeline/ClientApp/src/app/views/timeline-common/CollapseCard.tsx b/Timeline/ClientApp/src/app/views/timeline-common/CollapseCard.tsx
deleted file mode 100644
index 1c233058..00000000
--- a/Timeline/ClientApp/src/app/views/timeline-common/CollapseCard.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-
-import SyncStatusBadge, {
-  TimelineSyncStatus,
-} from "../timeline-common/SyncStatusBadge";
-import CollapseButton from "../timeline-common/CollapseButton";
-
-const CollapseCard: React.FC<{
-  className?: string;
-  syncStatus: TimelineSyncStatus;
-  toggleCollapse: () => void;
-  visible: boolean;
-}> = ({ className, syncStatus, toggleCollapse, visible }) => {
-  return (
-    <div
-      style={{ visibility: visible ? "visible" : "hidden" }}
-      className={clsx("cru-card p-2", className)}
-    >
-      <div className="d-flex align-items-center">
-        <SyncStatusBadge status={syncStatus} className="mr-2" />
-        <CollapseButton collapse onClick={toggleCollapse} />
-      </div>
-    </div>
-  );
-};
-
-export default CollapseCard;
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx b/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx
index a5166aa4..a8de20aa 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx
@@ -8,17 +8,17 @@ import CollapseButton from "../timeline-common/CollapseButton";
 const InfoCardTemplate: React.FC<
   Pick<
     TimelineCardComponentProps<"">,
-    "toggleCollapse" | "syncStatus" | "className"
+    "collapse" | "toggleCollapse" | "syncStatus" | "className"
   > & { children: React.ReactElement[] }
-> = ({ toggleCollapse, syncStatus, className, children }) => {
+> = ({ collapse, toggleCollapse, syncStatus, className, children }) => {
   return (
     <div className={clsx("cru-card p-2 clearfix", className)}>
       <div className="float-right d-flex align-items-center">
         <SyncStatusBadge status={syncStatus} className="mr-2" />
-        <CollapseButton collapse={false} onClick={toggleCollapse} />
+        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
       </div>
 
-      <div>{children}</div>
+      <div style={{ display: collapse ? "none" : "block" }}>{children}</div>
     </div>
   );
 };
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
index 2b6dcd0a..327b6833 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
@@ -83,13 +83,15 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
       onClick={props.onClick}
       style={props.style}
     >
-      <div className="timeline-line-area">
-        <div className="timeline-line-segment start"></div>
-        <div className="timeline-line-node-container">
-          <div className="timeline-line-node"></div>
+      <div className="timeline-line-area-container">
+        <div className="timeline-line-area">
+          <div className="timeline-line-segment start"></div>
+          <div className="timeline-line-node-container">
+            <div className="timeline-line-node"></div>
+          </div>
+          <div className="timeline-line-segment end"></div>
+          {current && <div className="timeline-line-segment current-end" />}
         </div>
-        <div className="timeline-line-segment end"></div>
-        {current && <div className="timeline-line-segment current-end" />}
       </div>
       <div className="timeline-content-area">
         <div>
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index ef13fa50..e1938656 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -17,16 +17,15 @@ import Timeline, {
   TimelineDeleteCallback,
 } from "./Timeline";
 import TimelineTop from "./TimelineTop";
-import CollapseCard from "./CollapseCard";
 import TimelinePostEdit, { TimelinePostSendCallback } from "./TimelinePostEdit";
 import { TimelineSyncStatus } from "./SyncStatusBadge";
-import clsx from "clsx";
 
 export interface TimelineCardComponentProps<TManageItems> {
   timeline: TimelineInfo;
   onManage?: (item: TManageItems | "property") => void;
   onMember: () => void;
   className?: string;
+  collapse: boolean;
   syncStatus: TimelineSyncStatus;
   toggleCollapse: () => void;
 }
@@ -219,31 +218,16 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
       body = (
         <>
-          <TimelineTop>
-            <div
-              className={clsx(
-                "timeline-template-card-container",
-                cardCollapse || "my-expand"
-              )}
-            >
-              <CollapseCard
-                visible={cardCollapse}
-                syncStatus={syncStatus}
-                toggleCollapse={toggleCardCollapse}
-              />
-              <CardComponent
-                className={clsx(
-                  "timeline-template-card",
-                  cardCollapse && "d-none"
-                )}
-                timeline={timeline}
-                onManage={props.onManage}
-                onMember={props.onMember}
-                syncStatus={syncStatus}
-                toggleCollapse={toggleCardCollapse}
-              />
-            </div>
-          </TimelineTop>
+          <CardComponent
+            className="timeline-template-card"
+            timeline={timeline}
+            onManage={props.onManage}
+            onMember={props.onMember}
+            syncStatus={syncStatus}
+            collapse={cardCollapse}
+            toggleCollapse={toggleCardCollapse}
+          />
+          <TimelineTop height="56px" />
           {timelineBody}
         </>
       );
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineTop.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineTop.tsx
index a98d3687..93a2a32c 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineTop.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineTop.tsx
@@ -1,14 +1,17 @@
 import React from "react";
 
 export interface TimelineTopProps {
-  children: React.ReactElement;
+  height?: number | string;
+  children?: React.ReactElement;
 }
 
-const TimelineTop: React.FC<TimelineTopProps> = ({ children }) => {
+const TimelineTop: React.FC<TimelineTopProps> = ({ height, children }) => {
   return (
-    <div className="timeline-top">
-      <div className="timeline-line-area">
-        <div className="timeline-line-segment"></div>
+    <div style={{ height: height }} className="timeline-top">
+      <div className="timeline-line-area-container">
+        <div className="timeline-line-area">
+          <div className="timeline-line-segment"></div>
+        </div>
       </div>
       {children}
     </div>
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 aa3544fe..4151bfcc 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -29,19 +29,26 @@ $timeline-line-color-current: #36c2e6
     box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1)
 
 .timeline-line
+  &-area-container
+    display: flex
+    justify-content: flex-end
+    padding-right: 5px
+
+    flex: 0 0 auto
+    width: 60px
+
   &-area
     display: flex
     flex-direction: column
     align-items: center
-    flex: 0 0 auto
-    width: 60px
+    width: 30px
 
   &-segment
     width: $timeline-line-width
     background: $timeline-line-color
 
     &.start
-      height: 20px
+      height: 14px
       flex: 0 0 auto
 
     &.end
@@ -131,15 +138,9 @@ $timeline-line-color-current: #36c2e6
   vertical-align: middle
   margin-right: 0.6em
 
-.timeline-template-card-container
-  position: sticky
+.timeline-template-card
+  position: fixed
   z-index: 1
   top: 56px
-  margin: 0.5em
-
-.timeline-template-card
-  width: 360px
-  max-width: calc(100vw - 1em)
-  position: absolute
-  top: 0
   right: 0
+  margin: 0.5em
diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index 6966ab41..2d787709 100644
--- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -16,7 +16,14 @@ export type TimelineInfoCardProps = TimelineCardComponentProps<
 >;
 
 const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
-  const { timeline, onMember, onManage, syncStatus, toggleCollapse } = props;
+  const {
+    timeline,
+    collapse,
+    onMember,
+    onManage,
+    syncStatus,
+    toggleCollapse,
+  } = props;
 
   const { t } = useTranslation();
 
@@ -26,6 +33,7 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
     <InfoCardTemplate
       className={props.className}
       syncStatus={syncStatus}
+      collapse={collapse}
       toggleCollapse={toggleCollapse}
     >
       <h3 className="text-primary mx-3 d-inline-block align-middle">
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index bad2a9e1..888fb18a 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -16,7 +16,14 @@ export type UserInfoCardProps = TimelineCardComponentProps<
 >;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const { timeline, onMember, onManage, syncStatus, toggleCollapse } = props;
+  const {
+    timeline,
+    collapse,
+    onMember,
+    onManage,
+    syncStatus,
+    toggleCollapse,
+  } = props;
   const { t } = useTranslation();
 
   const avatar = useAvatar(timeline?.owner?.username);
@@ -25,6 +32,7 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
     <InfoCardTemplate
       className={props.className}
       syncStatus={syncStatus}
+      collapse={collapse}
       toggleCollapse={toggleCollapse}
     >
       <div>