From 2d52fbdfcb91d6bcb497893550bc187554fd7589 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 1 Oct 2019 22:54:13 +0300
Subject: [PATCH] Update card with user information

---
 src/lang/en.js           |  11 +++-
 src/views/users/show.vue | 137 +++++++++++++++++++++------------------
 2 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 8088e441..c1ecd22a 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -238,11 +238,16 @@ export default {
     tags: 'Tags',
     moderator: 'Moderator',
     admin: 'Admin',
-    local: 'Local',
+    local: 'local',
+    external: 'external',
+    localUppercase: 'Local',
     nickname: 'Nickname',
-    deactivated: 'Deactivated',
     recentStatuses: 'Recent Statues',
-    showPrivateStatuses: 'Show private statuses'
+    showPrivateStatuses: 'Show private statuses',
+    roles: 'Roles',
+    activeUppercase: 'Active',
+    active: 'active',
+    deactivated: 'deactivated'
   },
   usersFilter: {
     inputPlaceholder: 'Select filter',
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 049ae02f..00ca72b4 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -5,70 +5,66 @@
       <h1>{{ user.display_name }}</h1>
     </header>
     <el-row>
-      <el-col :span="6">
-        <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
-          <table class="el-table__body">
-            <tbody>
-              <tr class="el-table__row">
-                <td class="name-col">ID</td>
-                <td class="value-col">
-                  {{ user.id }}
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.tags') }}</td>
-                <td>
-                  <el-tag v-for="tag in user.tags" :key="tag">{{ tag }}</el-tag>
-                  <span v-if="user.tags.length === 0">None</span>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.moderator') }}</td>
-                <td>
-                  <el-tag v-if="user.roles.moderator" type="success"><i class="el-icon-check" /></el-tag>
-                  <el-tag v-if="!user.roles.moderator" type="danger"><i class="el-icon-error" /></el-tag>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.admin') }}</td>
-                <td>
-                  <el-tag v-if="user.roles.admin" type="success"><i class="el-icon-check" /></el-tag>
-                  <el-tag v-if="!user.roles.admin" type="danger"><i class="el-icon-error" /></el-tag>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.local') }}</td>
-                <td>
-                  <el-tag v-if="user.local" type="success"><i class="el-icon-check" /></el-tag>
-                  <el-tag v-if="!user.local" type="danger"><i class="el-icon-error" /></el-tag>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.deactivated') }}</td>
-                <td>
-                  <el-tag v-if="user.deactivated" type="success"><i class="el-icon-check" /></el-tag>
-                  <el-tag v-if="!user.deactivated" type="danger"><i class="el-icon-error" /></el-tag>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.nickname') }}</td>
-                <td>
-                  {{ user.nickname }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+      <el-col :span="8">
+        <el-card class="user-profile-card">
+          <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
+            <table class="user-profile-table">
+              <tbody>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.nickname') }}</td>
+                  <td>
+                    {{ user.nickname }}
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td class="name-col">ID</td>
+                  <td class="value-col">
+                    {{ user.id }}
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.tags') }}</td>
+                  <td>
+                    <el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
+                    <span v-if="user.tags.length === 0">—</span>
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.roles') }}</td>
+                  <td>
+                    <el-tag v-if="user.roles.moderator" class="user-profile-tag"/>
+                    <el-tag v-if="user.roles.admin" class="user-profile-tag"/>
+                    <span v-if="!user.roles.moderator && !user.roles.admin">—</span>
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.localUppercase') }}</td>
+                  <td>
+                    <el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
+                    <el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.activeUppercase') }}</td>
+                  <td>
+                    <el-tag v-if="user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
+                    <el-tag v-if="!user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
       </el-col>
-      <el-row type="flex" class="row-bg" justify="space-between">
-        <el-col :span="18"><h2>{{ $t('userProfile.recentStatuses') }}</h2></el-col>
-        <el-col :span="6" class="show-private">
-          <el-checkbox v-model="showPrivate" @change="onTogglePrivate">
-            {{ $t('userProfile.showPrivateStatuses') }}
-          </el-checkbox>
-        </el-col>
-      </el-row>
-      <el-col :span="18">
+      <el-col :span="16">
+        <el-row type="flex" class="row-bg" justify="space-between">
+          <el-col :span="18"><h2 class="recent-statuses-header">{{ $t('userProfile.recentStatuses') }}</h2></el-col>
+          <el-col :span="6" class="show-private">
+            <el-checkbox v-model="showPrivate" @change="onTogglePrivate">
+              {{ $t('userProfile.showPrivateStatuses') }}
+            </el-checkbox>
+          </el-col>
+        </el-row>
         <el-timeline class="statuses">
           <el-timeline-item v-for="status in statuses" :timestamp="createdAtLocaleString(status.created_at)" :key="status.id">
             <el-card>
@@ -168,12 +164,25 @@ table {
     width: 100%;
   }
 }
+.recent-statuses-header {
+  margin-top: 10px;
+}
 .statuses {
-  padding-right: 20px;
+  padding: 0 20px 0 0;
 }
 .show-private {
   text-align: right;
   line-height: 67px;
   padding-right: 20px;
 }
+.user-profile-card {
+  margin-left: 15px;
+  margin-right: 20px;
+}
+.user-profile-table {
+  margin: 0;
+}
+.user-profile-tag {
+  margin: 0 4px 4px 0;
+}
 </style>