More changes to chat list layout.

mattmezza · Oct 4, 2020 · 1d4625b · 1d4625b
1 parent f6384f2
commit 1d4625b
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/src/ChatList.vue b/src/ChatList.vue
@@ -9,7 +9,7 @@
  <td class="chat-name-td" :style="{color: colors.chatList.text}">
  {{ chat.name }}
  </td>
- <td>
+ <td class="badge-td">
  <svg width="22px" height="22px" viewBox="0 0 32 32" class="bi bi-circle-fill chat-badge" :fill="chat.unreadCount ? colors.chatListBadge.bg : colors.chatList.bg" xmlns="http://www.w3.org/2000/svg">
  <circle cx="16" cy="16" r="16"/>
  <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" :fill="chat.unreadCount ? colors.chatListBadge.text : colors.chatList.bg">
@@ -46,31 +46,44 @@ export default {
 
 <style scoped>
 .chat-list {
+ box-sizing: border-box;
  height: 100%;
  overflow: auto;
- padding-left: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
  padding-top: 8px;
 }
 .chat-img-td {
+ box-sizing: border-box;
  text-align: center;
  width: 50px;
 }
 .chat-img {
+ box-sizing: border-box;
  border-radius: 50%;
  width: 50px;
  margin-right: 5px;
  display: block;
 }
 .chat-name-td {
+ box-sizing: border-box;
  font-size: 20px;
  vertical-align: middle;
  text-align: left;
 }
+.badge-td {
+ box-sizing: border-box;
+ vertical-align: middle;
+ text-align: center;
+ width: 24px;
+}
 .chat-badge {
+ box-sizing: border-box;
  font-size: 17px;
 }
 table {
- width: 100%
+ box-sizing: border-box;
+ width: 100%;
 }
 tr>td {
  padding-top: 5px;