Fix styles for Desktop, Mobile and Tablet

src/components/Status/index.vue

@@ -18,8 +18,10 @@
           </div>
         </div>
         <div class="status-actions">
+          <div class="status-tags">
             <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
             <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
+          </div>
           <el-dropdown trigger="click" @click.native.stop>
             <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
               {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
@@ -283,7 +285,7 @@ export default {
     line-height: 26px;
   }
   .status-created-at {
-    font-size: 14px;
+    font-size: 13px;
     color: #606266;
   }
   .status-deleted {
@@ -300,6 +302,9 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
+  .status-tags {
+    display: inline;
+  }
   .status-without-content {
     font-style: italic;
   }
@@ -317,7 +322,7 @@ export default {
       padding: 10px 17px;
     }
     .el-tag {
-      margin: 3px 4px 3px 0;
+      margin: 3px 0;
     }
     .status-account-container {
       margin-bottom: 5px;
@@ -326,12 +331,20 @@ export default {
       margin: 3px 0 3px;
     }
     .status-actions {
+      width: 100%;
       display: flex;
       flex-wrap: wrap;
+      justify-content: space-between;
+    }
+    .status-footer {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-top: 10px;
     }
     .status-header {
       display: flex;
       flex-direction: column;
+      align-items: flex-start;
     }
   }
 }

src/views/statuses/show.vue

@@ -21,7 +21,7 @@
         <reboot-button/>
       </div>
     </header>
-    <div v-if="isMobile" class="user-page-header-container">
+    <div v-if="isMobile" class="status-page-header-container">
       <header class="user-page-header">
         <div class="avatar-name-container">
           <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
@@ -210,36 +210,57 @@ export default {
   }
   .recent-statuses-container-show {
     width: 100%;
-    margin: 0 0 0 15px;
+    margin: 0 0 0 10px;
+    .el-timeline-item {
+      margin-left: 0;
+    }
+    .recent-statuses {
+      margin-left: 0;
     }
     .show-private-statuses {
-    margin: 0 10px 20px 10px;
+      margin: 0 10px 20px 0;
+    }
+  }
+  .status-card {
+    .el-card__body {
+      padding: 15px;
+    }
   }
   .status-container {
     margin: 0 10px;
   }
   .statuses {
     padding-right: 10px;
-    margin-left: 8px;
+    margin-left: 0;
+    .el-timeline-item__wrapper {
+      margin-right: 10px;
+    }
   }
   .user-page-header {
     padding: 0;
-    margin: 7px 15px 15px 10px;
+    margin: 7px 15px 5px 10px;
   }
-  .user-page-header-container {
+  .status-page-header-container {
+    width: 100%;
     .el-dropdown {
-      width: 95%;
-      margin: 0 15px 15px 10px;
+      width: stretch;
+      margin: 0 10px 15px 10px;
     }
   }
 }
 @media only screen and (max-width:801px) and (min-width: 481px) {
-  .recent-statuses {
-    margin: 20px 10px 15px 0;
-  }
   .recent-statuses-container-show {
     width: 97%;
     margin: 0 20px;
+    .el-timeline-item {
+      margin-left: 2px;
+    }
+    .recent-statuses {
+      margin: 20px 10px 15px 0;
+    }
+    .show-private-statuses {
+      margin: 0 10px 20px 0;
+    }
   }
   .show-private-statuses {
     margin: 0 10px 20px 0;

src/views/users/components/ModerationDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown :hide-on-click="false" size="small" trigger="click">
+  <el-dropdown :hide-on-click="false" size="small" trigger="click" placement="top-start">
     <div>
       <span v-if="page === 'users'" class="el-dropdown-link">
         {{ $t('users.moderation') }}