feat: update mobile ui for post page

open-isle-cli/src/components/BaseTimeline.vue

@@ -42,6 +42,8 @@ export default {
 }
 
 .timeline-icon {
+  position: sticky;
+  top: 0;
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -87,4 +89,17 @@ export default {
 .timeline-content {
   flex: 1;
 }
+
+@media (max-width: 768px) {
+  .timeline-item {
+    margin-bottom: 10px;
+  }
+
+  .timeline-icon {
+    margin-right: 2px;
+    width: 30px;
+    height: 30px;
+  }
+}
+
 </style>

open-isle-cli/src/components/CommentEditor.vue

@@ -95,7 +95,6 @@ export default {
           'redo',
           '|',
           'link',
-          'image'
         ],
         toolbarConfig: { pin: true },
         input(value) {

open-isle-cli/src/components/CommentItem.vue

@@ -8,7 +8,7 @@
       </div>
     </div>   -->
     <div class="info-content">
-      <div class="info-content-header">
+      <div class="common-info-content-header">
         <div class="info-content-header-left">
           <div class="user-name">{{ comment.userName }}</div>
           <div class="post-time">{{ comment.time }}</div>
@@ -38,7 +38,6 @@
       <div v-if="comment.reply && comment.reply.length" class="reply-toggle" @click="toggleReplies">
         <i v-if="showReplies" class="fas fa-chevron-up reply-toggle-icon"></i>
         <i v-else class="fas fa-chevron-down reply-toggle-icon"></i>
-
         {{ comment.reply.length }}条回复
       </div>
       <div v-if="showReplies" class="reply-list">
@@ -240,6 +239,14 @@ export default CommentItem
   margin-right: 5px;
 }
 
+.common-info-content-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
 @keyframes highlight {
   from {
     background-color: yellow;

open-isle-cli/src/components/MenuComponent.vue

@@ -227,6 +227,7 @@ export default {
   flex-direction: column;
   padding: 10px;
   overflow-y: auto;
+  scrollbar-width: none;
 }
 
 .menu-item-container {

open-isle-cli/src/components/ReactionsGroup.vue

@@ -116,7 +116,7 @@ export default {
     }
     const scheduleHide = () => {
       clearTimeout(hideTimer)
-      hideTimer = setTimeout(() => { panelVisible.value = false }, 2000)
+      hideTimer = setTimeout(() => { panelVisible.value = false }, 0)
     }
     const cancelHide = () => {
       clearTimeout(hideTimer)
@@ -276,4 +276,11 @@ export default {
 .reaction-option.selected {
   background-color: rgb(236, 236, 236);
 }
+
+@media (max-width: 768px) {
+  .make-reaction-item {
+    font-size: 16px;
+    padding: 3px 5px;
+  }
+}
 </style>