Add mobile user list and responsive design improvements

yeongpin · Feb 14, 2025 · 9e58628 · 9e58628
1 parent d6230b8
commit 9e58628
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 23 deletions.
diff --git a/server/server.js b/server/server.js
@@ -704,7 +704,8 @@ async function findAvailablePort(startPort) {
   const PORT = await findAvailablePort(startPort);
 
   http.listen(PORT, process.env.HOST || '0.0.0.0', () => {
-    console.log(`Server running on http://${process.env.HOST || '0.0.0.0'}:${PORT}`);
+    console.log(`Server running on http://${process.env.HOST || '127.0.0.1'}:${PORT}`); 
+    console.log(`Server running on http://127.0.0.1:${PORT}`);
     // 如果端口不是原始端口，提示用戶
     if (PORT !== startPort) {
       console.log(`Original port ${startPort} was in use, using port ${PORT} instead`);

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="chat-container">
     <div class="floating-container">
+      <button 
+        class="floating-button mobile-user-btn"
+        @click="toggleMobileUserList"
+        :title="t('user.online')"
+      >
+        <i class="fas fa-users"></i>
+      </button>
       <button class="floating-button" @click="showCreateRoom">
         <i class="fas fa-comments"></i>
       </button>
@@ -44,12 +51,14 @@
         @load-history="loadHistory" 
         :localeData="localeData"
       />
-      <user-list 
-        :users="onlineUsers" 
-        :current-user="username"
-        @show-name-editor="showNameEditor" 
-        :localeData="localeData"
-      />
+      <div class="desktop-user-list">
+        <user-list 
+          :users="onlineUsers" 
+          :current-user="username"
+          @show-name-editor="showNameEditor" 
+          :localeData="localeData"
+        />
+      </div>
       <chat-input 
         @send-message="handleSendMessage" 
         :users="filteredUsers"
@@ -82,6 +91,17 @@
         :currentRoomId="currentRoomId"
       />
     </div>
+    <div class="mobile-user-list" :class="{ 'show': showMobileUserList }">
+      <button class="close-btn" @click="showMobileUserList = false">
+        <i class="fas fa-times"></i>
+      </button>
+      <user-list 
+        :users="onlineUsers" 
+        :current-user="username"
+        @show-name-editor="showNameEditor" 
+        :localeData="localeData"
+      />
+    </div>
   </div>
 </template>
 
@@ -139,6 +159,7 @@ export default {
       currentRoomId: new URLSearchParams(window.location.search).get('chat_id') || 'public',
       notificationSound: null,
       audioContext: null,
+      showMobileUserList: false,
     };
   },
   computed: {
@@ -479,7 +500,10 @@ export default {
           alert(this.t('room.copied'));
         });
       }
-    }
+    },
+    toggleMobileUserList() {
+      this.showMobileUserList = !this.showMobileUserList;
+    },
   }
 };
 </script>
@@ -500,6 +524,7 @@ body {
   display: grid;
   grid-template-columns: 80px 1fr;
   gap: 20px;
+  overflow: hidden;
 }
 
 .chat-main {
@@ -511,6 +536,8 @@ body {
   border-radius: 8px;
   padding: 20px;
   grid-template-rows: 1fr auto;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .modal-overlay {
@@ -616,9 +643,13 @@ body {
 
 @media (max-width: 768px) {
   .chat-container {
-    grid-template-columns: 60px 1fr;
+    grid-template-columns: 50px 1fr;
     gap: 10px;
-    padding: 10px;
+    padding: 10px 0px;
+    height: 98vh;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
   }
 
   .floating-container {
@@ -633,6 +664,30 @@ body {
     width: 32px;
     height: 32px;
   }
+
+  .mobile-user-btn {
+    display: flex !important;
+  }
+
+  .desktop-user-list {
+    display: none !important;
+  }
+
+  .chat-main {
+    grid-template-columns: 1fr;
+    padding: 10px;
+    gap: 10px;
+    width: 90%;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  /* 確保移動端消息列表佔滿寬度 */
+  .chat-main > *:first-child {
+    grid-column: 1 / -1;
+    width: 88%;
+    max-width: 100%;
+  }
 }
 
 .leave-room {
@@ -672,4 +727,43 @@ body {
   50% { opacity: 1; transform: scale(1.2); }
   100% { opacity: 0; transform: scale(0.8); }
 }
+
+.mobile-user-btn {
+  display: none;
+}
+
+.desktop-user-list {
+  display: block;
+  width: 200px;
+}
+
+.mobile-user-list {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 250px;
+  height: 100vh;
+  background: var(--bg-color);
+  border-left: 1px solid var(--border-color);
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  z-index: 999;
+  overflow-y: auto;
+}
+
+.mobile-user-list.show {
+  transform: translateX(0);
+}
+
+.mobile-user-list .close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  color: var(--text-color);
+  font-size: 1.2em;
+  cursor: pointer;
+  padding: 5px;
+}
 </style> 
diff --git a/src/components/FileCard.vue b/src/components/FileCard.vue
@@ -38,15 +38,15 @@ export default {
 
 <style scoped>
 .file-card {
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 300px;
-  padding: 8px;
-  background: var(--input-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-}
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 95%;
+    padding: 8px;
+    background: var(--input-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+  }
 
 .file-info {
   display: flex;

diff --git a/src/components/MessageList.vue b/src/components/MessageList.vue
@@ -182,10 +182,11 @@
     grid-column: 1;
     border: 1px solid var(--border-color);
     padding: 20px;
-    height: calc(95vh - 150px); /* 減去頂部間距、底部輸入框和padding */
+    height: calc(95vh - 150px);
     overflow-y: scroll;
     background-color: var(--bg-color);
     border-radius: 6px;
+    max-width: 100%;
   }
   
   /* 美化滾動條 */
@@ -304,9 +305,7 @@
     display: inline-flex;
     justify-content: space-between;
     align-items: center;
-    min-width: 200px;
-    max-width: 300px;
-    width: 300px;
+    width: 95%;
     padding: 8px;
     background: var(--input-bg);
     border: 1px solid var(--border-color);
@@ -397,4 +396,14 @@
   .history-btn i {
     font-size: 0.9em;
   }
+  
+  @media (max-width: 768px) {
+    .chat-messages {
+      padding: 10px;
+      height: calc(98vh - 150px);
+      width: 100%;
+      max-width: 100%;
+      margin: 0;
+    }
+  }
   </style> 
diff --git a/src/components/UserList.vue b/src/components/UserList.vue
@@ -162,4 +162,33 @@ i.fas.fa-edit {
   color: var(--text-secondary);
   opacity: 0.7;
 }
+
+@media (max-width: 768px) {
+  .user-list {
+    grid-column: unset;
+    height: calc(100vh - 60px);
+    margin-top: 40px;
+    border: none;
+    padding: 10px;
+  }
+
+  .user-list-title {
+    text-align: center;
+    justify-content: center;
+    padding: 15px 0;
+    margin-bottom: 15px;
+  }
+
+  .user-item {
+    padding: 12px 15px;
+    margin: 5px 0;
+    border-radius: 8px;
+    background: var(--input-bg);
+  }
+
+  .change-name-btn {
+    opacity: 1;
+    font-size: 1.1em;
+  }
+}
 </style>