diff options
| author | crupest <crupest@outlook.com> | 2021-06-15 16:23:44 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2021-06-15 16:23:44 +0800 |
| commit | ddce03a67708249eec129eb36744be460345bd75 (patch) | |
| tree | 58417f657467e89d06c58b848db621c021803254 /FrontEnd/src/views/home | |
| parent | e0b766203d7576ab67b16ba556ba14120d0bc876 (diff) | |
| download | timeline-ddce03a67708249eec129eb36744be460345bd75.tar.gz timeline-ddce03a67708249eec129eb36744be460345bd75.tar.bz2 timeline-ddce03a67708249eec129eb36744be460345bd75.zip | |
...
Diffstat (limited to 'FrontEnd/src/views/home')
| -rw-r--r-- | FrontEnd/src/views/home/home.sass | 29 | ||||
| -rw-r--r-- | FrontEnd/src/views/home/index.css | 73 | ||||
| -rw-r--r-- | FrontEnd/src/views/home/index.tsx | 2 |
3 files changed, 75 insertions, 29 deletions
diff --git a/FrontEnd/src/views/home/home.sass b/FrontEnd/src/views/home/home.sass deleted file mode 100644 index b4cda586..00000000 --- a/FrontEnd/src/views/home/home.sass +++ /dev/null @@ -1,29 +0,0 @@ -.home-timeline-list-item
- display: flex
- align-items: center
-
-.home-timeline-list-item-timeline
- transition: background 0.8s
- animation: 0.8s home-timeline-list-item-timeline-enter
- &:hover
- background: $gray-200
-
-@keyframes home-timeline-list-item-timeline-enter
- from
- transform: translate(-100%,0)
- opacity: 0
-
-.home-timeline-list-item-line
- width: 80px
- flex-shrink: 0
-
-@keyframes home-timeline-list-loading-head-animation
- from
- transform: translate(0,-30px)
- opacity: 1
-
- to
- opacity: 0
-
-.home-timeline-list-loading-head
- animation: 1s infinite home-timeline-list-loading-head-animation
diff --git a/FrontEnd/src/views/home/index.css b/FrontEnd/src/views/home/index.css new file mode 100644 index 00000000..516aba52 --- /dev/null +++ b/FrontEnd/src/views/home/index.css @@ -0,0 +1,73 @@ +.timeline-board {
+ min-height: 200px;
+ height: 100%;
+ position: relative;
+}
+
+.timeline-board-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.timeline-board-item {
+ font-size: 1.1em;
+ height: 48px;
+ transition: background 0.3s;
+ display: flex;
+ align-items: center;
+}
+.timeline-board-item .icon {
+ height: 1.3em;
+ color: black;
+}
+.timeline-board-item:hover {
+ background: #dee2e6;
+}
+.timeline-board-item .right {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+}
+.timeline-board-item .title {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.home-timeline-list-item {
+ display: flex;
+ align-items: center;
+}
+
+.home-timeline-list-item-timeline {
+ transition: background 0.8s;
+ animation: 0.8s home-timeline-list-item-timeline-enter;
+}
+.home-timeline-list-item-timeline:hover {
+ background: #e9ecef;
+}
+
+@keyframes home-timeline-list-item-timeline-enter {
+ from {
+ transform: translate(-100%, 0);
+ opacity: 0;
+ }
+}
+.home-timeline-list-item-line {
+ width: 80px;
+ flex-shrink: 0;
+}
+
+@keyframes home-timeline-list-loading-head-animation {
+ from {
+ transform: translate(0, -30px);
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+.home-timeline-list-loading-head {
+ animation: 1s infinite home-timeline-list-loading-head-animation;
+}
diff --git a/FrontEnd/src/views/home/index.tsx b/FrontEnd/src/views/home/index.tsx index 0eca23ee..ddb72e76 100644 --- a/FrontEnd/src/views/home/index.tsx +++ b/FrontEnd/src/views/home/index.tsx @@ -8,6 +8,8 @@ import SearchInput from "../common/SearchInput"; import TimelineListView from "./TimelineListView"; import WebsiteIntroduction from "./WebsiteIntroduction"; +import "./index.css"; + const highlightTimelineMessageMap = { loading: "home.loadingHighlightTimelines", done: "home.loadedHighlightTimelines", |