From 23ee4813f81150c44d931c578146570db2e97563 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 23 May 2020 22:16:18 +0300
Subject: [PATCH] Add links to see user and status in instance

---
 src/components/Status/index.vue | 34 ++++++++++++++++++++++++++-------
 src/views/statuses/show.vue     |  8 ++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index aa327af3..3bd2c656 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -91,9 +91,13 @@
           <img :src="attachment.preview_url">
         </div>
       </div>
-      <a :href="status.url" target="_blank" class="account" @click.stop>
-        {{ parseTimestamp(status.created_at) }}
-      </a>
+      <div class="status-footer">
+        <span class="status-created-at">{{ parseTimestamp(status.created_at) }}</span>
+        <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>
   </el-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-else class="status-without-content">no content</span>
     </div>
-    <a v-if="status.created_at" :href="status.url" target="_blank" class="account">
-      {{ parseTimestamp(status.created_at) }}
-    </a>
+    <div class="status-footer">
+      <span v-if="status.created_at" class="status-created-at">{{ parseTimestamp(status.created_at) }}</span>
+      <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>
 </template>
 
@@ -226,9 +234,12 @@ export default {
   margin-bottom: 10px;
   cursor: pointer;
   .account {
-    text-decoration: underline;
     line-height: 26px;
     font-size: 13px;
+    color: #606266;
+  }
+  .account:hover {
+    text-decoration: underline;
   }
   .image {
     width: 20%;
@@ -265,10 +276,19 @@ export default {
     font-size: 15px;
     line-height: 26px;
   }
+  .status-created-at {
+    font-size: 14px;
+    color: #606266;
+  }
   .status-deleted {
     font-style: italic;
     margin-top: 3px;
   }
+  .status-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
   .status-header {
     display: flex;
     justify-content: space-between;
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index d641399a..b481d86c 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -4,6 +4,9 @@
       <div class="avatar-name-container">
         <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
         <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 class="left-header-container">
         <moderation-dropdown
@@ -116,6 +119,11 @@ export default {
 .avatar-name-container {
   display: flex;
   align-items: center;
+  .el-icon-top-right {
+    font-size: 2em;
+    line-height: 36px;
+    color: #606266;
+  }
 }
 .no-statuses {
   margin-left: 28px;