From 648acc8934ccfbd6898fa874c826e715f5ca3ee0 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 26 Feb 2020 22:00:49 +0300
Subject: [PATCH 1/7] Fix margins for grouped reports

---
 src/views/reports/components/GroupedReport.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/reports/components/GroupedReport.vue b/src/views/reports/components/GroupedReport.vue
index fe4aa6f3..e7ce15e2 100644
--- a/src/views/reports/components/GroupedReport.vue
+++ b/src/views/reports/components/GroupedReport.vue
@@ -109,6 +109,9 @@ export default {
   .el-icon-arrow-right {
     margin-right: 6px;
   }
+  .divider {
+    margin: 15px 0;
+  }
   .grouped-report {
     .header-container {
       display: flex;

From f6683f6d21886651941e70da01b742d9b1c8196c Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 26 Feb 2020 23:19:33 +0300
Subject: [PATCH 2/7] Add Mobile and Tablet UI to Moderation Log section

---
 src/views/moderation_log/index.vue | 116 +++++++++++++++++++----------
 1 file changed, 75 insertions(+), 41 deletions(-)

diff --git a/src/views/moderation_log/index.vue b/src/views/moderation_log/index.vue
index 6dba06f6..2e249b80 100644
--- a/src/views/moderation_log/index.vue
+++ b/src/views/moderation_log/index.vue
@@ -1,46 +1,40 @@
 <template>
   <div v-if="!loading" class="moderation-log-container">
     <h1>{{ $t('moderationLog.moderationLog') }}</h1>
-    <el-row type="flex" class="row-bg" justify="space-between">
-      <el-col :span="9">
-        <el-select
-          v-model="user"
-          class="user-select"
-          clearable
-          placeholder="Filter by admin/moderator"
-          @change="fetchLogWithFilters">
-          <el-option-group
-            v-for="group in users"
-            :key="group.label"
-            :label="group.label">
-            <el-option
-              v-for="item in group.options"
-              :key="item.id"
-              :label="item.nickname"
-              :value="item.id" />
-          </el-option-group>
-        </el-select>
-      </el-col>
-      <el-col :span="6" class="search-container">
-        <el-input
-          v-model="search"
-          placeholder="Search logs"
-          clearable
-          @input="handleDebounceSearchInput" />
-      </el-col>
-    </el-row>
-    <el-row type="flex" class="row-bg" justify="space-between">
-      <el-col :span="9" class="date-container">
-        <el-date-picker
-          :default-time="['00:00:00', '23:59:59']"
-          v-model="dateRange"
-          type="daterange"
-          start-placeholder="Start date"
-          end-placeholder="End date"
-          unlink-panels
-          @change="fetchLogWithFilters" />
-      </el-col>
-    </el-row>
+    <div class="moderation-log-nav-container">
+      <el-select
+        v-model="user"
+        class="moderation-log-user-select"
+        clearable
+        placeholder="Filter by admin/moderator"
+        @change="fetchLogWithFilters">
+        <el-option-group
+          v-for="group in users"
+          :key="group.label"
+          :label="group.label">
+          <el-option
+            v-for="item in group.options"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item.id"/>
+        </el-option-group>
+      </el-select>
+      <el-input
+        v-model="search"
+        placeholder="Search logs"
+        clearable
+        class="moderation-log-search"
+        @input="handleDebounceSearchInput"/>
+    </div>
+    <el-date-picker
+      :default-time="['00:00:00', '23:59:59']"
+      v-model="dateRange"
+      type="daterange"
+      start-placeholder="Start date"
+      end-placeholder="End date"
+      unlink-panels
+      class="moderation-log-date-panel"
+      @change="fetchLogWithFilters" />
     <el-timeline>
       <el-timeline-item
         v-for="(logEntry, index) in log"
@@ -55,6 +49,7 @@
         :hide-on-single-page="true"
         :page-size="50"
         :total="total"
+        :small="isMobile"
         layout="prev, pager, next"
         @current-change="fetchLogWithFilters" />
     </div>
@@ -76,6 +71,9 @@ export default {
     }
   },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     loading() {
       return this.$store.state.moderationLog.logLoading &&
              this.$store.state.moderationLog.adminsLoading
@@ -138,7 +136,17 @@ h1 {
   margin: 25px 45px 0 0;
   padding: 0px;
 }
-.user-select {
+.moderation-log-date-panel {
+  width: 350px;
+}
+.moderation-log-nav-container {
+  display: flex;
+  justify-content: space-between;
+}
+.moderation-log-search {
+  width: 350px;
+}
+.moderation-log-user-select {
   margin: 0 0 20px;
   width: 350px;
 }
@@ -148,4 +156,30 @@ h1 {
 .pagination {
   text-align: center;
 }
+
+@media only screen and (max-width:480px) {
+  .moderation-log-date-panel {
+    width: 100%;
+  }
+  .moderation-log-user-select {
+    margin: 0 0 10px;
+    width: 55%;
+  }
+  .moderation-log-search {
+    width: 40%;
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .moderation-log-date-panel {
+    width: 55%;
+  }
+  .moderation-log-user-select {
+    margin: 0 0 10px;
+    width: 55%;
+  }
+  .moderation-log-search {
+    width: 40%;
+  }
+}
 </style>

From 0e3cfb4b72ca71bd46e97afd2f5c833e27064aaa Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 27 Feb 2020 00:23:15 +0300
Subject: [PATCH 3/7] Add mobile UI styles for invite tokens section

---
 src/views/invites/index.vue | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/views/invites/index.vue b/src/views/invites/index.vue
index e8ca75fd..2497bfc0 100644
--- a/src/views/invites/index.vue
+++ b/src/views/invites/index.vue
@@ -85,7 +85,7 @@
         sortable/>
       <el-table-column
         :label="$t('invites.token')"
-        :min-width="isDesktop ? 350 : 125"
+        :min-width="isDesktop ? 320 : 120"
         prop="token"/>
       <el-table-column
         v-if="isDesktop"
@@ -119,7 +119,9 @@
         <template slot-scope="scope">
           <el-tag
             :type="scope.row.used ? 'danger' : 'success'"
-            disable-transitions>{{ scope.row.used ? $t('invites.used') : $t('invites.active') }}</el-tag>
+            disable-transitions>
+            {{ scope.row.used ? $t('invites.used') : $t('invites.active') }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -268,9 +270,8 @@ export default {
     margin: 0 0 10px 0;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .invites-container {
     .actions-container {
       display: flex;
@@ -279,6 +280,9 @@ only screen and (max-width: 760px),
       align-items: center;
       margin: 15px 10px 7px 10px;
     }
+    .cell {
+      padding: 0;
+    }
     .create-invite-token {
       width: 100%;
     }
@@ -296,7 +300,9 @@ only screen and (max-width: 760px),
     }
     .invite-token-table {
       width: 100%;
-      margin: 0;
+      margin: 0 5px;
+      font-size: 12px;
+      font-weight: 500;
     }
     .invite-via-email {
       width: 100%;
@@ -308,6 +314,11 @@ only screen and (max-width: 760px),
     .info {
       margin: 0 0 10px 5px;
     }
+    th {
+      .cell {
+        padding: 0;
+      }
+    }
   }
   .create-invite-token {
     width: 100%

From e38c59cc49d33ded2b65e1525f89e015666ed7e0 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 27 Feb 2020 01:13:51 +0300
Subject: [PATCH 4/7] Fix mobile-UI for reports section

---
 src/components/Status/index.vue                |  5 ++---
 src/views/reports/components/GroupedReport.vue | 13 ++++++++++---
 src/views/reports/components/NoteCard.vue      |  5 ++---
 src/views/reports/components/Report.vue        | 13 +++++++++----
 src/views/reports/components/ReportCard.vue    |  5 ++---
 src/views/reports/components/ReportsFilter.vue | 11 ++++++++---
 src/views/reports/index.vue                    |  8 ++------
 src/views/settings/styles/main.scss            |  2 +-
 src/views/statuses/index.vue                   |  4 +---
 src/views/users/components/UsersFilter.vue     | 11 ++++++++---
 10 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index f6c63a12..50fbcfb0 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -267,9 +267,8 @@ export default {
     font-style: italic;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .el-message {
     min-width: 80%;
   }
diff --git a/src/views/reports/components/GroupedReport.vue b/src/views/reports/components/GroupedReport.vue
index e7ce15e2..54ee5b1a 100644
--- a/src/views/reports/components/GroupedReport.vue
+++ b/src/views/reports/components/GroupedReport.vue
@@ -140,9 +140,8 @@ export default {
   .reported-status {
     margin-top: 15px;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .grouped-report {
       .header-container {
         display: flex;
@@ -158,5 +157,13 @@ export default {
         margin-bottom: 7px;
       }
     }
+    .block {
+      .reports-timeline .el-timeline {
+        margin: 20px 10px;
+        .el-timeline-item__wrapper {
+          padding-left: 20px;
+        }
+      }
+    }
   }
 </style>
diff --git a/src/views/reports/components/NoteCard.vue b/src/views/reports/components/NoteCard.vue
index fdc81d91..379e752b 100644
--- a/src/views/reports/components/NoteCard.vue
+++ b/src/views/reports/components/NoteCard.vue
@@ -97,9 +97,8 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .el-card__header {
       padding: 10px 17px;
     }
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 9b963679..5911ad7d 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -74,7 +74,7 @@
                 v-model="notes[report.id]"
                 :placeholder="$t('reports.leaveNote')"
                 type="textarea"
-                rows="3"/>
+                rows="2"/>
               <div class="report-post-note">
                 <el-button @click="handleNewNote(report.id)">{{ $t('reports.postNote') }}</el-button>
               </div>
@@ -279,9 +279,8 @@ export default {
     font-style: italic;
     color: gray;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .report {
       .header-container {
         display: flex;
@@ -303,5 +302,11 @@ export default {
         margin-bottom: 7px;
       }
     }
+    .reports-timeline {
+      margin: 20px 10px;
+      .el-timeline-item__wrapper {
+        padding-left: 20px;
+      }
+    }
   }
 </style>
diff --git a/src/views/reports/components/ReportCard.vue b/src/views/reports/components/ReportCard.vue
index 6121bb52..430b58bb 100644
--- a/src/views/reports/components/ReportCard.vue
+++ b/src/views/reports/components/ReportCard.vue
@@ -108,9 +108,8 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .el-card__header {
       padding: 10px 17px;
     }
diff --git a/src/views/reports/components/ReportsFilter.vue b/src/views/reports/components/ReportsFilter.vue
index da1fd782..29e15075 100644
--- a/src/views/reports/components/ReportsFilter.vue
+++ b/src/views/reports/components/ReportsFilter.vue
@@ -54,12 +54,17 @@ export default {
 .select-field {
   width: 350px;
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .select-field {
+    width: 50%;
+  }
+}
 </style>
diff --git a/src/views/reports/index.vue b/src/views/reports/index.vue
index 3e67d90e..8c37e6a1 100644
--- a/src/views/reports/index.vue
+++ b/src/views/reports/index.vue
@@ -92,9 +92,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) {
   .reports-container {
     h1 {
       margin: 7px 10px 15px 10px;
@@ -103,8 +102,5 @@ only screen and (max-width: 760px),
       margin: 0 10px;
     }
   }
-  #app > div > div.main-container > section > div > div.block > ul {
-    margin: 45px 45px 5px 19px;
-  }
 }
 </style>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index a6658b55..5b68e0c6 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -520,8 +520,8 @@
       margin-right: 8px
     }
   }
-  @media only screen and (max-width:801px) and (min-width: 481px) {
 
+  @media only screen and (max-width:801px) and (min-width: 481px) {
     .delete-setting-button {
       margin: 4px 0 0 10px;
       height: 28px;
diff --git a/src/views/statuses/index.vue b/src/views/statuses/index.vue
index 828526c8..5dc4834d 100644
--- a/src/views/statuses/index.vue
+++ b/src/views/statuses/index.vue
@@ -129,9 +129,7 @@ h1 {
   margin: 22px 0 0 0;
 }
 
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+@media only screen and (max-width:480px) {
   .filter-container {
     display: flex;
     height: 36px;
diff --git a/src/views/users/components/UsersFilter.vue b/src/views/users/components/UsersFilter.vue
index edb3d75d..eba859f6 100644
--- a/src/views/users/components/UsersFilter.vue
+++ b/src/views/users/components/UsersFilter.vue
@@ -61,12 +61,17 @@ export default {
 .select-field {
   width: 350px;
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .select-field {
+    width: 50%;
+  }
+}
 </style>

From 2524581cfdfafe43b83edf1ef1ce1d2bdfb91cd5 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 27 Feb 2020 01:30:11 +0300
Subject: [PATCH 5/7] Fix mobile-UI for statuses by instance section

---
 src/views/statuses/index.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/statuses/index.vue b/src/views/statuses/index.vue
index 5dc4834d..b6fd2019 100644
--- a/src/views/statuses/index.vue
+++ b/src/views/statuses/index.vue
@@ -134,12 +134,14 @@ h1 {
     display: flex;
     height: 36px;
     flex-direction: column;
-    margin: 10px 10px
+    margin: 10px 0;
   }
-
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
+  .select-instance {
+    width: 100%;
+  }
 }
 </style>

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 6/7] 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>

From a982fcbcb9331806cfa88507bf0018c35c168d0a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 27 Feb 2020 02:58:03 +0300
Subject: [PATCH 7/7] Add mobile and tablet UI for user profile

---
 src/views/users/show.vue | 50 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index cdc08767..ca0ed538 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -204,6 +204,7 @@ table {
 }
 .show-private-statuses {
   margin-left: 28px;
+  margin-bottom: 20px;
 }
 .recent-statuses {
   margin-left: 28px;
@@ -235,11 +236,60 @@ table {
   .avatar-name-container {
     margin-bottom: 10px;
   }
+  .recent-statuses {
+    margin: 20px 10px 15px 10px;
+  }
+  .recent-statuses-container {
+    width: 100%;
+    margin: 0 10px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 10px;
+  }
   .user-page-header {
     flex-direction: column;
     align-items: flex-start;
     padding: 0;
     margin: 7px 0 15px 10px;
   }
+  .user-profile-card {
+    margin: 0 10px;
+    width: 95%;
+    td {
+      width: 80px;
+    }
+  }
+  .user-profile-container {
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .avatar-name-container {
+    margin-bottom: 20px;
+  }
+  .recent-statuses {
+    margin: 20px 10px 15px 0;
+  }
+  .recent-statuses-container {
+    width: 97%;
+    margin: 0 20px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 0;
+  }
+  .user-page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    margin: 7px 0 20px 20px;
+  }
+  .user-profile-card {
+    margin: 0 20px;
+    width: fit-content;
+  }
+  .user-profile-container {
+    flex-direction: column;
+  }
 }
 </style>