Add links to see user and status in instance

This commit is contained in:
Angelina Filippova 2020-05-23 22:16:18 +03:00
parent 7ca28c7c75
commit 23ee4813f8
2 changed files with 35 additions and 7 deletions

View file

@ -91,9 +91,13 @@
<img :src="attachment.preview_url"> <img :src="attachment.preview_url">
</div> </div>
</div> </div>
<a :href="status.url" target="_blank" class="account" @click.stop> <div class="status-footer">
{{ parseTimestamp(status.created_at) }} <span class="status-created-at">{{ parseTimestamp(status.created_at) }}</span>
</a> <a v-if="status.url" :href="status.url" target="_blank" class="account" @click.stop>
Open status in instance
<i class="el-icon-top-right"/>
</a>
</div>
</div> </div>
</el-card> </el-card>
<el-card v-else class="status-card"> <el-card v-else class="status-card">
@ -110,9 +114,13 @@
<span v-if="status.content" class="status-content" v-html="status.content"/> <span v-if="status.content" class="status-content" v-html="status.content"/>
<span v-else class="status-without-content">no content</span> <span v-else class="status-without-content">no content</span>
</div> </div>
<a v-if="status.created_at" :href="status.url" target="_blank" class="account"> <div class="status-footer">
{{ parseTimestamp(status.created_at) }} <span v-if="status.created_at" class="status-created-at">{{ parseTimestamp(status.created_at) }}</span>
</a> <a v-if="status.url" :href="status.url" target="_blank" class="account" @click.stop>
Open status in instance
<i class="el-icon-top-right"/>
</a>
</div>
</el-card> </el-card>
</template> </template>
@ -226,9 +234,12 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
.account { .account {
text-decoration: underline;
line-height: 26px; line-height: 26px;
font-size: 13px; font-size: 13px;
color: #606266;
}
.account:hover {
text-decoration: underline;
} }
.image { .image {
width: 20%; width: 20%;
@ -265,10 +276,19 @@ export default {
font-size: 15px; font-size: 15px;
line-height: 26px; line-height: 26px;
} }
.status-created-at {
font-size: 14px;
color: #606266;
}
.status-deleted { .status-deleted {
font-style: italic; font-style: italic;
margin-top: 3px; margin-top: 3px;
} }
.status-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.status-header { .status-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View file

@ -4,6 +4,9 @@
<div class="avatar-name-container"> <div class="avatar-name-container">
<el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" /> <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
<h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1> <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
<a v-if="accountExists(user, 'url')" :href="user.url" target="_blank" class="account">
<i class="el-icon-top-right"/>
</a>
</div> </div>
<div class="left-header-container"> <div class="left-header-container">
<moderation-dropdown <moderation-dropdown
@ -116,6 +119,11 @@ export default {
.avatar-name-container { .avatar-name-container {
display: flex; display: flex;
align-items: center; align-items: center;
.el-icon-top-right {
font-size: 2em;
line-height: 36px;
color: #606266;
}
} }
.no-statuses { .no-statuses {
margin-left: 28px; margin-left: 28px;