From 17223a97f98f2c4b67fc28af208ce6c6e230a677 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 23 Jun 2021 13:27:55 +0800
Subject: feat: Optimize timeline post option mask.

---
 FrontEnd/src/views/common/Card.css                 |  6 ++++-
 .../src/views/timeline-common/TimelinePostEdit.css | 21 ++++++++++++++++
 .../src/views/timeline-common/TimelinePostView.tsx |  2 +-
 FrontEnd/src/views/timeline-common/index.css       | 28 ++++++----------------
 4 files changed, 34 insertions(+), 23 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index 17c3c779..fb90bd59 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,7 +1,11 @@
+:root {
+  --cru-card-border-radius: 8px;
+}
+
 .cru-card {
   border: 1px solid;
   border-color: #e9ecef;
-  border-radius: 8px;
+  border-radius: var(--cru-card-border-radius);
   background: #fefeff;
   transition: all 0.3s;
 }
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.css b/FrontEnd/src/views/timeline-common/TimelinePostEdit.css
index a303b227..0c7deaa2 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.css
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.css
@@ -1,3 +1,24 @@
+.timeline-item.timeline-post-edit {
+  padding-bottom: 0;
+}
+
+.timeline-post-edit .timeline-item-card {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: none;
+}
+
+.timeline-post-edit {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+}
+
+.timeline-post-edit-image {
+  max-width: 100px;
+  max-height: 100px;
+}
+
 .timeline-markdown-post-edit-page {
   overflow: scroll;
   max-height: 300px;
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
index 6d0d1f2e..7b16e898 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -92,7 +92,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
         </div>
         {operationMaskVisible ? (
           <div
-            className="timeline-post-item-options-mask d-flex justify-content-around align-items-center"
+            className="timeline-post-item-options-mask"
             onClick={() => {
               setOperationMaskVisible(false);
             }}
diff --git a/FrontEnd/src/views/timeline-common/index.css b/FrontEnd/src/views/timeline-common/index.css
index cca1ccd8..e38d0ba7 100644
--- a/FrontEnd/src/views/timeline-common/index.css
+++ b/FrontEnd/src/views/timeline-common/index.css
@@ -149,10 +149,6 @@
   padding: 0.5em;
 }
 
-.timeline-item.timeline-post-edit {
-  padding-bottom: 0;
-}
-
 .timeline-item-card {
   position: relative;
   padding: 0.3em 0.5em 1em 4em;
@@ -163,17 +159,6 @@
   opacity: 0;
 }
 
-.timeline-post-edit .timeline-item-card {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.timeline-post-edit {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-}
-
 @media (max-width: 575.98px) {
   .timeline-item-card {
     padding-left: 3em;
@@ -220,19 +205,20 @@
   font-size: 0.8em;
 }
 
-.timeline-post-edit-image {
-  max-width: 100px;
-  max-height: 100px;
-}
-
 .timeline-post-item-options-mask {
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.85);
   z-index: 100;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  border-radius: var(--cru-card-border-radius);
 }
 
 .timeline-sync-state-badge {
-- 
cgit v1.2.3