From c1f79460d57a4daba75bdc34b7b7a3ea2d7254b3 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 14 Sep 2023 18:58:44 +0800
Subject: Fix mobile post create.

---
 FrontEnd/src/components/index.css                  |   2 +-
 FrontEnd/src/pages/timeline/Timeline.css           | 145 ---------------------
 FrontEnd/src/pages/timeline/Timeline.tsx           |   4 +-
 FrontEnd/src/pages/timeline/TimelineInfoCard.css   |   2 +-
 .../src/pages/timeline/TimelinePostCreateView.css  |  12 +-
 5 files changed, 15 insertions(+), 150 deletions(-)

(limited to 'FrontEnd')

diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css
index eb1f5b46..32e762cb 100644
--- a/FrontEnd/src/components/index.css
+++ b/FrontEnd/src/components/index.css
@@ -97,4 +97,4 @@ body {
     left: 0;
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index 5325af98..5bf0a7bb 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -22,146 +22,6 @@
   padding-top: 10px;
 }
 
-@keyframes timeline-line-node {
-  to {
-    box-shadow: 0 0 20px 3px var(--cru-primary-l1-color);
-  }
-}
-
-@keyframes timeline-line-node-current {
-  to {
-    box-shadow: 0 0 20px 3px var(--cru-primary-enhance-l1-color);
-  }
-}
-
-@keyframes timeline-line-node-loading {
-  to {
-    box-shadow: 0 0 20px 3px var(--cru-primary-l1-color);
-  }
-}
-
-@keyframes timeline-line-node-loading-edge {
-  from {
-    transform: rotate(0turn);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@keyframes timeline-top-loading-enter {
-  from {
-    transform: translate(0, -100%);
-  }
-}
-
-@keyframes timeline-post-enter {
-  from {
-    transform: translate(0, 100%);
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.timeline-top-loading-enter {
-  animation: 1s timeline-top-loading-enter;
-}
-
-.timeline-line {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 30px;
-  position: absolute;
-  z-index: 1;
-  left: 2em;
-  top: 0;
-  bottom: 0;
-  transition: left 0.5s;
-}
-
-@media (max-width: 575.98px) {
-  .timeline-line {
-    left: 1em;
-  }
-}
-
-.timeline-line .segment {
-  width: 12px;
-  background: var(--cru-primary-color);
-}
-
-.timeline-line .segment.start {
-  height: 1.8em;
-  flex: 0 0 auto;
-}
-
-.timeline-line .segment.end {
-  flex: 1 1 auto;
-}
-
-.timeline-line .segment.current-end {
-  height: 2em;
-  flex: 0 0 auto;
-  background: linear-gradient(var(--cru-primary-enhance-color), white);
-}
-
-.timeline-line .node-container {
-  flex: 0 0 auto;
-  position: relative;
-  width: 18px;
-  height: 18px;
-}
-
-.timeline-line .node {
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  background: var(--cru-primary-color);
-  left: -3px;
-  top: -3px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  z-index: 1;
-  animation: 1s infinite alternate;
-  animation-name: timeline-line-node;
-}
-
-.timeline-line .node-loading-edge {
-  color: var(--cru-primary-color);
-  width: 38px;
-  height: 38px;
-  position: absolute;
-  left: -10px;
-  top: -10px;
-  box-sizing: border-box;
-  z-index: 2;
-  animation: 1.5s linear infinite timeline-line-node-loading-edge;
-}
-
-.timeline-line.current .segment.start {
-  background: linear-gradient(var(--cru-primary-color),
-      var(--cru-primary-enhance-color));
-}
-
-.timeline-line.current .segment.end {
-  background: var(--cru-primary-enhance-color);
-}
-
-.timeline-line.current .node {
-  background: var(--cru-primary-enhance-color);
-  animation-name: timeline-line-node-current;
-}
-
-.timeline-line.loading .node {
-  background: var(--cru-primary-color);
-  animation-name: timeline-line-node-loading;
-}
-
 .timeline-content-image {
   max-width: 80%;
   max-height: 200px;
@@ -199,8 +59,3 @@
   margin-right: 0.6em;
 }
 
-
-.timeline-top {
-  position: sticky;
-  top: 56px;
-}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index 4fe5c521..1d8e28d5 100644
--- a/FrontEnd/src/pages/timeline/Timeline.tsx
+++ b/FrontEnd/src/pages/timeline/Timeline.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import classnames from "classnames";
+import classNames from "classnames";
 import { HubConnectionState } from "@microsoft/signalr";
 
 import {
@@ -166,7 +166,7 @@ export function Timeline(props: TimelineProps) {
         />
       )}
       {posts && (
-        <div className={classnames("timeline", className)}>
+        <div className={classNames("timeline", className)}>
           {timeline?.postable && (
             <TimelinePostEdit timeline={timeline} onPosted={updatePosts} />
           )}
diff --git a/FrontEnd/src/pages/timeline/TimelineInfoCard.css b/FrontEnd/src/pages/timeline/TimelineInfoCard.css
index 29e59b62..afcb6409 100644
--- a/FrontEnd/src/pages/timeline/TimelineInfoCard.css
+++ b/FrontEnd/src/pages/timeline/TimelineInfoCard.css
@@ -60,4 +60,4 @@
 
 .timeline-card-button {
   margin: 0 0.2em;
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index 252340f6..e483ca17 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -5,6 +5,16 @@
   margin-right: 200px;
 }
 
+@media (max-width: 576px) {
+  .timeline-post-create-container {
+    padding-top: 60px;
+  }
+
+  .timeline-post-create-card{
+    margin-right: 0;
+  }
+}
+
 .timeline-post-create {
   display: flex;
 }
@@ -41,4 +51,4 @@
   flex-direction: column;
   align-items: center;
   margin-left: 1em;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3