From 457f4b2141d7380c0521fb2b6132f0bde0cf7315 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 3 Nov 2020 22:50:00 +0800
Subject: feat: Add timeline title to home page.

---
 FrontEnd/src/app/views/common/UserTimelineLogo.tsx |  2 +-
 FrontEnd/src/app/views/home/TimelineBoard.tsx      |  9 +++++----
 FrontEnd/src/app/views/home/home.sass              | 21 +++++++++++++--------
 3 files changed, 19 insertions(+), 13 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/common/UserTimelineLogo.tsx b/FrontEnd/src/app/views/common/UserTimelineLogo.tsx
index 29f6a69f..19b9fee5 100644
--- a/FrontEnd/src/app/views/common/UserTimelineLogo.tsx
+++ b/FrontEnd/src/app/views/common/UserTimelineLogo.tsx
@@ -15,7 +15,7 @@ const UserTimelineLogo: React.FC<UserTimelineLogoProps> = (props) => {
         <circle cx="50" cy="50" r="22" />
         <line x1="50" x2="50" y1="75" y2="100" />
       </g>
-      <g fill={color}>
+      <g fill={coercedColor}>
         <circle cx="85" cy="75" r="10" />
         <path d="m70,100c0,0 15,-30 30,0.25" />
       </g>
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index a3d176e1..c2a7e5fe 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -48,20 +48,21 @@ const TimelineBoard: React.FC<TimelineBoardProps> = (props) => {
           );
         } else {
           return timelines.map((timeline) => {
-            const { name } = timeline;
+            const { name, title } = timeline;
             const isPersonal = name.startsWith("@");
             const url = isPersonal
               ? `/users/${timeline.owner.username}`
               : `/timelines/${name}`;
             return (
-              <div key={name} className="timeline-board-item">
+              <Link key={name} to={url} className="timeline-board-item">
                 {isPersonal ? (
                   <UserTimelineLogo className="icon" />
                 ) : (
                   <TimelineLogo className="icon" />
                 )}
-                <Link to={url}>{name}</Link>
-              </div>
+                {title}
+                <small className="ml-2 text-secondary">{name}</small>
+              </Link>
             );
           });
         }
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index 28a2e5f3..0c01019b 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -1,13 +1,18 @@
-.timeline-board-item
-  font-size: 1.1em
-  @extend .my-2
-  .icon
-    height: 1.3em
-    @extend .mr-2
-
 .timeline-board
   @extend .cru-card
   @extend .d-flex
   @extend .flex-column
-  @extend .p-3
+  @extend .py-3
   min-height: 200px
+
+.timeline-board-item
+  font-size: 1.1em
+  @extend .px-3
+  @extend .py-2
+  transition: background 0.3s
+  .icon
+    height: 1.3em
+    color: black
+    @extend .mr-2
+  &:hover
+    background: $gray-300
-- 
cgit v1.2.3