From 1ac453058fdf98ab0f49cf8c1de57d9d5c98820a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 27 Feb 2020 02:18:47 +0300
Subject: [PATCH] Change the way user profile is rendered to using flexbox

---
 .../users/components/NewAccountDialog.vue     |   5 +-
 src/views/users/index.vue                     |   5 +-
 src/views/users/show.vue                      | 155 ++++++++++--------
 3 files changed, 90 insertions(+), 75 deletions(-)

diff --git a/src/views/users/components/NewAccountDialog.vue b/src/views/users/components/NewAccountDialog.vue
index 4190f3cc..5b32985d 100644
--- a/src/views/users/components/NewAccountDialog.vue
+++ b/src/views/users/components/NewAccountDialog.vue
@@ -139,9 +139,8 @@ export default {
 .create-account-form-item-without-margin {
   margin-bottom: 0px;
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .create-user-dialog {
     width: 85%
   }
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 2940f776..780f9b39 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -269,9 +269,8 @@ export default {
     font-size: 28px;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .password-reset-token-dialog {
     width: 85%
   }
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 40952aeb..cdc08767 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -23,81 +23,73 @@
         </p>
       </div>
     </el-dialog>
-    <el-row>
-      <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.admin" class="user-profile-tag">
-                      {{ $t('users.admin') }}
-                    </el-tag>
-                    <el-tag v-if="user.roles.moderator" class="user-profile-tag">
-                      {{ $t('users.moderator') }}
-                    </el-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 class="recent-statuses">{{ $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="16">
+    <div class="user-profile-container">
+      <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.admin" class="user-profile-tag">
+                    {{ $t('users.admin') }}
+                  </el-tag>
+                  <el-tag v-if="user.roles.moderator" class="user-profile-tag">
+                    {{ $t('users.moderator') }}
+                  </el-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>
+      <div class="recent-statuses-container">
+        <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
+        <el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
+          {{ $t('userProfile.showPrivateStatuses') }}
+        </el-checkbox>
         <el-timeline v-if="!statusesLoading" class="statuses">
           <el-timeline-item v-for="status in statuses" :key="status.id">
             <status :status="status" :show-checkbox="false" :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>
+      </div>
+    </div>
   </main>
 </template>
 
@@ -193,6 +185,11 @@ table {
   margin-left: 28px;
   color: #606266;
 }
+.recent-statuses-container {
+  display: flex;
+  flex-direction: column;
+  width: 67%;
+}
 .recent-statuses-header {
   margin-top: 10px;
 }
@@ -205,6 +202,9 @@ table {
   line-height: 67px;
   margin-right: 20px;
 }
+.show-private-statuses {
+  margin-left: 28px;
+}
 .recent-statuses {
   margin-left: 28px;
 }
@@ -218,6 +218,11 @@ table {
 }
 .user-profile-card {
   margin: 0 20px;
+  width: 30%;
+  height: fit-content;
+}
+.user-profile-container {
+  display: flex;
 }
 .user-profile-table {
   margin: 0;
@@ -225,4 +230,16 @@ table {
 .user-profile-tag {
   margin: 0 4px 4px 0;
 }
+
+@media only screen and (max-width:480px) {
+  .avatar-name-container {
+    margin-bottom: 10px;
+  }
+  .user-page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    margin: 7px 0 15px 10px;
+  }
+}
 </style>