...

6 files changed, 93 insertions, 86 deletions

diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index 3322e503..08e03bac 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -15,9 +15,6 @@ body
 small
   line-height: 1.2
 
-.width-1px
-  width: 1px
-
 .flex-fix-length
   flex-grow: 0
   flex-shrink: 0
@@ -26,27 +23,20 @@ small
   left: 0
   top: 0
 
-.position-rb
-  right: 0
-  bottom: 0
-
 .avatar
   width: 60px
-
-.avatar.large
-  width: 100px
-
-.avatar.small
-  width: 40px
+  &.large
+    width: 100px
+  &.small
+    width: 40px
 
 .mt-appbar
   margin-top: 56px
 
 .icon-button
   font-size: 1.4em
-
-.large-icon-button
-  font-size: 1.6em
+  &.large
+    font-size: 1.6em
 
 .cursor-pointer
   cursor: pointer
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
index 09d74d3c..2b6dcd0a 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
@@ -145,7 +145,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
           >
             <Svg
               src={trashIcon}
-              className="text-danger large-icon-button"
+              className="text-danger icon-button large"
               onClick={(e: Event) => {
                 toggleDeleteDialog();
                 e.stopPropagation();
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index c2d4aeaa..58fd024b 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -18,6 +18,7 @@ import Timeline, {
 } from "./Timeline";
 import TimelinePostEdit, { TimelinePostSendCallback } from "./TimelinePostEdit";
 import { TimelineSyncStatus } from "./SyncStatusBadge";
+import clsx from "clsx";
 
 export interface TimelineCardComponentProps<TManageItems> {
   timeline: TimelineInfo;
@@ -206,24 +207,30 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
       body = (
         <>
-          <CardComponent
-            timeline={timeline}
-            onManage={props.onManage}
-            onMember={props.onMember}
-            className="timeline-info-card"
-            syncStatus={syncStatus}
-            collapse={infoCardCollapse}
-            toggleCollapse={() => {
-              const newState = !infoCardCollapse;
-              setInfoCardCollapse(newState);
-              if (timeline != null) {
-                window.localStorage.setItem(
-                  genCardCollapseLocalStorageKey(timeline.uniqueId),
-                  newState.toString()
-                );
-              }
-            }}
-          />
+          <div
+            className={clsx(
+              "timeline-template-info-card",
+              infoCardCollapse && "my-collapse"
+            )}
+          >
+            <CardComponent
+              timeline={timeline}
+              onManage={props.onManage}
+              onMember={props.onMember}
+              syncStatus={syncStatus}
+              collapse={infoCardCollapse}
+              toggleCollapse={() => {
+                const newState = !infoCardCollapse;
+                setInfoCardCollapse(newState);
+                if (timeline != null) {
+                  window.localStorage.setItem(
+                    genCardCollapseLocalStorageKey(timeline.uniqueId),
+                    newState.toString()
+                  );
+                }
+              }}
+            />
+          </div>
           {timelineBody}
         </>
       );
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 ad024c78..3bcd4a67 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -138,14 +138,17 @@ $timeline-line-color-current: #36c2e6
   vertical-align: middle
   margin-right: 0.6em
 
-.timeline-info-card
+.timeline-template-info-card
   position: sticky
   z-index: 1
   top: 56px
-  margin: 0.5em
+  padding: 0.5em
 
   @include media-breakpoint-down(sm)
-    margin-bottom: 0
+    padding-bottom: 0
+
+    &.my-collapse
+      float: right
 
   @include media-breakpoint-up(sm)
     float: right
diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
index 764910aa..9c1e7f1c 100644
--- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx
@@ -32,13 +32,7 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <div
-      className={clsx(
-        "rounded border p-2 bg-light",
-        props.className,
-        collapse && "align-self-end"
-      )}
-    >
+    <div className={clsx("cru-card p-2 clearfix", props.className)}>
       <div className="float-right d-flex align-items-center">
         <SyncStatusBadge status={syncStatus} className="mr-2" />
         <CollapseButton collapse={collapse} onClick={toggleCollapse} />
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index 251e53b4..ac3a1361 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -8,6 +8,8 @@ import { useAvatar } from "@/services/user";
 
 import BlobImage from "../common/BlobImage";
 import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
+import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
+import CollapseButton from "../timeline-common/CollapseButton";
 
 export type PersonalTimelineManageItem = "avatar" | "nickname";
 
@@ -16,53 +18,64 @@ export type UserInfoCardProps = TimelineCardComponentProps<
 >;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const { onManage, timeline } = props;
+  const {
+    timeline,
+    onMember,
+    onManage,
+    syncStatus,
+    collapse,
+    toggleCollapse,
+  } = props;
   const { t } = useTranslation();
 
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <div className={clsx("rounded border bg-light p-2", props.className)}>
-      <BlobImage
-        blob={avatar}
-        className="avatar large mr-2 rounded-circle float-left"
-      />
-      <div>
-        {timeline.owner.nickname}
-        <small className="ml-3 text-secondary">
-          @{timeline.owner.username}
-        </small>
+    <div className={clsx("cru-card p-2 clearfix", props.className)}>
+      <div className="float-right d-flex align-items-center">
+        <SyncStatusBadge status={syncStatus} className="mr-2" />
+        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
       </div>
-      <p className="mb-0">{timeline.description}</p>
-      <small className="mt-1 d-block">
-        {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
-      </small>
-      <div className="text-right mt-2">
-        {onManage != null ? (
-          <Dropdown>
-            <Dropdown.Toggle variant="outline-primary">
-              {t("timeline.manage")}
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <Dropdown.Item onClick={() => onManage("nickname")}>
-                {t("timeline.manageItem.nickname")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => onManage("avatar")}>
-                {t("timeline.manageItem.avatar")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => onManage("property")}>
-                {t("timeline.manageItem.property")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={props.onMember}>
-                {t("timeline.manageItem.member")}
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-        ) : (
-          <Button variant="outline-primary" onClick={props.onMember}>
-            {t("timeline.memberButton")}
-          </Button>
-        )}
+
+      <div style={{ display: collapse ? "none" : "block" }}>
+        <div>
+          <BlobImage blob={avatar} className="avatar" />
+          {timeline.owner.nickname}
+          <small className="ml-3 text-secondary">
+            @{timeline.owner.username}
+          </small>
+        </div>
+        <p className="mb-0">{timeline.description}</p>
+        <small className="mt-1 d-block">
+          {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
+        </small>
+        <div className="text-right mt-2">
+          {onManage != null ? (
+            <Dropdown>
+              <Dropdown.Toggle variant="outline-primary">
+                {t("timeline.manage")}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item onClick={() => onManage("nickname")}>
+                  {t("timeline.manageItem.nickname")}
+                </Dropdown.Item>
+                <Dropdown.Item onClick={() => onManage("avatar")}>
+                  {t("timeline.manageItem.avatar")}
+                </Dropdown.Item>
+                <Dropdown.Item onClick={() => onManage("property")}>
+                  {t("timeline.manageItem.property")}
+                </Dropdown.Item>
+                <Dropdown.Item onClick={onMember}>
+                  {t("timeline.manageItem.member")}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          ) : (
+            <Button variant="outline-primary" onClick={onMember}>
+              {t("timeline.memberButton")}
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );