From d48ca755bae9f24378eda3c0a25285ec4b97a761 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 31 Jul 2020 01:11:13 +0800
Subject: Make sync state badge fixed.

---
 .../src/app/timeline/TimelinePageTemplateUI.tsx      | 20 +++++++++++++++-----
 Timeline/ClientApp/src/app/timeline/timeline-ui.sass |  3 +--
 2 files changed, 16 insertions(+), 7 deletions(-)

(limited to 'Timeline/ClientApp/src')

diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
index 0d8ad278..dc5bfda8 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { Spinner } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 import { fromEvent } from 'rxjs';
 import Svg from 'react-inlinesvg';
+import clsx from 'clsx';
 
 import arrowsAngleContractIcon from 'bootstrap-icons/icons/arrows-angle-contract.svg';
 import arrowsAngleExpandIcon from 'bootstrap-icons/icons/arrows-angle-expand.svg';
@@ -25,11 +26,13 @@ import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit';
 
 const TimelinePostSyncStateBadge: React.FC<{
   state: 'syncing' | 'synced' | 'offline';
-}> = ({ state }) => {
+  style?: CSSProperties;
+  className?: string;
+}> = ({ state, style, className }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="timeline-sync-state-badge">
+    <div style={style} className={clsx('timeline-sync-state-badge', className)}>
       {(() => {
         switch (state) {
           case 'syncing': {
@@ -211,9 +214,16 @@ export default function TimelinePageTemplateUI<TManageItems>(
             })
           );
 
+          const topHeight: string = infoCardCollapse
+            ? 'calc(68px + 1.5em)'
+            : `${cardHeight + 60}px`;
+
           timelineBody = (
-            <div className="position-relative">
-              <TimelinePostSyncStateBadge state={postListState.state} />
+            <div>
+              <TimelinePostSyncStateBadge
+                style={{ top: topHeight }}
+                state={postListState.state}
+              />
               <Timeline
                 containerRef={timelineRef}
                 posts={posts}
diff --git a/Timeline/ClientApp/src/app/timeline/timeline-ui.sass b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
index 952e4659..667c1da9 100644
--- a/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
+++ b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
@@ -17,12 +17,11 @@
   transition: height 0.5s
 
 .timeline-sync-state-badge
-  position: absolute
+  position: fixed
   top: 0
   right: 0
   z-index: 1
   font-size: 0.8em
-  margin-top: 4px
   padding: 3px 8px
   border-radius: 5px
   background: #e8fbff
-- 
cgit v1.2.3