fought the avatar arch nemesis again

HabitRPG · Dec 12, 2024 · 2447ae9 · 2447ae9
1 parent 8c8166d
commit 2447ae9
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 177 deletions.
diff --git a/website/client/src/components/messages/likeButton.vue b/website/client/src/components/messages/likeButton.vue
@@ -60,6 +60,7 @@
 .like-button {
   color: $gray-100;
   font-size: 12px;
+  line-height: 16px;
 
   &:hover {
     cursor: pointer;

diff --git a/website/client/src/components/messages/messageCard.vue b/website/client/src/components/messages/messageCard.vue
@@ -180,7 +180,7 @@
 
 .card {
   background: transparent !important;
-  margin-bottom: 1.2rem !important;
+  margin-bottom: 0 !important;
 }
 
 .message-card:not(.system-message) {

diff --git a/website/client/src/components/messages/messageList.vue b/website/client/src/components/messages/messageList.vue
@@ -1,9 +1,9 @@
 <template>
   <div
     ref="container"
-    class="container-fluid"
+    class="message-list"
   >
-    <div class="row loadmore">
+    <div class="loadmore">
       <div v-if="canLoadMore && !isLoading">
         <div class="loadmore-divider-holder">
           <div class="loadmore-divider"></div>
@@ -28,7 +28,7 @@
     <div
       v-for="(msg) in messages"
       :key="msg.id"
-      class="row message-row"
+      class="message-row"
       :class="{ 'margin-right': user._id !== msg.uuid}"
     >
       <div
@@ -40,7 +40,8 @@
           :member="conversationOpponentUser"
           :avatar-only="true"
           :show-weapon="false"
-          :override-top-padding="'14px'"
+          :debug-mode="false"
+          :override-top-padding="'0'"
           :hide-class-badge="true"
           @click.native="showMemberModal(msg.uuid)"
         />
@@ -60,8 +61,9 @@
           :member="user"
           :avatar-only="true"
           :show-weapon="false"
+          :debug-mode="false"
           :hide-class-badge="true"
-          :override-top-padding="'14px'"
+          :override-top-padding="'0'"
           @click.native="showMemberModal(msg.uuid)"
         />
       </div>
@@ -70,119 +72,123 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
-  .avatar {
-    width: 170px;
-    min-width: 8rem;
-    height: 120px;
-    padding-top: 0 !important;
-  }
-
-  .avatar-right {
-    overflow: clip;
+.avatar-left, .avatar-right {
+  align-self: center;
 
-    ::v-deep .avatar {
-      margin-left: -2rem;
-      margin-right: 1rem;
-    }
+  ::v-deep .character-sprites {
+    margin-bottom: -5px !important;
+    padding-bottom: 0 !important;
+    margin-top: -1px !important;
+  }
 
-    ::v-deep .character-sprites {
-      margin-right: 1rem !important;
-    }
+  ::v-deep .avatar {
+    margin-left: -1.75rem;
+    margin-right: -0.5rem;
   }
+}
 
-  .card {
-    border: 0px;
-    margin-bottom: 1rem;
-    padding: 0rem;
-    width: 684px;
+.avatar-left {
+  margin-right: 1.5rem;
+}
 
-  }
-  .message-row {
-    margin-left: 12px;
-    margin-right: 12px;
+.avatar-right {
+  overflow: clip;
+  margin-left: 1.5rem;
 
-    &:not(.margin-right) {
-      .d-flex {
-        justify-content: flex-end;
-      }
-    }
+  ::v-deep .character-sprites {
+    margin-right: 1rem !important;
   }
-  @media only screen and (max-width: 1200px) {
-    .card {
-      width: 100%;
-    }
-  }
-
-  @media only screen and (min-width: 1400px) {
-    .message-row {
-      margin-left: -15px;
-      margin-right: -30px;
+}
+
+.card {
+  border: 0px;
+  margin-bottom: 1rem;
+  padding: 0rem;
+  width: 684px;
+
+}
+
+.message-list {
+ width: 100%;
+  padding-right: 10px;
+  margin-right: 0 !important;
+}
+
+.message-row {
+  margin-left: 12px;
+  margin-right: 0;
+  margin-bottom: 1.2rem;
+
+  &:not(.margin-right) {
+    .d-flex {
+      justify-content: flex-end;
     }
   }
-
-  .hr {
+}
+
+.hr {
+  width: 100%;
+  height: 20px;
+  border-bottom: 1px solid $gray-500;
+  text-align: center;
+  margin: 2em 0;
+}
+
+.hr-middle {
+  font-size: 16px;
+  font-weight: bold;
+  font-family: 'Roboto Condensed';
+  line-height: 1.5;
+  text-align: center;
+  color: $gray-200;
+  background-color: $gray-700;
+  padding: .2em;
+  margin-top: .2em;
+  display: inline-block;
+  width: 100px;
+}
+
+.loadmore {
+  justify-content: center;
+  margin-right: 12px;
+  margin-top: 12px;
+  margin-bottom: 24px;
+
+  > div {
+    display: flex;
     width: 100%;
-    height: 20px;
-    border-bottom: 1px solid $gray-500;
-    text-align: center;
-    margin: 2em 0;
-  }
-
-  .hr-middle {
-    font-size: 16px;
-    font-weight: bold;
-    font-family: 'Roboto Condensed';
-    line-height: 1.5;
-    text-align: center;
-    color: $gray-200;
-    background-color: $gray-700;
-    padding: .2em;
-    margin-top: .2em;
-    display: inline-block;
-    width: 100px;
-  }
-
-  .loadmore {
-    justify-content: center;
-    margin-right: 12px;
-    margin-top: 12px;
-    margin-bottom: 24px;
-
-    > div {
-      display: flex;
-      width: 100%;
-      align-items: center;
+    align-items: center;
 
-      button {
-        text-align: center;
-        color: $gray-50;
-      }
+    button {
+      text-align: center;
+      color: $gray-50;
     }
   }
+}
 
-  .loadmore-divider-holder {
-    flex: 1;
-    margin-left: 24px;
-    margin-right: 24px;
+.loadmore-divider-holder {
+  flex: 1;
+  margin-left: 24px;
+  margin-right: 24px;
 
-    &:last-of-type {
-      margin-right: 0;
-    }
+  &:last-of-type {
+    margin-right: 0;
   }
+}
 
-  .loadmore-divider {
-    height: 1px;
-    border-top: 1px $gray-500 solid;
-    width: 100%;
+.loadmore-divider {
+  height: 1px;
+  border-top: 1px $gray-500 solid;
+  width: 100%;
 
-  }
+}
 
-  .loading {
-    padding-left: 1.5rem;
-    margin-bottom: 1rem;
-  }
+.loading {
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+}
 
 </style>