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>