feat: Redesign timeline page.

5 files changed, 51 insertions, 35 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index fd051d45..6bd1b96d 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -4,6 +4,7 @@ import clsx from "clsx";
 import { TimelinePostInfo } from "@/services/timeline";
 
 import TimelineItem from "./TimelineItem";
+import TimelineTop from "./TimelineTop";
 
 export interface TimelinePostInfoEx extends TimelinePostInfo {
   deletable: boolean;
@@ -52,6 +53,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
 
   return (
     <div ref={props.containerRef} className={clsx("timeline", props.className)}>
+      <TimelineTop height="56px" />
       {(() => {
         const length = posts.length;
         return posts.map((post, i) => {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx b/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
index 4db23371..5ccc5523 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
@@ -93,12 +93,12 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
           {current && <div className="timeline-line-segment current-end" />}
         </div>
       </div>
-      <div className="timeline-content-area">
+      <div className="timeline-item-card">
         <div>
           <span className="mr-2">
-            <span className="text-primary white-space-no-wrap mr-2">
+            <small className="text-secondary white-space-no-wrap mr-2">
               {props.post.time.toLocaleString(i18n.languages)}
-            </span>
+            </small>
             <small className="text-dark">{props.post.author.nickname}</small>
           </span>
           {more != null ? (
@@ -138,33 +138,33 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             }
           })()}
         </div>
+        {more != null && more.isOpen ? (
+          <>
+            <div
+              className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
+              onClick={more.toggle}
+            >
+              <Svg
+                src={trashIcon}
+                className="text-danger icon-button large"
+                onClick={(e) => {
+                  toggleDeleteDialog();
+                  e.stopPropagation();
+                }}
+              />
+            </div>
+            {deleteDialog ? (
+              <TimelinePostDeleteConfirmDialog
+                toggle={() => {
+                  toggleDeleteDialog();
+                  more.toggle();
+                }}
+                onConfirm={more.onDelete}
+              />
+            ) : null}
+          </>
+        ) : null}
       </div>
-      {more != null && more.isOpen ? (
-        <>
-          <div
-            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
-            onClick={more.toggle}
-          >
-            <Svg
-              src={trashIcon}
-              className="text-danger icon-button large"
-              onClick={(e) => {
-                toggleDeleteDialog();
-                e.stopPropagation();
-              }}
-            />
-          </div>
-          {deleteDialog ? (
-            <TimelinePostDeleteConfirmDialog
-              toggle={() => {
-                toggleDeleteDialog();
-                more.toggle();
-              }}
-              onConfirm={more.onDelete}
-            />
-          ) : null}
-        </>
-      ) : null}
     </div>
   );
 };
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 6c2c43c1..35c1a65d 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -16,7 +16,6 @@ import Timeline, {
   TimelinePostInfoEx,
   TimelineDeleteCallback,
 } from "./Timeline";
-import TimelineTop from "./TimelineTop";
 import TimelinePostEdit, { TimelinePostSendCallback } from "./TimelinePostEdit";
 import { TimelineSyncStatus } from "./SyncStatusBadge";
 
@@ -226,7 +225,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
             collapse={cardCollapse}
             toggleCollapse={toggleCardCollapse}
           />
-          <TimelineTop height="56px" />
           {timelineBody}
         </>
       );
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-background.svg b/FrontEnd/src/app/views/timeline-common/timeline-background.svg
new file mode 100644
index 00000000..b72c448b
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline-common/timeline-background.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 100 80" xmlns="http://www.w3.org/2000/svg" stroke="rgba(255,196,0,0.6)">

+    <line x1="0" y1="0" x2="100" y2="40" stroke-width="5" />

+    <line x1="0" y1="80" x2="100" y2="40" stroke-width="5" />

+</svg>
\ No newline at end of file
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 4151bfcc..286f6867 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -4,8 +4,13 @@
   z-index: 0
   position: relative
 
+  background-image: url("views/timeline-common/timeline-background.svg")
+  background-size: 100% auto
+  background-repeat: no-repeat repeat
+
   &-item
-    display: flex
+    position: relative
+    padding: 0.5em
 
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
@@ -30,12 +35,17 @@ $timeline-line-color-current: #36c2e6
 
 .timeline-line
   &-area-container
+    position: absolute
     display: flex
     justify-content: flex-end
     padding-right: 5px
+    z-index: 1
 
     flex: 0 0 auto
+
+    left: 0.5em
     width: 60px
+    height: 100%
 
   &-area
     display: flex
@@ -97,9 +107,11 @@ $timeline-line-color-current: #36c2e6
     &-node
       animation-name: timeline-line-node-current
 
-.timeline-content-area
-  padding: 10px 0
-  flex-grow: 1
+.timeline-item-card
+  @extend .cru-card
+  @extend .clearfix
+  position: relative
+  padding: 0.5em 2em 0.5em 60px
 
 .timeline-item-delete-button
   position: absolute