Fix styles and add message when there are no statuses

src/lang/en.js

@@ -245,7 +245,8 @@ export default {
     roles: 'Roles',
     activeUppercase: 'Active',
     active: 'active',
-    deactivated: 'deactivated'
+    deactivated: 'deactivated',
+    noStatuses: 'No statuses to show'
   },
   usersFilter: {
     inputPlaceholder: 'Select filter',

src/views/status/Status.vue

@@ -185,54 +185,56 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
-.account {
-  text-decoration: underline;
-  line-height: 26px;
-  font-size: 13px;
-}
-.image {
-  width: 20%;
-  img {
-    width: 100%;
-  }
-}
-.show-more-button {
-  margin-left: 5px;
-}
-.status-account {
-  display: flex;
-  align-items: center;
-}
-.status-avatar-img {
-  width: 15px;
-  height: 15px;
-  margin-right: 5px;
-}
-.status-account-name {
-  margin: 0;
-  height: 22px;
-}
-.status-body {
-  display: flex;
-  flex-direction: column;
-}
-.status-content {
-  font-size: 15px;
-  line-height: 26px;
-}
 .status-card {
-  margin-bottom: 15px;
+  .account {
-}
+    text-decoration: underline;
-.status-deleted {
+    line-height: 26px;
-  font-style: italic;
+    font-size: 13px;
-  margin-top: 3px;
+  }
-}
+  .image {
-.status-header {
+    width: 20%;
-  display: flex;
+    img {
-  justify-content: space-between;
+      width: 100%;
-}
+    }
-.status-without-content {
+  }
-  font-style: italic;
+  .show-more-button {
+    margin-left: 5px;
+  }
+  .status-account {
+    display: flex;
+    align-items: center;
+  }
+  .status-avatar-img {
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+  }
+  .status-account-name {
+    margin: 0;
+    height: 22px;
+  }
+  .status-body {
+    display: flex;
+    flex-direction: column;
+  }
+  .status-content {
+    font-size: 15px;
+    line-height: 26px;
+  }
+  .status-card {
+    margin-bottom: 15px;
+  }
+  .status-deleted {
+    font-style: italic;
+    margin-top: 3px;
+  }
+  .status-header {
+    display: flex;
+    justify-content: space-between;
+  }
+  .status-without-content {
+    font-style: italic;
+  }
 }
 @media
 only screen and (max-width: 760px),

src/views/users/index.vue

@@ -156,9 +156,6 @@
         </p>
       </div>
     </el-dialog>
-    <div v-if="users.length === 0" class="no-users-message">
-      <p>There are no users to display</p>
-    </div>
     <div v-if="!loading" class="pagination">
       <el-pagination
         :total="usersCount"

src/views/users/show.vue

@@ -61,7 +61,7 @@
         </el-card>
       </el-col>
       <el-row type="flex" class="row-bg" justify="space-between">
-        <el-col :span="16">
+        <el-col :span="18">
           <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
         </el-col>
         <el-col :span="6" class="show-private">
@@ -70,11 +70,12 @@
           </el-checkbox>
         </el-col>
       </el-row>
-      <el-col :span="18">
+      <el-col :span="16">
         <el-timeline v-if="!statusesLoading" class="statuses">
           <el-timeline-item v-for="status in statuses" :key="status.id">
             <status :status="status" :user-id="user.id" :godmode="showPrivate"/>
           </el-timeline-item>
+          <p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
         </el-timeline>
       </el-col>
     </el-row>
@@ -147,6 +148,11 @@ table {
     width: 100%;
   }
 }
+.no-statuses {
+  margin-left: 28px;
+  color: #606266;
+
+}
 .recent-statuses-header {
   margin-top: 10px;
 }
@@ -159,7 +165,7 @@ table {
   padding-right: 20px;
 }
 .recent-statuses {
-  margin-left: 40px;
+  margin-left: 28px;
 }
 .user-profile-card {
   margin-left: 15px;