feat: update mobile ui for post page

open-isle-cli/src/assets/global.css

@@ -93,16 +93,17 @@ body {
 }
 
 .info-content-text pre {
-  background-color: #f6f8fa;
+  background-color: var(--normal-background-color);
   padding: 8px 12px;
   border-radius: 4px;
-  line-height: 0.5;
+  line-height: 0.8;
 }
 
 .info-content-text code {
-  font-family: 'Courier New', monospace;
+  font-family: monospace;
   font-size: 13px;
   border-radius: 4px;
+  white-space: pre-wrap;
 }
 
 .info-content-text a {
@@ -172,10 +173,6 @@ body {
 }
 
 @media (max-width: 768px) {
-  .info-content-text {
-    font-size: 14px;
-  }
-
   .info-content-text h1 {
     font-size: 20px;
   }
@@ -185,10 +182,10 @@ body {
   }
 
   .info-content-text p {
-    font-size: 12px;
+    font-size: 14px;
   }
 
   .info-content-text li {
-    font-size: 12px;
+    font-size: 14px;
   }
 }

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>

open-isle-cli/src/views/PostPageView.vue

@@ -40,10 +40,14 @@
           <div class="user-avatar-item">
             <img class="user-avatar-item-img" :src="author.avatar" alt="avatar">
           </div>
+          <div v-if="isMobile" class="info-content-header">
+            <div class="user-name">{{ author.username }}</div>
+            <div class="post-time">{{ postTime }}</div>
+          </div>
         </div>
 
         <div class="info-content">
-          <div class="info-content-header">
+          <div v-if="!isMobile" class="info-content-header">
             <div class="user-name">{{ author.username }}</div>
             <div class="post-time">{{ postTime }}</div>
           </div>
@@ -63,9 +67,9 @@
         :show-login-overlay="!loggedIn" />
 
       <div class="comments-container">
-        <BaseTimeline :items="comments">
+        <BaseTimeline :items="comments"> 
           <template #item="{ item }">
-            <CommentItem :key="item.id" :comment="item" :level="level + 1" :default-show-replies="item.openReplies"
+            <CommentItem :key="item.id" :comment="item" :level="0" :default-show-replies="item.openReplies"
               @deleted="onCommentDeleted" />
           </template>
         </BaseTimeline>
@@ -115,6 +119,7 @@ import { getToken, authState } from '../utils/auth'
 import TimeManager from '../utils/time'
 import { hatch } from 'ldrs'
 import { useRouter } from 'vue-router'
+import { isMobile } from '../utils/screen'
 hatch.register()
 
 export default {
@@ -140,7 +145,7 @@ export default {
     const mainContainer = ref(null)
     const currentIndex = ref(1)
     const subscribed = ref(false)
-
+      
     const lightboxVisible = ref(false)
     const lightboxIndex = ref(0)
     const lightboxImgs = ref([])
@@ -506,7 +511,8 @@ export default {
       lightboxVisible,
       lightboxIndex,
       lightboxImgs,
-      handleImageClick
+      handleImageClick,
+      isMobile
     }
   }
 }
@@ -551,6 +557,11 @@ export default {
   opacity: 0.5;
 }
 
+.user-avatar-container {
+  display: flex;
+  flex-direction: row;
+}
+
 .scroller-middle {
   margin: 10px 0;
   margin-left: 10px;
@@ -740,7 +751,6 @@ export default {
 .info-content-header {
   display: flex;
   flex-direction: row;
-  gap: 10px;
   align-items: center;
   justify-content: space-between;
 }
@@ -770,15 +780,6 @@ export default {
   margin-top: 60px;
 }
 
-.reactions-container {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-}
-
 .reactions-viewer {
   display: flex;
   flex-direction: row;
@@ -836,5 +837,26 @@ export default {
   .post-page-scroller-container {
     display: none;
   }
+
+  .info-content {
+    gap: 3px;
+  }
+
+  .info-content-container {
+    flex-direction: column;
+  }
+
+  .info-content-header {
+    width: calc(100% - 50px - 10px);
+    margin-left: 10px;
+  }
+
+  .article-footer-container {
+    margin-top: 10px;
+  }
+
+  .loading-container {
+    width: 100%;
+  }
 }
 </style>