From f59655995e33ad625f9ba8e0877be7a08bf38cb9 Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Fri, 11 Sep 2020 12:18:30 -0500
Subject: [PATCH] moderate chat mobile styles

---
 src/api/chat.js          |  4 ---
 src/views/chats/show.vue | 77 +++++++++++++++++++++++++++++++++++-----
 src/views/users/show.vue | 19 +++++-----
 3 files changed, 79 insertions(+), 21 deletions(-)

diff --git a/src/api/chat.js b/src/api/chat.js
index 2063e22e..e7c1d184 100644
--- a/src/api/chat.js
+++ b/src/api/chat.js
@@ -3,9 +3,6 @@ import { getToken } from '@/utils/auth'
 import { baseName } from './utils'
 
 export async function deleteChatMessage(chat_id, message_id, authHost, token) {
-  console.log(chat_id)
-  console.log(message_id)
-
   return await request({
     baseURL: baseName(authHost),
     url: `/api/pleroma/admin/chats/${chat_id}/messages/${message_id}`,
@@ -24,7 +21,6 @@ export async function fetchChat(id, authHost, token) {
 }
 
 export async function fetchChatMessages(id, max_id, authHost, token) {
-  console.log(max_id)
   let url
   max_id !== null ? url = `/api/pleroma/admin/chats/${id}/messages?max_id=${max_id}` : url = `/api/pleroma/admin/chats/${id}/messages`
   return await request({
diff --git a/src/views/chats/show.vue b/src/views/chats/show.vue
index 23a135c9..d926ed08 100644
--- a/src/views/chats/show.vue
+++ b/src/views/chats/show.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" class="chat-show-container">
-    <header v-if="isDesktop || isTablet" class="chat-page-header">
+    <header class="chat-page-header">
       <h1>
         {{ $t('chats.chatHistory') }}:
       </h1>
@@ -168,24 +168,83 @@ export default {
   text-align: center;
 }
 
-@media only screen and (min-width: 1824px) {
-
-}
-
 @media only screen and (max-width:480px) {
   .chat-page-header {
     padding: 0;
-    margin: 7px 15px 15px 10px;
+    margin: 7px 15px 15px 30px;
+    flex-direction: column;
+    align-items: baseline;
+    h1 {
+      margin-left: 0;
+      margin-bottom: 10px;
+    }
+  }
+  .chat-card-participants {
+    display: flex;
+    margin: 0;
+    flex-wrap: wrap;
   }
   .avatar-name-container {
     margin-bottom: 10px;
   }
+  .messages.el-timeline {
+    padding-left: 10px;
+    max-width: 97%;
+  }
+  .el-timeline-item__wrapper {
+    padding-left: 18px;
+  }
+  .message-card .el-card__header .message-header {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    .message-actions {
+      width: auto;
+    }
+  }
+  .message-card .message-header .message-meta {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .message-timestamp {
+      margin-left: 0;
+    }
+  }
+}
 
+@media only screen and (max-width: 1051px) {
+  .messages.el-timeline {
+    max-width: 90%;
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .chat-page-header {
+    padding: 0;
+    margin: 7px 15px 15px 30px;
+    flex-direction: column;
+    align-items: baseline;
+    h1 {
+      margin-left: 0;
+      margin-bottom: 10px;
+    }
+  }
+  .chat-card-participants {
+    display: flex;
+    margin: 0;
+    flex-wrap: wrap;
+  }
+  .avatar-name-container {
+    margin-bottom: 10px;
+  }
+  .messages.el-timeline {
+    padding-left: 10px;
+    max-width: 97%;
+  }
   .el-timeline-item__wrapper {
     padding-left: 18px;
   }
-}
-@media only screen and (max-width:801px) and (min-width: 481px) {
-
 }
 </style>
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index ae926d6a..7564246c 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -354,13 +354,12 @@ table {
     display: inline
   }
 }
-.user-cards-container{
+.user-cards-container {
   display: flex;
   flex-direction: column;
   width: 30%;
   min-width: 300px;
   margin: 0 20px;
-
 }
 .user-profile-card {
   height: fit-content;
@@ -448,8 +447,8 @@ table {
       margin: 0 15px 15px 10px;
     }
   }
-  .user-profile-card {
-    margin: 0 10px;
+  .user-profile-card, .user-chats-card {
+    margin: 0 10px 20px;
     width: 95%;
     td {
       width: 80px;
@@ -458,6 +457,10 @@ table {
   .user-profile-container {
     flex-direction: column;
   }
+  .user-cards-container {
+    width: 100%;
+    margin: 0;
+  }
 }
 
 @media only screen and (max-width:801px) and (min-width: 481px) {
@@ -475,12 +478,12 @@ table {
     padding: 0;
     margin: 7px 15px 20px 20px;
   }
-  .user-profile-card {
-    margin: 0 20px;
-    width: fit-content;
-  }
   .user-profile-container {
     flex-direction: column;
   }
+  .user-cards-container {
+    width: 66%;
+    padding-left: 28px;
+  }
 }
 </style>