Update card with user information

src/lang/en.js

@@ -236,11 +236,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',

src/views/users/show.vue

@@ -5,60 +5,56 @@
       <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">
@@ -147,8 +143,11 @@ table {
     width: 100%;
   }
 }
+.recent-statuses-header {
+  margin-top: 10px;
+}
 .statuses {
-  padding-right: 20px;
+  padding: 0 20px 0 0;
 }
 .show-private {
   text-align: right;
@@ -158,4 +157,14 @@ table {
 .recent-statuses {
   margin-left: 40px;
 }
+.user-profile-card {
+  margin-left: 15px;
+  margin-right: 20px;
+}
+.user-profile-table {
+  margin: 0;
+}
+.user-profile-tag {
+  margin: 0 4px 4px 0;
+}
 </style>