fix chatMessages (party chat) message spacing

HabitRPG · Jan 5, 2025 · ba6a591 · ba6a591
1 parent 5ce4f14
commit ba6a591
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/website/client/src/components/chat/chatMessages.vue b/website/client/src/components/chat/chatMessages.vue
@@ -24,6 +24,8 @@
     <div
       v-for="msg in messages.filter(m => chat && canViewFlag(m))"
       :key="msg.id"
+      class="message-row"
+      :class="{ 'margin-right': user._id !== msg.uuid}"
     >
       <div class="d-flex">
         <avatar
@@ -135,6 +137,18 @@
   .message-scroll .d-flex {
     min-width: 1px;
   }
+
+  .message-row {
+    margin-left: 12px;
+    margin-right: 0;
+    margin-bottom: 1.2rem;
+
+    &:not(.margin-right) {
+      .d-flex {
+        justify-content: flex-end;
+      }
+    }
+  }
 </style>
 
 <script>
@@ -147,6 +161,8 @@ import { userStateMixin } from '../../mixins/userState';
 import Avatar from '../avatar';
 import MessageCard from '@/components/messages/messageCard.vue';
 
+// TODO merge chatMessages.vue (party message list) with messageList.vue (private message list)
+
 export default {
   components: {
     MessageCard,

diff --git a/website/client/src/components/groups/chat.vue b/website/client/src/components/groups/chat.vue
@@ -74,7 +74,7 @@
       <slot name="additionRow"></slot>
       <div class="row">
         <div class="hr col-12"></div>
-        <chat-message
+        <chat-messages
           :chat.sync="group.chat"
           :group-type="group.type"
           :group-id="group._id"
@@ -91,7 +91,7 @@ import externalLinks from '../../mixins/externalLinks';
 
 import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
-import chatMessage from '../chat/chatMessages';
+import chatMessages from '../chat/chatMessages';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
 import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
@@ -103,7 +103,7 @@ export default {
   components: {
     autocomplete,
     communityGuidelines,
-    chatMessage,
+    chatMessages,
   },
   mixins: [externalLinks, autoCompleteHelperMixin],
   props: ['label', 'group', 'placeholder'],

diff --git a/website/client/src/components/messages/messageList.vue b/website/client/src/components/messages/messageList.vue
@@ -111,7 +111,7 @@
 }
 
 .message-list {
- width: 100%;
+  width: 100%;
   padding-right: 10px;
   margin-right: 0 !important;
 }