qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

chat preview in user profile chat card

Browse source
This commit is contained in:
Mary Kate 2020-09-09 16:12:59 -05:00 committed by Angelina Filippova
parent ffb8f3412c
commit c46793cfaa
1 changed files with 46 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/views/users/show.vue
View file

@ -118,9 +118,21 @@
<tr v-if="statuses.length === 0" class="no-statuses">>
{{ $t('userProfile.noChats') }}
</tr>
<tr v-for="chat in chats" :key="chat.id" class="el-table__row">
<td class="chat-item">
{{ chat.account.acct }}
<tr v-for="chat in chats" :key="chat.id" class="el-table__row chat-item">
<td>
<div class="chat-card-header">
<img v-if="propertyExists(chat.account, 'avatar')" :src="chat.account.avatar" class="chat-avatar-img">
<span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">{{ chat.account.username }}</span>
<span v-else>
<span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">
{{ chat.account.username }}
</span>
<span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
</span>
</div>
<div class="chat-card-preview">
<span v-if="propertyExists(chat, 'last_message')" class="chat-preview">{{ chat.last_message.content }}</span>
</div>
</td>
</tr>
</tbody>
@ -343,17 +355,18 @@ table {
.user-cards-container{
display: flex;
flex-direction: column;
width: 30%;
min-width: 300px;
margin: 0 20px;
}
.user-profile-card {
margin: 0 20px;
width: 30%;
min-width: 300px;
height: fit-content;
width: auto;
margin-bottom: 20px;
}
.user-chats-card {
margin: 20px 20px;
width: 30%;
min-width: 300px;
width: auto;
height: fit-content;
}
.user-profile-container {
@ -363,6 +376,9 @@ table {
margin: 0;
width: inherit;
}
.user-chats-table {
width: 100%;
}
.user-profile-tag {
margin: 0 4px 4px 0;
}
@ -371,6 +387,27 @@ table {
font-weight: bold;
margin: 5px 0;
}
.chat-card-header {
display: flex;
align-items: center;
}
.chat-avatar-img {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
}
.chat-account-name {
display: inline-block;
margin: 0;
font-size: 15px;
font-weight: 500;
}
.chat-card-preview {
color: gray;
font-style: italic;
margin: 5px 0 0 20px;
}
@media only screen and (max-width:480px) {
.avatar-name-container {